1.自适应内部元素在css中，当一个元素没有被赋予高度值时，该元素将自适应其内部元素的高度。有时我们希望元素的宽度来达到这种效果。应用场景如下。当前布局如下，如果想改变最外层div的宽度，达到当前图片被拉伸的效果，那么就需要用到min-content的属性值。css代码如下：div{/*只需要将最顶层div的width值设置为min-content*/width:min-content;}最终效果：min-content会解析里面最大的不可断元素容器宽度（即固定宽度的最宽文字、图片或框元素）。张新旭有一篇文章详细解释了这个属性。地址如下：http://www.zhangxinxu.com/wor...2．精确控制表格的列宽在使用表格布局时，当表格内容不确定时，布局很难预料，因为表格的列宽是根据其内容计算的，即使显示的宽度是set，不会生效，宽度还是会根据它的内容生成。它会根据加载的内容不断重绘，直到加载完毕。通常生成的表格如下：为了让设置的宽度生效，让过多的文字省略号显示，解决方法是使用table-layout:fixed样式代码如下：table{table-layout:fixed;宽度：100%；/*必须指定宽度，否则不生效*/}最终效果如下：3.根据兄弟元素个数设置样式在某些应用场景中，我们可能需要根据兄弟元素个数来设置样式元素个数，比如列表越来越长的时候，我们可能需要调整间隔或者大小来减少长度，提升用户体验。例如，当列表中有4个项目时，选择所有列表。您可以使用scss预处理器编写mixin代码，如下所示：/*Definemixin*/@mixinn-items($n){&:first-child:nth-last-child(#{$n}),&:first-child:nth-last-child(#{$n})~&{@content;}}/*调用方法*/li{/*当列表恰好包含四个项目时命中所有列表项*//*定义样式*/@includen-items(4){width:40px;高度：100px；背景：红色；向左飘浮;边距：10px；}}效果如下：4.根据兄弟元素的个数范围来匹配元素。当4个及以上时，选择所有列表项代码如下：/*定义mixin*/@mixinn-items($n){/*当列表总数为4个及以上时，选择所有列表项*/&:first-child:nth-last-child(#{$n+4}),&:first-child:nth-last-child(#{$n+4})~&{@content;}}//重写成-n+4表示当列表中有4个或少于4个时，全选//同理，对于2到6，设置n+2~-n+6@mixinn-items($n){&:第一个孩子:第n个最后一个孩子(#{$n+2}):n第th-last-child(#{$-n+6}),&:first-child:nth-last-child(#{$n+2}):nth-last-child(#{$-n+6})~&{@content;}}5.全宽背景和定宽内容页面上有很多布局都是定宽内容和背景占据整个视口的宽度，比如下面的布局：有很多种实现方式它。一般我们实现的代码结构是这样的：宽度：900px；保证金：1em自动；}其中保证金：1em自动；就是让contentdiv居中，我们有更好的办法只用一层DOM结构来实现上面的layout就是用calc属性实现，代码如下：/*CSS样式*/footer{background:"#333";/*当浏览器不支持calc时回退看看*/padding:1em;padding:1emcalc(50%-450px);}原理：根据视口的宽度解析百分比，所以即使里面的内容没有设置宽度，也会为里面的内容留出450*的空间2实现设置max-width:900px的效果；前。6.垂直居中在CSS中水平居中比较简单。对于行级元素，对其父元素使用text-align:center；对于块级元素，使用margin:auto本身；对于垂直居中，则更难处理。目前的解决方案有：1.基于绝对定位的方法(1)当元素固定宽高时：div{width:200px;高度：100px；位置：绝对；顶部：50%；左：50%；保证金-top:-50px;margin-left:-100px;}计算代码可以简化为：div{width:200px;高度：100px；位置：绝对；顶部：计算（50%-50px）；left:calc(50%-100px);}(2)对于那些可变宽高的元素，实现方法如下：div{position:absolute;顶部：50%；左：50%；transfrom:translate(-50%,-50%);}上面的方案还有一个缺点就是必须是绝对定位的元素。2、基于视口单位的方法css3定义了一些视口相关的单位：vw与视口宽度相关。1vw实际上意味着视口宽度的1%，而不是100%。同样，1vh表示视口高度的1%。当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。当视口宽度大于其高度时，1vmax等于1vw，否则等于1vh。所以我们的垂直居中可以这样实现：div{width:200px;填充：2px4px；保证金：50vh自动0；transform:translateY(-50%);}**注意：这里没有使用50%，而是viewport单位的原因是margin的百分比是以父元素的宽度为解析基准。不管是margin-top还是margin-left**，这种方式都有局限性，只能用于视口居中的场景。3、基于flex的方法这个应该算是最好的方案了：实现方法：body{display:flex;}div{margin:auto;}使用flex布局时，使用margin:auto;水平和垂直居中。在不指定宽度的情况下，width:max-content；flexbox的另一个共同特点是它可以垂直居中匿名容器（即没有被标签包围的文本节点）：
hello
thisis...