CSS揭秘阅读笔记

半透明边框
1、默认状态下，背景会延伸到边框的区域下层
2、可以通过 background-clip 属性来调整上述默认行为所带来的不便；这个属性的初始值是 border-box，意味着背景会被元素的 border box（边框的外沿框）裁切掉。所以用background-clip：padding-box;裁切掉边内边距以外的背景可解决问题
多重边框
box-shadow
outline方案
背景定位
background-position 的扩展语法方案
background-origin 方案
calc() 方案
background-position: calc(100% - 20px) calc(100% - 10px);
边框内圆角
使用2个元素
一个元素设置(书上的猜测貌似已经实现：未来规范将会明确地建议描边跟着圆角走)
条纹背景
linear-gradient(#fb3, #58a);
background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);
复杂的背景图案
网格
波点
棋盘
伪随机背景
连续的图片边框
border-image
使用2个元素——覆盖方法
一个元素实现

自适应内部元素
width 和 height 属性定义新的关键字， min-content 。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）
精确控制表格列宽
table-layout
根据兄弟元素的数量来设置样式
对于只有一个列表项的特殊场景来说，解决方案显然就是 :only-child，这个伪类选择符就是为这种情况而设计的。
根据兄弟元素的数量范围来匹配元素
:nth-child() 选择符在这方面非常好用
满幅的背景，定宽的内容
一个CSS解决方案
垂直居中
对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto。基于绝对定位的解决方案
早期的垂直居中，它要求元素具有固定的宽度和高度 p186
基于视口单位的解决方案
基于 Flexbox 的解决方案
紧贴底部的页脚
固定高度的解决方案
更灵活的解决方案:Flexbox