盒子模型
原理
网页:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
特点
想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;让我们俯视这个盒子,它有上下左右四条边,所以每个属性除了内容(content),都包括四个部分:上下左右;这四部分可同时设置,也可分别设置;内边距可以理解为盒子里装的东西和边框的距离,而边框有厚薄和颜色之分,内容就是盒子中间装的东西,外边距就是边框外面自动留出的一段空白。
结构
内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,每个HTML标记都可看作一个盒子;
图片
HTML的每一个元素都适用于盒子模型。
盒子四大部分
1.外边距 margin;
2.盒子壁 border;
3.内边距 padding;
4.盒子内容 width+height;
width和height均指的是内容的宽度和高度,而不是整个的宽度
例如:
<style>
.div1{
width:100px;
height:120px;
background-color:red;
border:10px solid black;
padding:30px;
margin:20px;
}
</style>
<body>
<div class="div1">
AAABBBCCC
</div>
</body>
结果:
其中padding+width+height为内容可展示区域,例如设置底色后,padding是可见的。而margin则是内容不展示区域,设置了底色之后,内容为不可见。而对于嵌套的元素,也只是在content内,不涉及padding和margin。
盒子模型的计算实例
先了解一些知识点:
padding:4,3,2,1个值分别代表含义:
padding:100 100 100 100 是一个复合值,顺序为上、右、下、左;(为顺时针方向)
padding:100 100 100 为 上、[左、右]、下
padding:100 100 为 [上、下]、[左、右]
padding:100 为 [上、下、左、右]
margin:4,3,2,1个值分别代表含义:
margin为4个时,margin:上 右 下 左;(为顺时针方向)
margin为3个时,margin:上 [左、右] 下;
margin为2个时,margin:[上、下] [左右];
margin为1个时,margin:[上、右、下、左];
日常比较常见,需要记住:
盒子模型计算:
代码:
<style>
.example1{
width: 100px;
height: 100px;
background-color: red;
border:10px solid black;
padding:10px 20px 30px;
margin:10px 20px;
}
.example2{
width:100px;
height:100px;
padding:0 100px;
margin:10px 20px 30px 40px;
border:1px solid orange;
background-color:orange;
padding:0;
}
</style>
<!--margin不能纳入可视区范围,不计入计算-->
<div class="example1"></div>
<div class="example2"></div>
//realheight:102px
//realWidth:102px
</body>
可知道:对于example1而言,其可视区的高度:100(内容)+10(border-top)+10(border-bottom)+10(padding-top)+30(padding-bottom) = 160px; 宽度: 100+10+10+20+20=160px
对于:example2,其可视区的高度:100(内容)+1
×
\times
× 2(border)+ 30
×
\times
× 2= 162px;宽度: 100+20
×
\times
× 2+1
×
\times
× 2=142px;
如果在一个选择器中有两个相同的属性,那么后面的值会覆盖前面的值,如果两个选择的权值相等,则后面的选择器会覆盖前面的选择器中相同的属性的值。
<style>
.example{
width: 100px;
height: 100px;
background-color: red;
border:10px solid black;
padding:10px 20px 30px;
margin:10px 20px;
}
.example{
width:100px;
height:200px;
border:20px solid black;
background-color:orange;
}
</style>
<body>
<div class="example"></div>
</body>
结果:
元素居中
div在body中居中
<style>
*{
margin:0px;
padding:0px;
}
div{
position:absolute;
width:100px;
height:100px;
background-color:#000000;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-50px;
}
</style>
<body>
<div></div>
</body>
结果:
div嵌套居中
<style>
.outDiv{
width: 100px;
height: 100px;
background-color:red;
padding:100px;
}
.inDiv{
width: 100px;
height: 100px;
background-color:black;
}
</style>
<body>
<!--notice嵌套的div只占据内容的大小,不涉及其他-->
<div class="outDiv">
<div class="inDiv"></div>
</div>
</body>