CSS揭秘笔记——结构与布局
时间：2023-03-30 19:27:17
CSS
自适应内部元素我们希望width能够像height一样自动适应内容的宽度。如果有如下结构：
Loremipsumdolor...
Loremipsumdolorsitamet,consecteturadipisicingelit。figcaption>Loremipsumdolorsit...
我们希望figure元素与其包含的图像一样宽（图像大小不固定），并水平居中。以及我们能想到的解决方案，比如让figure元素浮动，或者让figure的父元素text-align:center，然后给所有的子元素设置text-align:left。这些方法都不是特别理想。css3中width和height增加了一些新的关键字，比如min-content，可以让容器的宽度等于里面最大的不可断元素的宽度。图{最大宽度：300px；/*后备方案*/max-width:min-content;margin:auto;}figure>img{max-width:inherit;}根据兄弟元素个数设置样式知识点：只有一个列表项的伪类选择器：:only-child相当于:first-child:last-child恰好有四个项目的列表中的第一项：:first-child:nth-last-child(4)ul>li{display:inline-block;填充：.5em1em；边界半径：.5em；背景：粉色；color:white;}li:first-child:nth-last-child(4){background:deeppink;}之后的所有兄弟元素：:first-child:nth-last-child(4)~lili:first-child:nth-last-child(4)~li{background:deeppink;}这样，只有四个列表项的情况可以表示为：li:first-child:nth-last-child(4),li:first-child:nth-last-child(4)~li{background:deeppink;}如果列表项不是四个，则不选中。根据兄弟元素的个数范围来匹配元素：nth-??child()中的参数不仅可以是具体的数字，还可以是an+b这样的表达式，其中n的取值范围是0到正无穷大。例如：n+4表示选择从第??4个开始的所有子元素。（注意：编写4+n是错误的）选择所有列表项目的选择总数为4或更多：li：li：nth-??last-child（n+4），li：first-child：nth-last-child(n+4)~li{background:deeppink;}参数为-n+4选择前4个元素li:nth-child(-n+4){background:deeppink;}只在thelist当有4个或更少的列表项时，选择所有列表项：li:first-child:nth-last-child(-n+4),li:first-child:nth-last-child(-n+4)~li{background:deeppink;}两种技巧混合使用，可以表示当有2到6个列表项时，全选列表项。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{background:deeppink;}全角背景，定宽内容实现背景占据整个视口，而内容定宽居中。例如：一般的解决方案是为每个块准备两层元素，分别为它们设置样式： footer{背景：#333；白颜色;border:1pxsolid#333;/*这一行是为了防止父元素和子元素的边距重叠（父元素的边距为0，子元素为1em，重叠是根据length，也就是1em，默认的background-clip是border-box，margin下面不会有背景色。)*/}.wrapper{最大宽度：900px；margin:1emauto;}CSS3增加了一个calc()函数，上面代码中的marginauto可以用calc(50%-450px)代替，这是一个长度值，所以可以作为padding的值父元素，代码可以改成：footer{background:#333;白颜色;/*border:1pxsolid#333;*//*没有边距重叠的问题，所以不需要这一行*/padding:1emcalc(50%-450px);}.wrapper{/*max-width:900px;*//*margin:1emauto;*/}所以最后我们不需要额外的元素:footer{background:#333;白颜色;填充：1em；/*后备方案*/padding:1emcalc(50%-450px);/*注意：calc中减号两边必须有空格*/}vertical只水平居中很简单：/*forinlineelements*/text-align:center;/*对于块级元素*/margin:auto;以下结构：
我居中了吗？
请居中！
基于绝对定位的解决方案这个解决方案的前提是元素必须有固定的宽度和高度：main{position:absolute;顶部：50%；左：50%；保证金顶部：-5em；左边距：-10em；宽度：20em；height:10em;}如果是一般的块级元素，父元素不是，还需要父元素的相对定位。借助calc()函数，两行main{position:absolute;顶部：计算（50%-5em）；左：计算（50%-10em）；宽度：20em；height:10em;}可以省去因为translate()函数是相对于自身的宽高计算的，所以可以解决固定宽高的问题：main{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}基于viewportunit的解决方案如果使用margin的百分比值和auto关键字设置垂直和水平居中，得到的效果可能不是我们想要的：主要{宽度：20em;边距：50%auto0;transform:translateY(-50%);}那是因为margin的百分比值是基于父元素的宽度的，即使是margin-top和margin-bottom。如果您只想将视口居中，则可以使用视口单位。1vw表示视口宽度的1%1vh表示视口高度的1%1vmin表示视口宽高较小的（1vw或1vh）1vmax表示视口宽高较大的（1vw或1vh)main{宽度：20em;保证金：50vh自动0；transform:translateY(-50%);}基于Flexbox的解决方案body{display:flex;}main{margin:auto;}当我们使用Flexbox时，margin:auto不仅在水平方向居中元素，也在垂直方向居中。也可以这样写：body{display:flex;证明内容：居中；align-items:center;}使用这个方法，你也可以垂直居中匿名容器，比如没有被标签包裹的文本节点：
Centerme,please!mian{display:flex;证明内容：居中；对齐项目：居中；宽度：20em；height:15em;}Justifytothebottomofthefooter当页面内容不够长时，页脚不会靠近底部，而是紧挨着内容下方。如下图：固定高度解决方案如果页脚和页眉的高度是固定的，首先我们计算页脚和页眉的高度，分别为7em和2.5em。mian{最小高度：calc(100vh-7em-2.5em);框大小：边框框；/*避免填充或边框弄乱高度的计算*/}，这没关系。或者用一个额外的元素包裹和元素：#wrapper{min-height:calc(100vh-7em);Flexbox解决方案将body设置为flex，将main设置为可拉伸。正文{显示：弹性；弹性流：列；min-height:100vh;}main{flex:1;}完成~
