CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
box-sizing
盒模型解析方式
引子:通常情况下,被更多人认知的盒模型就是简单盒模型,简单盒模型在早期IE( IE 5 和 6 )时期有一种怪异模式下的解析方式,也就是现在的border-box,后来W3C制定的标准以后规定在标准解析模式下使用标准盒模型(content-box)。
例子:设定两个参数相同的不同盒模型!
html与css设定
.box1{
width: 200px;
height: 200px;
margin: 100px;
padding: 50px;
border: 10px solid red;
box-sizing: content-box;
background-color: pink;
}
.box2{
width: 200px;
height: 200px;
margin: 100px;
padding: 50px;
border: 10px solid red;
box-sizing: border-box;
background-color: green;
}
1. content-box
标准盒模型
● width = 内容的宽度
● height = 内容的高度
2. border-box
怪异盒模型
● width = border + padding + 内容的宽度
●height = border + padding + 内容的高度