前端面试CSS知识点

目录

前言

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

1. 块级元素-display:block

1.1.1 常见的块级元素

1.1.2 块级元素的特点

2. 行内元素-display-inline

2.1.1 常见的行内元素

2.1.2 行内元素的特点

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

3.1.1 常见的行内块元素

3.1.2 行内块元素的特点

 二、伪元素的应用

---

前言

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

---

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

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可以设置上下左右四个方向

 二、伪元素的应用

22

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