介绍:
由盒子将页面中的元素(文本、图像、超级链接、div块等)包含在一个矩形区域内,这个矩形区域则称为“盒模型”。
盒模型由内到外依次分为内容(content)、填充(padding)、边框(border)和边界(margin)4部分。
盒子的实际大小为各部分之和,下图所示的盒子宽度为:左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图
内容:
作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小。
边框:
属性名:border (这是一个复合属性)
属性值:数字+px 线条的种类 颜色(不分先后顺序)
内外边距:
属性名:padding
取值:数字+px
盒子的大小计算:(给盒子设置border和padding时,盒子会被撑大)
盒子计算方式盒子的大小 = 内容区域的大小+2*border的大小+2*padding的大小
如何使其不被撑大?
- 手动减去border和padding的大小(很麻烦,需要大量的计算)
- 使用内减模式(浏览器会自动帮我们计算多余的大小,在内容区域减去)
内减模式:给盒子设置box-sizing,border-box(设置盒子大小,边框大小)