所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。
- Margin(外边距) - 外边距是透明的,它是本元素和其他元素之间的距离。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 也叫做填充,内边距是透明的,他指的是内容与边框之间的距离。
- Content(内容) - 盒子的内容,显示文本和图像。
在HTML中,存在四种类型的盒子,其中弹性盒子使用最广,下面分别来介绍这四种盒子:
1.块级盒子
特点:独占一行,对宽度高度支持
div ul li h1~h6 都是此类盒子
css中设置使用display:block;
2.内联级盒子
特点:不独占一行,对宽度和高度不支持
span a 都是此类盒子
设置使用display:inline;
3.内联块级盒子
特点:不独占一行,对宽度高度支持
img input 都是此类盒子
设置使用 display:inline-block;
4.弹性盒子
特点:不论父级元素能不能放下子元素,子元素始终横向布局,放不下会压缩
设置使用display:flex;
/*
盒子模型分为四个区域
内容区
设置内容区域的宽高
width:200px;
height:100px;
box-sizing:content-box 默认宽高只针对内容区域设置
border-box 宽高针对整个盒子设置
填充区padding(也叫内边框)
从上开始,按照顺时针进行旋转,没有了设置为对称位置的值
padding:50px 40px 30px 20px ;
可以结合上下左右进行对某一个方向单独设置
padding-top: 50px;
padding-bottom: 40px;
padding-left: 30px;
padding-right: 20px;
边框区border
可以设置边框的样式颜色与宽度
可通过border进行复合设置,也可单独对某一属性进行设置
复合设置:
border: solid 10px blue;属性值不区分顺序 用空格隔开
单独设置:
border-style:边框样式
border-color:边框颜色
border-width:边框宽度
对于边框还可以进行上下左右单独设置
border-top:solid 10px blue;
border-bottom: dashed 10px red;
border-left: dotted 10px pink;
border-right: solid 10px green;
综上,可以对边框进行三个方面四个方向组合设置,共十二种情况
border-top-color:red;
border-bottom-style:solid;
.......
外边距margin
从上开始,按照顺时针进行旋转,没有了设置为对称位置的值
margin:50px 40px 30px 20px ;
可以结合上下左右进行对某一个方向单独设置
margin-top: 50px;
margin-bottom: 40px;
margin-left: 30px;
margin-right: 20px;
auto:设置水平方向居中,用于块级元素(必须设置块级元素的宽度)
*/
/* html中标签默认都会有一些边距 通过*设置内外边距为0*/
*{
padding: 0;
margin: 0;
}