在面试当中,面试官会问到:什么是盒子模型。
每当这个时候我的脑子都会浮现一个大大的问号❓ 然后我就乱答一通。现对盒子模型做一些总结。
1.盒子模型是什么?
当一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的CSS基础框盒模型,将所有的元素表示为一个个矩形的盒子。
- 一个盒子由四部分组成:content、padding、border、margin。
content 就是实际内容,显示文本和图像。
border 是边框,围绕元素内容的内边距的一条或者是多条线。
padding 是内边距,清除内容周围的区域,内边距是透明的,取值不能为负数,受盒子的background属性影响。
margin 是外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域。
2.盒子模型分为 标准盒模型 和 IE怪异盒模型
①标准盒模型: box-sizing:content-box(默认值)
盒子总宽度=width+padding+border+margin
盒子总高度=height+padding+border+margin
<style>
.box {
width: 200px;
height: 200px;
padding:10px;
}
</style>
<div class="box">
盒子
</div>
该盒子占据的宽度为220px。
②IE怪异盒模型: box-sizing:border-box
盒子总宽度=width+margin
盒子总高度=height+margin
<style>
.box {
width: 200px;
height: 200px;
padding:10px;
box-sizing: border-box;
}
</style>
<div class="box">
盒子
</div>
该盒子占据的宽度为200px
③ box-sizing:inherit 指定box-sizing的值,从父元素继承。