[CSS]《CSS揭秘》第七章——结构与布局

自适应内部元素

figure{
    max-width: 300px;
    max-width: min-content;//这个关键字将解析为这个容器内部最大的不可断行元素的宽度（ 即最宽的单词、 图片或具有固定宽度的盒元素。
    margin: auto;
}
figure > img{
    max-width: inherit;
}

<p>Some text [...]</p>
<figure>
    <img src="./2.jpg" alt="">
    <figcaption>
        The great Sir Adam Catlace was named after Countess Ada Lovelace,the first programmer.
    </figcaption>
</figure>
<p>More Text[...]</p>

精确控制表格列宽

table{
    table-layout:fixed;
    width:100%;

*:

请注意， 为了确保这个技巧奏效， 需要为这 些表格元素指定一个宽度（ 哪怕是 100%）。 同样， 为了让 text-overflow: ellipsis 发挥作用，我们还需要为那一列指定宽度。

**:

如果不指定任何宽度，则各列的宽度将是平均分配的；后续的表格行并不会影响列宽；给单元格指定很大的宽度也会直接生效，并不会自动缩小；overflow 和 text-overflow属性都是可以正常生效的；如果overflow 的值是 visible，则单元格的内容有可能会溢出.

根据兄弟元素数量来设置样式

只有一个元素时

li:only-child{
    /* ...*/
}

或者

li:first-child:nth-last-child(1){ //括号中的1为参数
    /* */
 }

多于一个元素时

li:first-child:nth-last-child(4) //选中的是恰好有四个元素的第一个

li:first-child:nth-last-child(4) ~ li //可以用兄弟选择符选中恰好有四个元素时的全部四个

根据兄弟元素的数量范围时来匹配元素

li:nth-child(n+4) //选中从第4个开始的所有元素

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4)~li {
    /* ...*/
}//选中元素总数是4或更多时的所有元素

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4)~li{
    /* ..*/
}//仅元素少于等于4时选中所有元素

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{
    /* ...*/
}//元素数量处于2-6时选中所有元素

满幅的背景，定宽的内容

.hello {
    max-width: 900px;
    padding: 1em calc(50% - 450px);//取代内层元素的margin: auto;
    background: #333;
}

<div class="hello">
    <div class="wrapper">
        66
    </div>
</div>

垂直居中

<main>
    <h1>Am I centered yet?</h1>
    <p>Center me, please!</p>
</main>

基于绝对定位的解决方案（要求元素具有固定的宽度和高度）

main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em; /* 6/2 = 3 */
    margin-left: -9em; /* 18/2 = 9 */
    width: 18em;
    height: 6em;
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);//transform是根据自身尺寸为基准进行换算和移动的
}

基于视口单位的解决方案

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

基于Flexbox的解决方案

详情看：关于Flexbox

紧贴底部的页脚

可参考：关于Flexbox