所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
一、盒子模型分类
1、块级盒子(标签,元素)特点:独占一行,对宽度高度支持 div ul li h1~h6标签 display: block;
2、内联级盒子特点:不独占一行,对宽度高度不支持span a标签 display: inline;
3、内联块级盒子特点:不独占一行,对宽度高度支持img input标签 display: inline-block;
4、弹性盒子特点:不论父级元素能不能放下子元素,子元素始终横向布局 display:flex;
举例:
<h3>块级盒子</h3>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<h3>内联级盒子</h3>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<h3>块级内联级盒子</h3>
<img src="img/OIP-C.jpg" alt="">
<img src="img/OIP-C.jpg" alt="">
<img src="img/OIP-C.jpg" alt="">
div,
span,
img{
background: yellow;
width: 200px;
height: 100px;
}
弹性盒子:
div,
span,
img{
background: yellow;
width: 200px;
height: 100px;
}
body{
display: flex;
}
二、盒子模型
结构图:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
1、内容区
width: 200px; height: 100px;
box-sizing: content-box 针对内容区设置宽高(默认情况)
border-box 针对整个盒子设置宽高(包括边框)
2、填充区
从上开始,顺时针进行旋转设置,不够了找对称
padding: 50px; (上下左右都50px)
padding: 50px 20px; (上下50,,左右20)
padding: 50px 20px 10px; (上50 左右20 下10)
padding: 50px 20px 10px 100px;
也可以上下左右单独对某一个方向进行设置
padding-top: 50px;
padding-bottom: 10px;
padding-left: 100px;
padding-right: 30px;
3、边框区 (border 复合属性)
border-style:边框样式
border-color:边框的颜色
border-width:边框宽度
border: solid 10px blue;值不区分顺序,空格隔开
上下左右四个方向单独设置 :
border-top: solid 10px blue;
border-bottom: dashed 10px pink;
border-left: dotted 10px red;
border-right: double 10px green;
三个方面,四个方向,十二种情况
border-top-color: red;
border-top-width: 30px;....
边框样式 border-style:
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
4、外边距
从上开始,顺时针进行旋转,不够了找对称
margin: 50px;
margin: 50px 20px;
margin: 50px 20px 100px;
margin: 50px 20px 100px 0;
上下左右四个方向单独设置 :
margin-top: 50px;
margin-left: 100px;
margin-bottom:10px;
margin-right: 30px;
auto:水平方向居中(用于块级元素)
举例:
div{
/* 内容区 */
background: yellow;
width: 200px;
height: 100px;
/* 填充区 */
padding: 50px 20px 10px 100px;
/* 边框区 */
border-top:solid 10px blue;
border-bottom:dashed 10px pink;
border-left:dotted 10px red;
border-right:double 10px green;
/* 外边距 */
margin: 50px auto;
}
body{
display: flex;
}
设置box-sizing: border-box;后