任何一个元素都是一个盒子
一、盒子的组成部分（盒子三大部分）
1.盒子壁 border
2.内边距 padding
3.盒子内容 width + height
二、盒子模型
margin + border + padding + (content = width + height)
margin 外边距
注意：body自带8px margin
HTML代码
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
CSS代码
*{ //初始化标签
margin:0px;
padding:0px;
}
.wrapper{
border:10px solid green;
width:100px;
height:100px;
background-color:red;
padding:100px 150px 200px 250px; //上右下左，顺时针顺序
padding:100px 150px 200px; //三个值：上，左右，下
padding:100px 150px; //两个值：上下、左右
padding:100px; //上下左右
padding:100px 0 0 0; //单独设置
padding-top:100px; //
padding-left:100px;
border-width:100px 100px 100px 100px;
}
.content{
width:100px;
height:100px;
background-color:black;
}
三、盒子模型用处
posted on
