HTML+CSS学习记录05--CSS盒子模型

5、盒子模型
在CSS⾥⾯，所有的HTML元素都可以看成是⼀个盒⼦

- 盒⼦的内边距(padding)

padding-left:10px //左边距10px
padding-top:10px //上边距10px
padding-right:10px //右边距10px
padding-bottom:10px //下边距10px
以上四条一起可以简化为：padding:10px 

也可以用百分比表示，如： 
padding-bottom:10% //用百分比表示，相对于⽗级元素的width

padding:10px 10px 10px 10% //上，右，下，左（顺时针方向）百分比针对父级
padding:5px 10px //上下（第一个数）边距5px、左右（第二个数）边距10px
padding:5px 10px 20px //上（第一个数）边距 左右（第二个数）边距 下（第三个数）边距
padding:10px //上下左右边距10px

- 盒⼦的外边距(margin)
margin-left:10px //左边距10px


跟padding差不多：

margin-top:10px //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于⽗级元素的width
margin:10px 10px 10px 10% //等同于上⾯四⾏
margin:5px 10px //上下边距5px、左右边距10px
margin:10px //上下左右边距10px

- 盒⼦的边框(border)

border-left:3px（宽度） solid（样式） #000（颜色） // 左边距10px 样式可以选：dotted（点）solid（实线） dashed（虚线）
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000 //下边距10%，相对于⽗级元素的width
border:3px solid #000 //等同于上⾯四⾏

- 盒⼦怪异模型
1）W3C标准的盒⼦模型（标准盒模型 )
boxWidth=contentWidth

2）IE标准的盒⼦模型（怪异盒模型）
box-sizing:border-box //声明
boxWidth=contentWidth+border+padding

固定盒子的宽、高，不因为border、padding等改变而改变


因为若不设置标准模型，之前设置的width、height仅仅表示内容（笔记本电脑）的宽度和高度，整个盒子的大小会根据padding、border的值而改变。

- 外边距折叠

• 上下两个兄弟盒⼦的margin都为正取⼤，都为负取⼩，⼀正⼀负相加
  
  
  都是正的，取得大的那个margin
  都为正取⼤，都为负取⼩，⼀正⼀负相加

• ⽗⼦元素盒⼦的margin（假设没有内边距或边框把外边距分隔开），也会合并；
  
  父级没有设置边框
  
  
  解决方法：
  只有普通⽂档流中块框的垂直外边距才会发⽣外边距合并。⾏内框、浮动框或绝对定位之间的外边距不 会合并
  
  
  
  可以解决外边距合并的情况
  结果都为：