《css揭秘》- 47个不为人知的高阶操作🔥(下篇20-47， 7K长文多图预警)（四）

<p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p>
<figure>
    <img src="http://placekitten.com/g/200/300" />
    <figcaption>
        The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
    </figcaption>
</figure>
<p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p>
/**
 * Intrinsic sizing
 */
figure {
    max-width: 300px;
    max-width: min-content;
    margin: auto;
}
figure > img { max-width: inherit }
/* Basic styling */
figure {
    padding: 10px;
    border: 1px solid silver;
}

/**
 * Taming table column widths
 */
body { background: #ddd }
section {
    width: 500px;
    margin: 2em;
    background: white;
}
table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;
}
section + section table { table-layout: fixed }
td {
    border: 1px solid #aaa;
}
td.preformatted {
    white-space: pre;
    font-family: Consolas, Monaco, monospace;
    text-overflow: ellipsis;
    overflow: hidden;
}

<ul class="palette">
    <li>
        <div class="color-options">
            <a class="add" href="#">Add</a>
            <a class="delete" href="#">Delete</a>
        </div>
    </li>
</ul>
/**
 * Styling by sibling count: Color palette example
 */
/* Hide "color" 4 items or more */
.palette li:first-child:nth-last-child(n+4) .color-options a:after,
.palette li:first-child:nth-last-child(n+4) ~ li .color-options a:after {
    content: none;
}
/* Hide word when 6 items or more */
.palette li:first-child:nth-last-child(n+6) .color-options a,
.palette li:first-child:nth-last-child(n+6) ~ li .color-options a {
    color: transparent;
    font-size: 0;
}
.palette li:only-child .delete {
    display:none;
}
/* From this point it’s just styling */
.palette {
    display: flex;
    height: 200px;
    max-width:900px;
    font: bold 90%/1 sans-serif;
}
.palette li {
    flex: 1;
    list-style: none;
    background: #D6E055;
}
.color-options {
    background: rgba(0,0,0,.5);
    padding: 10px;
    margin: 0 10px;
    overflow:hidden;
    border-radius:0 0 10px 10px;
}
.color-options .add { float:left; }
.color-options .delete { float:right; }
.color-options a {
    color: white;
    text-decoration:none;
}
.color-options a:before {
    display:inline-block;
    font-size: 1rem;
    width:1.3rem;
    margin-right:.3rem;
    text-align: center;
    line-height: 1.3;
    background:white;
    border-radius: 50%;
    letter-spacing: normal;
}
.color-options .add:before {
    content:'✚';
    color:#590;
}
.color-options .delete:before {
    content:'✖';
    color:#b00;
}
.color-options a:after {
    content: ' color';
    font-weight: normal;
}

<header>
    <h1>Fluid background, fixed content</h1>
</header>
<section>
    <h1>Heading</h1>
    <p>Bacon ipsum dolor amet voluptate et shoulder, ipsum flank tongue exercitation commodo sed beef ribs drumstick in venison laborum. Laboris ut enim id drumstick, et aute esse. Consequat ad kielbasa anim pork loin turkey qui cupidatat drumstick doner labore. Nulla sirloin jerky do sed magna meatloaf. Ribeye ea ut elit leberkas laboris sausage corned beef drumstick cillum non.</p>
</section>
<section>
    <h1>Another heading</h1>
    <p>Nostrud landjaeger cillum beef cow tail cupidatat non mollit voluptate jowl. Enim sunt in, flank hamburger proident qui. Id aute excepteur chuck magna tempor ipsum pork chop t-bone. Frankfurter meatball pork loin beef et leberkas pork. Pig ball tip pancetta in.</p>
    <p>Ribeye in veniam ipsum flank. Elit incididunt t-bone proident meatball. Porchetta exercitation prosciutto sausage chuck ut eu brisket shank pastrami turkey sunt laboris tenderloin anim. Landjaeger do venison laboris kevin.</p>
</section>
<footer>
    <p>&copy; 2015 Lea Verou (j/k, feel free to use wherever)</p>
    <p>Consectetur et t-bone pork loin. Tri-tip cupim in, spare ribs velit exercitation in. Tempor cillum fugiat, nisi leberkas reprehenderit anim laboris proident cow. Eu fatback kevin sint, ad shoulder in venison picanha. Sausage drumstick capicola, culpa boudin pork belly minim aute ipsum biltong picanha venison nulla adipisicing.</p>
</footer>
/**
 * Fluid background, fixed content
 */
header, section, footer {
    padding: 1em calc(50% - 350px);
}
footer {
    background: #333;
    color: white;
}
header {
    background: orange;
    color: white;
}
section + section {
    background: #eee;
}
body {
    margin: 0;
    font: 100%/1.5 sans-serif;
}

<main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
</main>
/**
 * Vertical centering - absolute positioning method
 */
main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em 1.5em;
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}
h1 {
    margin: 0 0 .2em;
    font-size: 150%;
}
p {
    margin: 0;
}
body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}

<main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
</main>
  /**
 * Vertical centering - Viewport unit method
 */
main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}
h1 {
    margin: 0 0 .2em;
    font-size: 150%;
}
p {
    margin: 0;
}
body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}

<main>
    Center me, please!
</main>
/**
 * Vertical centering - Flexbox solution for text
 */
body {
    display: flex;
    align-items: center;
    min-height: 100%;
    margin: 0;
}
html { height: 100% }
main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18em;
    height: 10em;
    padding: 1em 1.5em;
    margin: 0 auto;
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}
h1 {
    margin: 0 0 .2em;
    font-size: 150%;
}
p {
    margin: 0;
}
body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}

<main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
</main>
/**
 * Vertical centering - Flexbox solution
 */
* { margin: 0 }
body {
    display: flex;
    min-height: 100vh;
}
main {
    padding: 1em 2em;
    margin: auto;
    box-sizing: border-box;
    background: #655;
    color: white;
    text-align: center;
}
h1 {
    margin-bottom: .2em;
    font-size: 150%;
}
body {
    background: #fb3;
    font: 100%/1.5 sans-serif;
}