盒模型 ​

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着。

块级元素、内联元素 ​

有两种“盒子”： 块级盒子 (block box) 和 内联盒子 (inline box)。又称块级元素、内联元素。

块级元素 ​

• 换行
• 在绝大数情况下意味着盒子会和父容器一样宽，width 和 height 属性可以发挥作用
• padding、margin、border设置会将其他元素推开

内联元素 ​

• 不换行
• width 和 height 属性将不起作用
• padding、margin、border设置只在水平方向将其他元素推开，垂直方向设置有效但不会推开其他元素

块级和内联布局是 web 上默认的行为，也被称为正常文档流

display: inline-block ​

display 有一个特殊的值，它在内联和块之间提供了一个中间状态：块级元素，但不换行。

什么是盒模型 ​

块级元素有完整的盒模型，内联元素盒模型只有部分内容生效。
一般浏览器默认使用标准盒模型，但IE默认使用的另一种盒模型，称为另类盒模型。

盒模型的组成 ​

• Content box 这个区域是用来显示内容。大小可以通过设置 width 和 height.
• Padding box 包围在内容区域外部的空白区域。大小通过 padding 相关属性设置。
• Border box 边框盒子包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

标准盒模型 ​

给盒设置 width 和 height，实际设置的是 Content box。
可以使用box-sizing: content-box切换为标准盒模型。IE8+支持切换。

另类盒模型 ​

设置 width 和 height，实际设置的是可见宽度，包括 Content box、 Padding box、 Border box。
可以使用box-sizing: border-box切换为另类盒模型。

外边距 ​

外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。

无论使用标准盒模型还是另类盒模型，外边距总是在计算可见部分后额外添加。

外边距折叠 ​

如果有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

边框 ​

有四个边框，每个边框都有样式、宽度和颜色

圆角 ​

border-radius

边框画三角形 ​

单边框通常是内侧短、外侧长的梯形。
在边框相邻两边宽度为0时，边框是矩形。例如border-top-width: 0
在边框内侧边长度为0时，边框是三角形。例如width: 0

通过以上四边组合，单边即可画出任意三角形。

内边距 ​

与外边距不同，值必须是 0 或正值。

背景 ​

• background-color
• background-repeat: repeat
• background-position
• background-size
• background-image
  • url()
  • linear-gradient()
  • 多个值用 , 隔开
• background-attachment
  • scroll，跟随页面滚动。默认值
  • fixed，始终保持在屏幕上相同的位置
  • local，跟随元素内容滚动
• background-clip 设置元素的背景延伸到盒模型的位置，默认值border-box
  • background-clip: text，背景被裁剪成文字的前景色。新特性需要-webkit-前缀生效

参考资料 ​

• MDN