2021前端面试CSS必须要懂的几个地方！

小咪咪 2022-11-15 11:20 173阅读 0赞

# 不断更新中！收藏即可！ #

*  FLEX
 *  BFC
 *  实现元素水平垂直居中
 *  浮动清除
 *  如何让一个元素消失
 *  重绘和重排
 *  块级元素和行级元素

## 简单说一下Flex 布局 ##

设为flex 布局后 子元素的float clear vertical-align 失效  
采用 Flex 布局的元素，称为 ***Flex 容器***

> vertical-align 属性设置元素的垂直对齐方式

对于flex布局 主要有六大属性 分别是：

*  flex-direction
 *  flex-wrap
 *  flex-flow
 *  justify-content
 *  align-items
 *  align-content

#### flex-direction 属性 决定主轴的方向： ####

**四种方向**

css .box {  flex-direction: row | row-reverse | column | column-reverse; }

row ：![在这里插入图片描述][20210331154101416.png]

row-reverse：![在这里插入图片描述][20210331154037740.png]

column:![在这里插入图片描述][20210331154328582.png]column-reverse:![在这里插入图片描述][20210331154400738.png]

#### flex-wrap 属性 当轴线无法排布时，决定如何换行： ####

css .box{  flex-wrap: nowrap | wrap | wrap-reverse; }

wrap：  
![在这里插入图片描述][20210331162600596.png]

nowarp：  
![在这里插入图片描述][2021033116254648.png]

wrap-reverse：  
![在这里插入图片描述][20210331162527589.png]

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

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

![在这里插入图片描述][20210401183531600.png]

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

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

flex-start：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

flex-end：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

center：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]

space-between：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]  
space-around：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]

#### 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 :  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]  
块格式化上下文 ，晦涩难懂。

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

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

#### BFC 的实际用处 ####

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

*  1.清除浮动
 *  BFC 可以包含浮动的元素（清除浮动），只要设置容器overflow：hidden  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 7]
 *  2.布局：自适应 两栏布局

未形成BFC：  
显示重叠  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 9]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 11]

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

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>bfc</title>
        <style> /* .wrap { overflow: hidden; } */ p { color: rgb(1, 12, 3); background: rgb(204, 253, 255); width: 200px; line-height: 100px; text-align: center; margin: 100px; } </style>
    </head>
    <body>
        <p>A-BFC</p>
        
            <p>B-BFC</p>
        
    </body>
    </html>

#### 触发条件 ####

> 最佳触发条件：overflow:hidden

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

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

[点击查看我之前的博客][Link 1]

## 浮动清除 ##

三种方式进行浮动清除

*  使用带clear属性的空元素 或邻接元素处理  
    **在浮动元素后使用一个空元素**

<div></div>
    <div class="clear"></div>
    
    .clear{clear:both;}

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

<div class="container clearfix">
        <div class="wrap">aaa</div>
    </div>
    .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会失效。

[20210331154101416.png]: /images/20221022/25a81e2c436244318596fbb9adc58529.png
[20210331154037740.png]: https://img-blog.csdnimg.cn/20210331154037740.png
[20210331154328582.png]: https://img-blog.csdnimg.cn/20210331154328582.png
[20210331154400738.png]: https://img-blog.csdnimg.cn/20210331154400738.png
[20210331162600596.png]: https://img-blog.csdnimg.cn/20210331162600596.png
[2021033116254648.png]: https://img-blog.csdnimg.cn/2021033116254648.png
[20210331162527589.png]: https://img-blog.csdnimg.cn/20210331162527589.png
[20210401183531600.png]: https://img-blog.csdnimg.cn/20210401183531600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210402171523758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210402171538837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210402171559793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210402171616162.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210402171626244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210406112903428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210406171428138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210406171528922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210406164704979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2021040616521160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[20210406172217846.png]: https://img-blog.csdnimg.cn/20210406172217846.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2021040617215137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210406172201143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/qq_43277404/article/details/104272668?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161770691016780274147745%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161770691016780274147745&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-2-104272668.nonecase&utm_term=%E5%B1%85%E4%B8%AD