HTML中盒子模型
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML中盒⼦模型
⼀、⾸先概念：盒⼦模型的宽⾼
1.内容的宽度和⾼度:width height
2.元素的宽⾼:
宽：左边边框+左边内边距+width+右边内边距+右边边框
⾼：上边边框+上边内边距+height+下边内边距+下边边框
3.元素空间的宽⾼：
宽：左边外边距+左边边框+左边内边距+width+右边内边距+右边边框+右边外边距
⾼：上边外边距+上边边框+上边内边距+height+下边内边距+下边边框+下边外边距
4.box-sizing：border-box；保证加border和padding后元素宽⾼不变
5.清空默认边距
*{margin:0;padding:0;}
⼆、使⼩盒⼦在⼤盒⼦中居中的⽅法（嵌套关系）
1.可以设置⼤盒⼦的内边距，使得⼩盒⼦被挤到中间
2，设置⼩盒⼦的内边距，使得⼩盒⼦在中间（注意，此⽅法需要设置⼤盒⼦的边框，否则⽆法居中）3.设置盒⼦居中⽅法margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
/*div{ display:inline-block;}*/
.box1{
/* margin-left: 568px;*/
margin: 0 auto;
box-sizing: border-box;
width: 200px;
height: 200px;
background: aquamarine;
padding: 50px;
border:5px solid blanchedalmond;
}
.box2{
box-sizing: border-box;
width: 100px;
height: 100px;
background: bisque;
color: red;
line-height: 100px;
text-align: center;
border: 2px solid black;
}
.box3{
margin: 0 auto;
box-sizing: border-box;
width: 200px;
height: 200px;
background:brown;
border-top:5px solid black;
}
.box4{
width: 100px;
height: 100px;
background: cadetblue;
color: red;
line-height: 100px;
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div class="box1"><div class="box2">⽅法1</div></div> <div class="box3"><div class="box4">⽅法2</div></div> </body>
</html>。