# 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\测试lesson\kejian\css\盒模型.assets\image-20201218160440679.png)



![image-20210104085742577](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104085742577.png)



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

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

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