什么是盒子模型
每一个元素都是一个盒子;每一个盒子是由content+padding+border+margin组成;content是盒子的内容区域,padding是设置盒子内容区域到边框之间的距离;border是设置的边框 ,margin是设置盒子与盒子之间的距离
盒子模型分类
1.从类型上分为
- 1.块盒:自己独占一行;宽度默认为元素的宽度;css样式全部生效 div/ul/ol/li
- 2.行盒:共占一行,宽度与内容决定,css样式部分生效,垂直方向的margin和padding是无效的;高度可以通过font-size,line-height,font-family调整 a/span/em/i
- 3.行内盒:共占一行,css样式全部生效,宽度默认有内容决定;行内块与行内块会有空白字符(可以通过fonts-zie为0去掉)/img/form/input/video/audio
2.从替换元素上分为
可替换元素:img/input
不可替换元素:di/span/a/em
基线
1.块盒没有基线2.行盒基线在内容3.行内块基线有内容在最后一行 没有内容在下外边距4.img基线在先外边距[会导致div套img有空白间隙]