HTML+CSS要点2：盒子模型

盒子模型

content区域（由width和height组成）可以显示文字
子元素子元素div的可视宽高（border+padding+content） 会撑满父级content区域
可视宽高计算公式：

• 标准盒模型box-sizing: content-box（默认情况：标准盒模型）
  标准盒模型的可视宽高 = border + padding + width/height（content）
• 怪异盒子模型box-sizing: border-box
  可视宽高 = width（content + border + padding）
• 不设置宽的标准盒子模型类似于怪异盒子模型

margin

允许使用负值

margin的妙用

◥ margin-left: auto;

只有左边设置auto，可以让一个元素靠右
◥ margin-right: auto;

只有右边设置auto，可以让一个元素靠左（其实也就没有设置的必要，因为默认情况就是

问题

• 传递问题：给子元素添加margin-top，margin-bottom会传递给父元素
  
  解决方法：

  1. 给父级的红色盒子加padding，使红、绿两个盒子顶部保持间隙
  2. 给父级加边框（有种弄个栅栏不让子级margin跑出去的感觉）
  3. 用一个并列同级元素，代替margin距离。并列同级元素的height = margin-top / margin-bottom
  4. 给父级加上overflow: hidden

• margin叠加问题
  
  解决方法：
  把我们想要的margin加起来加在一个元素身上

盒子模型阴影

• box-shadow 盒模型阴影
  box-shadow:inset x y 模糊半径 扩展 颜色;
  • inset 内阴影
  • x 距离左侧
  • y 距离顶部
  • 模糊半径
  • 扩展：扩展到一个位置之后，在进行模糊
  • 颜色：盒模型阴影的颜色