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

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

- 盒⼦的内边距(padding)

padding-left:10px //左边距10px
padding-top:10px //上边距10px
padding-right:10px //右边距10px
padding-bottom:10px //下边距10px
以上四条一起可以简化为&＃xff1a;padding:10px 也可以用百分比表示&＃xff0c;如&＃xff1a;
padding-bottom:10% //用百分比表示&＃xff0c;相对于⽗级元素的width


padding:10px 10px 10px 10% //上&＃xff0c;右&＃xff0c;下&＃xff0c;左&＃xff08;顺时针方向&＃xff09;百分比针对父级
padding:5px 10px //上下&＃xff08;第一个数&＃xff09;边距5px、左右&＃xff08;第二个数&＃xff09;边距10px
padding:5px 10px 20px //上&＃xff08;第一个数&＃xff09;边距 左右&＃xff08;第二个数&＃xff09;边距 下&＃xff08;第三个数&＃xff09;边距
padding:10px //上下左右边距10px


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


跟padding差不多&＃xff1a;

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


- 盒⼦的边框(border)

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


- 盒⼦怪异模型
1&＃xff09;W3C标准的盒⼦模型&＃xff08;标准盒模型 )
boxWidth&＃61;contentWidth

2&＃xff09;IE标准的盒⼦模型&＃xff08;怪异盒模型&＃xff09;
box-sizing:border-box //声明
boxWidth&＃61;contentWidth&＃43;border&＃43;padding

固定盒子的宽、高&＃xff0c;不因为border、padding等改变而改变


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

- 外边距折叠

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

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