---

前言

以下是我根据自己薄弱的地方整理的对应知识点

---

一、块级元素、行内元素和行内块元素的区别

1. 块级元素-display:block

1.1.1 常见的块级元素

div、p、ul、ol、li、h1~h6、table、header、footer、aside、form

1.1.2 块级元素的特点

1.块级元素独占一行，默认会重启一行，自上而下排列

2.可以设置宽高

3.margin和padding可以设置上下左右四个方向

2. 行内元素-display-inline

2.1.1 常见的行内元素

a、span、i、strong、label、b、br

2.1.2 行内元素的特点

注意：行内元素脱离文档流后，会变成块元素

1.行内元素默认排列在一行，不会自动换行

2.无法设置宽高

3.margin只对左右方向设置有效，padding上下左右都行会撑大元素

3. 行内块元素-display:inline-block

3.1.1 常见的行内块元素

input、img、textarea、button

3.1.2 行内块元素的特点

1.行内元素默认排列在一行，不会自动换行

2.可以设置宽高

3.margin和padding可以设置上下左右四个方向

 二、伪元素的应用

<div class="practice">22</div>

.practice {width: 100px;height: 50px;&::before {content: '';display: inline-block;width: 3px;height: 30px;background-color: #f5222d;margin-right: 10px;}
}