# css 基础（二）

## 块级元素和内联元素

- 块级元素

  - 特点：

    - 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
    - 每个盒子都会换行
    - width和height 都可以发挥作用
    - padding , margin, border 会将其他元素从当前盒子周围推开

     

- 内联元素

  - 特点：
    - 盒子不会换行
    - width和height 不能发挥作用
    - 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
    - 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。

> 块级元素display默认属性值为 block   
>
> 内联元素 dipslay的属性默认值为inline
>
> 块级元素和内联元素可以通过display="inline"/"block"  实现互相转换



## 盒模型 （box model）

css 盒模型包括如下要素

- 元素内容 （content）
- 内边距 （border）
- 边框（border）
- 外边距（margin）

![image-20201218160440679](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20201218160440679.png)



![image-20210104085742577](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210104085742577.png)



> 上图中 最内层的蓝色色块是 元素内容（content）
>
> 蓝色外侧的 绿色的是内边距（padding）
>
> padding外侧的橙黄色的部分是边框（border）
>
> border 外侧 也就是最外侧的部分是外边框（margin）

盒模型计算元素的总宽度和总高度：

> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
>
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度





## css外边距合并（叠加）

 定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并

而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并



合并的结果计算：

　　两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
　　两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
　　两个外边距一正一负时，折叠结果是两者的相加的和。



合并的原因：

　　而根据w3c规范，两个margin是邻接的必须满足以下条件
　　4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
　　4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
　　4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
　　　　a:元素的margin-top与其第一个常规文档流的子元素的margin-top
　　　　b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
　　　　c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
　　　　d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom



出现的情况：

(一）

![image-20210112113853593](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112113853593.png)



```
<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
 
#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-bottom:20px;
}
 
#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}
 
</style>
</head>
 
<body>
 
<div id="outer">
  <div id="inner">
  </div>
</div>
 
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
div 的上外边距合并（叠加）。</p>
</body>
</html>
```



（二）

多个子元素外边距合并：

div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定   

如此例中，div1的margin 值为30

![image-20210112114420660](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112114420660.png)





```
<html>
<head>
    <meta charset="UTF-8">
    <title>
        盒子模型
    </title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        text-align:center;
    }
    div{
        width:200px;
        height:200px;
        margin:0 auto;
    }
    #div1{
        margin-top:10px;
        background:red;
    }
    #div11{
        margin-top:20px;
        width:0;
        height:0;
        background:yellow;
    }
    #div12{
        margin-top:30px;
        width:50px;
        height:50px;
        background:blue;
    }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div11"></div>
        <div id="div12"></div>
    </div>
</body>
</html>
```



解决措施：

给外边距加上如下属性，可以解决外边距合并的问题

​      border-top: 1px solid white;  给父元素加上边框

​      overflow: hidden;	设置超出隐藏

 	padding-top:50px;		给父盒子加padding-top 可以实现同样的效果



margin 复合属性

上右下左

例如：

            margin 一个值得时候定义的是上下左右四个方向的边距
           两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距
            三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距
           四个值得时候是上右下左的边距






padding复合属性

上右下左

例如：

            padding一个值得时候定义的是上下左右四个方向的边距
           两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距
            三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距
           四个值得时候是上右下左的边距





练习1：

五环之歌 效果如下：
![image-20210118112058180](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112058180.png)

作业2：

分类菜单 效果如下

![image-20210118112453705](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112453705.png)

作业三：

效果如下：

![img](E:\web\lessons\课件\csspress\2.盒模型.assets\1072590-20161225165033198-1543996399.png)





注：

左下角录制工具的水印不用做

图片可以自定义