盒模型

盒模型

1.div span 是我们常见的大小盒子
2.img input 是文本元素

一个大盒子的组成元素是有一个大盒子包裹着
div大盒子，border边框，padding内边距，width+height内容的宽高
#### 小属性写法

      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px;

复合属性写法

/* 上下左右四个值都为10px  上下左右*/
padding: 10px;
/* 上下为10px 左右为20px  上下  左右*/
padding:10px 20px;
/* 上为10px 左右为20px 下为30px   上 左右 下 */
padding: 10px 20px 30px;
/* 上右下左 */
padding: 10px 20px 30px 40px;

4.边框 border

盒子占有的最外层的区域。

三要素：

1. 边框的宽
2. 边框的线的类型
3. 边框的颜色

写法

单一属性的写法

border-width: 1px;
border-style: solid;
border-color: brown;

复合属性写法

/* 统一设置每一个边框的样式。 */ 
**border: 1px solid brown;**    
/* 单独设置每一个边框的样式 */
border-top: 1px solid #ff6700;
border-right: 3px double red;
border-bottom: 5px dashed blue;
border-left: 7px groove green;

/* 单独设置一条边框的单个属性样式 */
border-left-color: yellowgreen;
border-left-width: 1px;
border-left-style: dotted;
```### 使用边框制作三角

```css
1.将div的宽高设置为0,再设置边框。
2.将底部的边框取消。
3.将左右两边的边框设置为透明色。

    div{
      width: 0px;
      height: 0px;
      border: 50px solid;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color:brown;
      border-bottom:none;
    }

5.外边距

margin：盒子与盒子之间的距离。

margin有四个方向

描述四个方向的方法有两种：

小属性写法

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

复合属性写法

/* 上下左右四个值都为10px  上下左右*/
margin: 10px;
/* 上下为10px 左右为20px  上下  左右*/
margin:10px 20px;
/* 上为10px 左右为20px 下为30px   上 左右 下 */
margin: 10px 20px 30px;
/* 上右下左 */
margin: 10px 20px 30px 40px;

盒子水平居中

/**盒子必须有宽度。*/
margin：0 auto；

因为一些标签有默认的margin padding，所以一般需要初始化一下页面的margin和padding。

*{
	margin:0;
	padding:0;
}

外边距重合

垂直方向上相邻的两个元素，如果都有外边距，则相交的地方会出现外边距重合现象。

外边距重合的三种情况：

1. 相交的两个margin值都为正数，取最大值。
2. 相交的两个margin值都为负数，取绝对值最大值。
3. 相交的两个margin值为一正一负，取两者之和。

解决外边距重合的办法

1. BFC规范（先放置一下）
2. 避免出现（两个上下相邻的同级盒子之间，只设置一个盒子的margin即可，要么设置上盒子的底部margin，要么设置下盒子的顶部margin）

父子盒子的外边距塌陷

当父元素没有填充内容，且没有设置顶部border时，子元素的margin-top不会起作用，但会让父元素和子元素一起掉下来。

【注意】只有margin-top有这个现象，另外三个方向没有。

解决办法：

1. BFC规范
2. 给父盒子添加顶部边框（不推荐）
3. 将margin换成padding。（将子盒子的顶部margin改为父盒子的顶部padding，如果不想改变父盒子占有的高，则需要将父盒子的高度进行修改。）

如果是同级盒子之间，想要有距离，则使用margin。
如果是父子盒子之间，想要有距离，则使用padding。