任何一个元素都是一个盒子
一、盒子的组成部分(盒子三大部分)
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;
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-100px 100px 100px 100px;
}
.content{
100px;
height:100px;
background-color:black;
}
三、盒子模型用处