【从零开始学前端】day6——CSS盒子模型

盒子模型是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则不支持负值。