饥人谷前端 | CSS 盒模型

两种盒模型

分别是

• content-box 内容盒 - 内容就是盒子的边界
• border-box 边框盒 - 边框才是盒子的边界

公式

• content-box width = 内容宽度
• border-box width = 内容宽度 + padding + border

哪个好用

• border-box 好用
• 同时指定 padding、width、border 就知道为什么了

详情见代码：两种盒模型(jirengu.com)

---

margin 合并

哪些情况会合并

• 父子 margin 合并
• 兄弟 margin 合并
• 只有上下会重叠 左右从来不重叠。
• 左右如果是子元素也不会合并。

如何阻止合并

• 父子合并用 padding / border 挡住（只要有东西隔住就行了）
• （合并的前提是什么都没有，如果保持合并的情况下还加一个东西 做不到 所以倒推出来的这个）
• 父子合并用 overflow: hidden 挡住
• （不知道为什么 所见即所得）
• （还有很多种取消合并的方式，现在先不说，有个印象即可）
• 父子合并用 display: flex ，不知道为什么
• 兄弟合并是符合预期的
• 兄弟合并可以用 inline-block 消除
• 总之要一条一条死记
• 而且 CSS 的属性逐年增多，每年都可能有新的、

CSS 不成交

容易出错的不写，最后留下来的就是不容易出错的

基本单位

长度单位

• px 像素
• em 相对于自身 font-size 的倍数
  • em 是 font-size 乘于的倍数
• 百分数
• 整数
• rem : 等你把 em 滚瓜烂熟了再问 rem
• vw 和 vh
• 其他长度单位都用得很少，不用了解

颜色

• 十六进制 #FF6600 或者 #F60
  • 相同的可以缩写一下
  • 最后也支持加一层 α 通道 ，兼容性不确定（
• RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
  • 全透明：transparent
• hsl 颜色 hsl(360, 100%, 100%)
  • 色相（赤橙黄绿青蓝紫）
  • 饱和度（鲜艳程度）
  • 亮度
  • 最后也支持加一层 α 通道 ，兼容性不确定（
• 浏览器会自动填充背景色

简单的单位练习：http://js.jirengu.com/ZAPUG/edit