两种盒模型

分别是

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

公式

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

哪个好用

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

4

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

5

margin 合并

哪些情况会合并

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

如何阻止合并

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

CSS 不成交

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

4

4

基本单位

长度单位

  • px 像素
  • 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