在说今天的正题之前先说一下,css默认计算width值的方法,这是基础,了解了传统是怎么计算的,出现了什么问题,为何提出了box-sizing的说法,这些问题对于系统学习css是很有帮助的。
盒子模型
传统的计算方法是:width = 内容宽度+padding*2+border-width*2 ,举个栗子。。
p{
color: white;
background: darkolivegreen;
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid blue;
background-clip: content-box;
}
<p class="p1">
传统的计算width
</p>
解释一下:
background-clip: content-box;使得背景颜色只在content中显示,不会超出content范围。现在这个p元素的总宽度是242px 宽度。不信的话用你们的火眼金睛+Ctrl+Alt+A量一下。。
其实,这就是box-sizing 属性取默认值content-box时的计算方法。这就是box-sizing 属性取默认值content-box时的计算方法。这就是box-sizing 属性取默认值content-box时的计算方法。因为这个方法有时候对于计算太麻烦,就又衍生了另一个属性值,border-sizing
听好了,border-sizing时,width是多大,元素在页面上占据的地方就是多大,一个oorder把元素大小框住了,就像是孙悟空给唐增画的小圈圈,到border在内的宽度就是你设置的width值。还是举个栗子更形象。。
p{
color: white;
background: darkolivegreen;
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid blue;
background-clip: content-box;
box-sizing: border-box;
}
<p class="p1">
box-sizing:border-box
</p>
现在再测量一下,就是包括蓝色边框在内的宽度就是200px.
理解力不好的就想象着唐僧的小圈圈就好记忆了