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;
div中的div居中
<!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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。