打卡：CSS复习

active??

已于 2023-08-22 09:06:08 修改

阅读量75

点赞数

分类专栏：每日一题文章标签： css 前端

于 2023-08-02 10:00:36 首次发布

本文链接：https://blog.csdn.net/weixin_47299259/article/details/132055170

版权

每日一题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一：说说CSS中的盒模型？（8.2）

盒模型的组成：content + padding + border + margin
两种表现方式：
1. 标准盒模型：元素的高度和宽度只包括 content 的大小，不包括 padding，border，margin。
2. IE盒模型：元素的高度和宽度包括 content，padding，border，可以使用box-sizing属性将元素的盒模型设置为IE盒模型

二 CSS选择器的优先级（8.3）

!important > 内联选择器 > ID选择器 > 类选择器，属性选择器，伪类选择器 > 元素选择器，伪元素选择器 > 通配选择器，子类选择器
注意：相同层级的选择器，后面覆盖前面

三说说对前端回流,重绘的理解（8.4）

回流是指当DOM元素的尺寸，位置或布局发生变化时，浏览器需要重新计算并更新页面的布局，这个过程叫做回流。比较影响性能
重绘是指当DOM元素发生变化，但不影响其布局，浏览器只需要重新绘制元素的外观，而不需要重新计算布局，这个过程叫做重绘。性能相对较好
两者的区别在于需不需要重新计算布局。
优化：
1. 使用CSS3的transform属性替代改变元素的大小，因为不会触发回流
2. 使用CSS3的transition和animation属性实现动画，避免频繁改变元素样式
3. 使用文档片段（Document Fragment）进行DOM操作，然后一次性插入到文档，减少回流次数
4. 避免频繁读取布局信息，例如：offsetTop，offsetLeft等属性，会强制浏览器进行回流
5. 使用CSS的will-change属性来提前告知浏览器那些属性将要发送变化，以优化性能

四对BFC的理解?（8.5）

BFC：块级格式化上下文
BFC的形成：
1. 根元素
2. 浮动元素：float不为none
3. 定位元素：position为absolute和fixed
4. 表格的标题和单元格：display为table-caption，table-cell
5. 匿名的表格单元格元素：display为table或者inline-table
6. 行内块元素：display为inline-block
7. overflow为visible
8. 弹性元素：display为flex或inline-flex的元素的直接子元素
9. 网格元素：display为grid或inline-grid的元素的直接子元素
特性：
1. 块级元素会在垂直方向一个一个想下排列
2. BFC内部的元素在水平方向上不会相互影响，它们会尽量排在一起，如果空间不足则自动换行
3. BFC的边界会包含其所有的子元素，即使子元素浮动也不会影响到外部元素的布局
4. BFC可以阻止浮动元素溢出父元素的情况，使父元素能够正确的包裹浮动元素
应用：
1. 清除浮动
2. 防止边距重叠
3. 创建自适应的两栏布局

五 CSS实现两栏布局（左侧固定+右侧自适应）（8.7）补8.6

 // HTML
<div class="container">
    <div class="sidebar">
        // 左侧固定宽度
    </div>
    <div class="main-content">
        // 右侧自适应宽度
    </div>
</div>
// CSS
1.使用flex
    .container {
        display:flex;
    }
    .sidebar {
       width: 200px;
       background-color: #f1f1f1;
    }
    .main-content {
        flex-grow: 1;
        background-color: #fff;
    }
2.使用浮动（float）
    .container::after {
        content: "";
        display: table;
        clear: bath;
    }
    .sidebar {
       float: left;
       width: 200px;
       background-color: #f1f1f1;
    }
    .main-content {
        margin-left: 220px;
        background-color: #fff;
    }
3.使用绝对定位
    .container {
        position: relative;
    }
    .sidebar {
       position: absolute;
       top: 0;
       left: 0;
       width: 200px;
       background-color: #f1f1f1;
    }
    .main-content {
        margin-left: 220px;
        background-color: #fff;
    }
4.使用表格
    .container {
        display: table;
        width: 100%;
    }
    .sidebar {
       display: table-cell;
       width: 200px;
       background-color: #f1f1f1;
    }
    .main-content {
        display: table-cell;
        background-color: #fff;
    }

六 CSS实现圣杯布局和双飞翼布局（8.7）

// HTML
<div class="container">
  <div class="main-content">
    <!-- 中间列内容 -->
  </div>
  <div class="sidebar sidebar-left">
    <!-- 左侧列内容 -->
  </div>
  <div class="sidebar sidebar-right">
    <!-- 右侧列内容 -->
  </div>
</div>

// CSS
1.使用浮动
.container {
    padding-left: 200px; /* 左侧列宽度 */
    padding-right: 200px; /* 右侧列宽度 */
}
.main-content {
    float: left;
    width: 100%;
}
.sidebar {
    float: left;
    width: 200px;
}
.sidebar-left {
    margin-left: -100%; /* 左侧列宽度的负值 */
}
.sidebar-right {
    margin-left:: -200px; /* 左右侧列宽度 */
}


2.使用flex布局
.container {
    display: flex;
}
.main-content {
    flex-grow: 1;
    margin: 0 200px; /* 左右侧列宽度 */
}
.sidebar {
    width: 200px; /* 左右侧列宽度 */
}
.sidebar-left {
   order: 1; /* 左侧列放在第一位 */
}
.sidebar-right {
    order: 1; /* 右侧列放在最后一位 */
}

七水平垂直居中实现方式有几种（8.8）

// 1.使用flex布局
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
// 2.使用绝对定位和transform
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
// 3.使用表格布局
.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
// 4.使用grid布局
.parent {
    display: grid;
    place-items: center;
}

八 flex布局（8.9）

是一种用于页面布局的CSS3的模块，提供了一种灵活的方式来排列，对齐和分布元素
优势：
1. 简单易用
2. 自适应性
3. 灵活性
4. 响应式设计
5. 支持多行布局

常用场景

/* 1.设置主轴方向和对齐方向 */
.container {
    flex-derection: row; /* 主轴方向为水平方向 */
    justify-content: center; /* 子元素在主轴上居中对齐 */
}
/* 2.设置交叉轴对齐方式 */
.container {
    align-items：center; /* 子元素在交叉轴上居中对齐 */
    align-conter: center; /* 多行子元素在交叉轴上居中对齐 */
}
/* 3.设置子元素的伸缩性 */
.item {
    flex: 1;
}

八 CSS中可继承与不可继承属性有哪些（8.10）

常见可继承属性：
1. 字体属性：font-family，font-size，font-weight，font-style
2. 文本属性：color，text-align，text-decoration，line-height
3. 盒模型属性：margin，padding，border
4. 列表属性：list-style-type，list-style-position
5. 表格树形：border-collapse，border-spacing
常见的不可继承属性：
1. 盒模型属性：width，height，box-sizing
2. 定位属性：position，top，left，z-index
3. 背景属性：background-color，background-image
4. 清除属性：clear
5. 文本属性：text-transform，text-overflow

九 display的属性值及其作用（8.11）

block：将元素显示为块级元素，会独占一行，并且可以设置宽，高度，边距等属性
inline：将元素显示为内联元素，不会独占一行，只会占据内容所需的空间，不能设置宽，高等块级属性
inline-block：将元素显示为内联块级元素，不会独占一行，可以设置宽，高，边距等属性
none：将元素隐藏，不会在页面中显示，也不会占据空间
flex：将元素显示为弹性盒子，可以使用弹性布局的属性来控制元素的排列
grid：将元素显示为网格容器，可以使用网格布局的属性来控制元素的排列方式
table：将元素显示为表格，可以使用表格布局的属性来控制元素的排列方式
inline-table：将元素显示为内联模式。不会独占一行，可以使用表格布局的属性来控制元素的排列方式
list-item：将元素显示为列表项，常用于li元素
inherit：继承父元素的display属性值

十 @import和link的区别（8.12）

加载时机：@import是在CSS文件中使用的一种规则，用于在当前样式表引入其他样式。它会在解析到该规则时才开始加载引入的样式表；而link是在HTML文件中使用标签，用于在HTML文档加载时就开始加载外部样式表
并行加载：@import会阻塞页面的渲染，直到引入的样式表加载完成，这意味着页面上的其他内容会等待样式表加载完成之后才开始渲染。而link标签可以并行加载样式表，不会阻塞页面的渲染
兼容性：@import在旧版本的浏览器支持不太好，而link是HTML的标准，具有更好的兼容性
功能扩展：link标签可以通过rel属性指定的关联关系，例如rel="stylesheet"表示引入的样式表，rel="preload"表示预加载资源等，而@import没有类似的功能扩展

十一伪元素和伪类的区别和作用（8.14）补8.13

伪元素用于创建并样式化文档中不存在元素，如添加额外的内容或装饰线条
伪类用于选择文档总中特定状态的元素，如鼠标悬停，被点击，被选择等
伪元素使用双冒号表示 :: 表示，伪类使用单冒号 : 表示
伪元素通过CSS的content来添加内容，伪类通过选择器选择元素的特定状态

十二 CSS3中有哪些新特性（8.14）

新的选择器
1. 属性选择器，伪类选择器，伪元素选择器等
2. 多元素选择器，可以选择多个元素进行样式设置
3. 子选择器，相邻兄弟选择器，通用兄弟选择器等
盒模型
1. 弹性盒模型（flex）
2. 网格布局（grid）
文本和字体
1. 文本阴影，文字渐变，文字描边等效果
2. 自定义字体（@font-face）
背景和边框
1. 渐变背景（linear-gradient、radial-gradient）
2. 多重背景图像，背景尺寸，背景定位等
3. 圆角边框，阴影边框，边框图像等
动画和过渡
1. 过渡效果（transition）
2. 动画效果（@keyframes）
变换和变形
1. 2D变换，如旋转，缩放，平移等
2. 3D变换，可以在三维空间中进行变换
媒体查询（@media）
过滤和混合
1. 图像滤镜（filter）
2. 混合模式（blend-mode）

十三 CSS优化和提高性能的方法有哪些？（8.15）

减少选择器的复杂性：选择器的复杂性越高，匹配元素所用时间越长，尽量使用简单的选择器，并且避免使用通配符和后代选择器
压缩和合并CSS文件
避免使用@import：使用@import会增加额外的HTTP请求，影响页面加载速度。建议使用link标签
使用媒体查询（@media）：使用媒体查询可以适应不同大小的屏幕，提高响应性能
避免使用@important：滥用@important是导致样式的优先级混乱，增加维护成本
使用缩写属性：使用缩写属性可以减少CSS代码大小，提高加载速度
避免使用过多的浮动：浮动元素会导致文档重绘和重排，影响性能
使用CSS sprites：将多个小图标合并成一个大图片，并通过background-position来显示不同的图标，可以减少HTTP请求，提高加载速度
使用字体图标
避免使用过多层级
使用CSS动画代替JS动画
使用外部样式表
避免使用不必要的重复样式
使用预处理器

十四 CSS预处理器有哪些，使用他们的原因是什么？（8.16）

Sass
Less
Style
原因
1. 变量和嵌套规则
2. 混合和继承
3. 函数和运算
4. 模块化和组织
5. 自动化和工具支持
总的来说CSS预处理器可以提高CSS代码的可读性，可维护性和开发效率，是的样式表更加灵活和强大

十五什么是FOUC?如何避免（8.17）

FOUC是指在页面加载过程中，由于样式表加载延迟或阻塞，导致页面在初始渲染时出现短暂的无样式内容闪烁的现象
通常发生在已下的情况
1. 外部样式表加载延迟
2. JS动态插入样式
避免措施
1. 将样式表放在<head>标签中
2. 使用内联样式
3. 使用媒体查询
4. 使用预加载技术
5. 使用样式闪避技术

十六清除浮动的几种方式，各自的优缺点（8.18）

使用空元素清除浮动
1. 优点：简单易懂，兼容性好
2. 缺点：需要添加额外的空元素，不够语义化
```
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
```
使用伪元素清除浮动
1. 优点：不需要添加额外的空元素，语义化好
2. 缺点：需要额外的伪元素，代码量稍多
```
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix::before {
  content: "";
  display: table;
}
```
父元素设置overflow：hidden
1. 优点：简单易懂，不需要添加额外的元素
2. 缺点：可能会隐藏溢出的内容，不适用于需要显示溢出内容的情况
```
.parent {
  overflow: hidden;
}
```
父元素设置display：flow-root
1. 优点：简单易懂，不需要添加额外的元素
2. 缺点：兼容性差，不适用于旧版本的浏览器
```
.parent {
  display: flow-root;
}
```
使用BFC
1. 优点：可以解决多个浮动造成的布局问题
2. 缺点：需要了解BFC的概念，不适用于所有情况
```
.parent {
  overflow: auto;
}
```