CSS 盒子模型
盒子模型涉及到元素的内容、padding(内边距)、margin(外边距)、border、outline。
实例解析
div{
width: 100px;height: 100px;
background-color: #5F9EA0;
padding: 30px;
border: 40px solid #ddd;
margin: 50px;
outline: 10px solid #D2691E;
}
- width: 100px;height: 100px; 是设置元素的content
- 元素实际的宽度 = content 的 width + padding,也就是 160px(100px + 30px * 2), 所以padding的背景色为元素的背景色
- border 介于 padding 和 margin 之间,不计算在元素实际的宽度内
- 从图1中可以看出,outline 不占用实质空间。图2中看出,outline 位于 border 外围。