一、什么是盒模型
每一个标签都是一个矩形,就像一个盒子,HTML页面的布局就可以理解为多个盒子组合嵌套排列而成的。
二、盒模型的组成
1.width
width为宽度,单位为px(像素)
2.height
height为高度,单位为(像素)
3.padding
padding为内边距,可以设置一到四个值,顺时针赋值,从上开始,可以增加盒模型的面积。
盒模型面积公式:S = (border-left+ padding-left+ width + padding-right + border-right) *
(border-top + padding-top + height + padding-bottom + border-bottom)
4.border
border为边框,他有三个属性,分别为线宽(border-width)、线型(border-style)、线色(border-color)。
线型分为实线(solid)、虚线(dashed)、点线(dotted)、双线(double)。边框同样会增大盒模型的面积。
变为圆角:border-radius:px;(""为圆角弧度),当_px换成50%时且标签长宽为0时,图形为圆。
当标签长宽为0,边框四边其中三边换成透明颜色是,所运行出来的图为三角形。(透明色:transparent)
5.margin
margin为外边距,外边距同内边距一样,可以设置1~4个值,顺时针赋值,从上开始。
注意:叠压现象,常态下,兄弟标签间的上下间距以大值为准。
塌陷问题产生的原因:常态下,父级的第一个子级标签是个块标签,并且使用了margin或者margin-top;解决方案:1、在父级使用border;2、不使用margin,在父级使用padding-top;3、父级使用overflow:hidden。
三、怪异盒模型
正常盒模型向外扩展,怪异盒模型向内压缩。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了盒模型的使用,虽然简单,但都很重要。