2024前端面试CSS必须要懂的几个地方！_&lt；div class=“flex”&gt；aaa&lt； div&gt；是什么意思

2401_84850808

于 2024-09-12 17:29:29 发布

阅读量569

点赞数 4

文章标签：前端面试 css

本文链接：https://blog.csdn.net/2401_84850808/article/details/142181828

版权


wrap：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210331162600596.png)


nowarp：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021033116254648.png)


wrap-reverse：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210331162527589.png)


##### flex-flow属性 决定了flex-direction 和 flex-wrap属性的复合属性：

css .box{ flex-flow: row wrap; }


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210401183531600.png)


##### justify-content属性 定义了元素在主轴上的：

css .box { justify-content: flex-start | flex-end | center | space-between | space-around; }


flex-start：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402171523758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


flex-end：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402171538837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


center：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402171559793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


space-between：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402171616162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 space-around：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210402171626244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


##### align-items属性 定义了属性定义项目在交叉轴上如何对齐：

css .box { align-items: flex-start | flex-end | center | baseline | stretch; }


##### align-content属性 定义了属性定义项目在交叉轴上如何对齐：

css .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }


——————————————————————————————————————————————


### 简单说一下BFC


什么是BFC :  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406112903428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 块格式化上下文 ，晦涩难懂。


* Block :可以简单理解为 盒子模型的box block 块 部分…
* Formatting context ：是css2.1中的一个概念，定义的是页面中的一块渲染区域，并且有一套适配的渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。


**可以看作为开辟了一块独立空间，空间以内的元素不会影响到外面的元素。**


##### BFC 的实际用处



> 
> * https://juejin.cn/post/6844903544726749198 部分参考此博客
> 
> 
> 


* 1.清除浮动
* BFC 可以包含浮动的元素（清除浮动），只要设置容器overflow：hidden  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406171428138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406171528922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)
* 2.布局：自适应 两栏布局


未形成BFC：  
 显示重叠  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406164704979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021040616521160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


* 3.防止垂直margin 合并
* 当元素在同一个BFC中，垂直方向上的margin会重叠，解决方法是将其放在不同的 BFC 容器中。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406172217846.png)


![在这里插入图片描述](https://img-blog.csdnimg.cn/2021040617215137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406172201143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70)


可以看到margin 发生了重合 在垂直路径上  
 注释放开：即可创造局部bfc

bfc

A-BFC

B-BFC


##### 触发条件



> 
> 最佳触发条件：overflow:hidden
> 
> 
> 


1. float值非none
2. overflow值非visible
3. display值为inline-block、table-cell、table-caption、flex、inline-flex
4. position值为absolute、fixed


### 实现元素的水平垂直居中


[点击查看我之前的博客]( )


### 浮动清除

 三种方式进行浮动清除 
* 使用带clear属性的空元素 或邻接元素处理  
 **在浮动元素后使用一个空元素**

.clear{clear:both;}


* 使用css的overflow属性  
 **给浮动元素的容器添加overflow：hidden；或者overflow：auto；可以清除浮动.** *BFC同理*
* 伪元素处理  
 **给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个：afer伪元素实现元素末尾添加一个看不见的块元素清理浮动。**

aaa

.clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:both; /*清除浮动*/ } .clearfix{ zoom:1; /*为了兼容IE*/ }


### 如何让一个元素消失

以下三种方式均可：
display：none；
visibility：hidden；
opacity：0；


### 重绘和重排



> 
> https://segmentfault.com/a/1190000016990089 部分参考此博客  
>  DOM的变化影响到了预算的几何属性如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘.
> 
> 
> 


##### 引起重排重绘的原因：


* 添加或者删除可见的DOM元素
* 元素尺寸位置的改变
* 浏览器页面初始化
* 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排


##### 减少重绘重排的方法：


* **不在布局信息改变时做DOM查询**
* **使用csstext，className一次性改变属性**  
 减少重排的次数：以下的第一次案例中 对dom进行了三次修改，则可能会触发三次浏览器的重排

var el = document.querySelector(‘.el’);
el.style.borderLeft = ‘1px’;
el.style.borderRight = ‘2px’;
el.style.padding = ‘5px’;


使用cssText 将多次的修改进行合并 这样dom节点则只会被修改一次 ，避免了浏览器的多次重排

var el = document.querySelector(‘.el’);
el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px’;


也可以对className 进行直接修改

// css
.active {
padding: 5px;
border-left: 1px;
border-right: 2px;
}
// javascript
var el = document.querySelector(‘.el’);
el.className = ‘active’;


* **使用fragment**
* **对于多次重排的元素，比如动画，使用绝对定位脱离文档流，使其不影响其他元素**


### 块级元素和行级元素


* 块元素：独占一行，并且有自动填满父元素，可以设置margin和padding以及width height。
* 行元素：不会独占一行，width，height失效，并且在垂直方向的padding和margin会失效。