css小白学习

什么是盒子模型

每一个元素都是一个盒子；每一个盒子是由content+padding+border+margin组成；content是盒子的内容区域,padding是设置盒子内容区域到边框之间的距离；border是设置的边框 ，margin是设置盒子与盒子之间的距离

盒子模型分类

1.从类型上分为

1. 1.块盒：自己独占一行;宽度默认为元素的宽度;css样式全部生效 div/ul/ol/li
2. 2.行盒:共占一行,宽度与内容决定,css样式部分生效,垂直方向的margin和padding是无效的;高度可以通过font-size,line-height,font-family调整 a/span/em/i
3. 3.行内盒:共占一行,css样式全部生效,宽度默认有内容决定;行内块与行内块会有空白字符(可以通过fonts-zie为0去掉)/img/form/input/video/audio

2.从替换元素上分为

可替换元素:img/input

不可替换元素:di/span/a/em

基线

1.块盒没有基线2.行盒基线在内容3.行内块基线有内容在最后一行 没有内容在下外边距4.img基线在先外边距[会导致div套img有空白间隙]