盒子模型是CSS的基本布局单位,所有的HTML都可以看作一个盒子。
CSS模型的本质是一个盒子,封装HTML元素,包括:边距(margin)、边框(border)、填充(padding)、内容(content)。
一、边距margin
margin处于盒子模型的最外层,定义元素周围的空间
div{
/*四个方向边距均为10px*/
margin:10px;
/*上下边距为10px,左右边距为20px*/
margin:10px 20px;
/*四个方向边距依次为10px 20px 30px 40px*/
margin:10px 20px 30px 40px;
}
也可以通过以下方式设置特定的某个方向的边距
div{
margin-top:50px;
margin-bottom:10%;
margin-left:auto;
}
二、边框border
border处于盒子模型的第二层,定义元素的边框样式,常用属性有:
1.border-style(边框风格)
div{
border-style:none;/*无边框*/
border-style:dotted;/*点边框*/
border-style:dashed;/*虚线边框*/
border-style:solid;/*实线边框*/
border-style:double;/*双线边框*/
}
2.border-width(边框宽度)
div{
/*可以这样写*/
border-width:2px;
/*也可以这样写*/
border-width:thick;/*宽边框*/
border-width:medium;/*适中*/
border-width:thin;/*窄边框*/
}
3.border-color(边框颜色)
div{
/*和以往一样,颜色有三种表示方法*/
border-color:red;
border-color:rgb(255,0.0);
border-color:#000000;
}
4.单独定义某个方向的边框属性
div{
border-left-style:dotted;/*左边框风格*/
border-top-color:blue;/*上边框颜色*/
}
5.符合写法
div{
/*我们可以通过一行代码定义以上三种属性*/
border:1px solid red;/*边框为1px宽的实线红色边框*/
}
三、填充padding
margin处于盒子模型的第三层,定义元素内容和边框之间的空间。
和margin类似,有以下几种写法:
div{
/*四个方向填充均为10px*/
padding:10px;
/*上下填充为10px,左右填充为20px*/
padding:10px 20px;
/*四个方向填充依次为10px 20px 30px 40px*/
padding:10px 20px 30px 40px;
}
也可以这样定义特定方向的填充:
div{
padding-top:50px;
padding-bottom:10%;
padding-left:auto;
}
【注意】padding和margin不同的是,margin可以为负值(表示元素重叠),而padding则不支持负值。