CSS前端面试专用

蔚落 2022-09-04 10:59 201阅读 0赞

## Flex ##

*  **flex布局**  
    父元素：容器，子元素：项目。  
    主轴main，交叉轴cross。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 6]

## **CSS盒模型** ##

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
    **box-sizing**：content-box,border-box,inherit
    content-box：width设置的是内容的高度。
    Border-box：width = content + padding + border
    **通过盒模型画三角形。**

## 标题**BFC 块级格式化上下文** ##

是一个布局的概念，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 7]  
作用：  
1. 清除浮动，高度塌陷  
2. 解决外边距合并  
3. 防止元素被浮动的元素遮挡

## **高度塌陷（清除浮动）解决** ##

1. 给父元素添加声明overflow：hidden，设置成BFC
    2. 在浮动元素下方添加空div，并给元素声明 clear：both
    3. 给父元素设置伪元素
    
    
    ```css
    .box::after{
    		content: "";
    		display: block;
                    clear: both;
                    /* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
     		height: 0;
    		overflow: hidden;
                    /* visibility:hidden;为了去隐藏content中的内容 */
    		visibility: hidden;
    	}
    ```

## **外边距合并问题** ##

**父子元素**margin合并问题解决办法
    	方法一：设置父元素的overflow属性为hidden。
    	方法二：设置父元素的border属性，如：border:1px solid red;

*  **block / inline-block / inline的区别**  
    block:块级元素，一个占一整行，可以设置宽高。  
    inline-block：行内块元素，不换行，但是可以设置宽高。  
    inline：内联元素，不换行，不能设置宽高。

## 标题**实现一个文本溢出显示** ##

单行文本：
    
    
    ```css
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
    ```
    多行文本：
    
    
    ```css
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    ```

## 两栏布局 ##

左边固定，右边自适应。

**1.通过设置浮动实现。**  
需要两个div实现，一个div设置浮动，并设置宽度，另一个div可以不用设置任何东西。如果要给右边块设置什么的话下面两种方法也行：

*  left左浮动并设置宽度right设置margin-left为left的宽度也能实现
 *  left设置左浮动并和宽度right，right设置over-flow:hidden也能实现（BFC）

**2. 通过相对定位和绝对定位实现**

**3.通过弹性盒子flex实现**

## 三栏布局 ##

左右固定，中间自适应。  
**1.float布局**（与两栏布局类似）  
缺点：主要内容无法最先加载（中间部分的DOM节点必须放在左右部分之后），当页面内容较多时会影响用户体验。

**2.flex布局**  
优点：可以先写center，让他先加载，然后用order属性，把他排到中间的位置

**3.绝对定位**  
优点：主内容可以优先加载。

**4.table布局**  
DOM节点按顺序出现，子元素会自动铺满TABLE容器。

**5.Grid布局**  
grid-template-columns: 100px auto 100px;  
用于设置网格容器的列属性 其实就相当于列的宽度 当我们需要几列展示时，就设置几个值。

## 双飞翼布局&圣杯布局 ##

参考文章：https://segmentfault.com/a/1190000004579886  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 8]  
需要先让内容部分先加载，中间的三个部分都向左浮动，对 content 要清除浮动让他撑起高度。实现后的样式如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 9]  
我们要的目的是 main 布局自适应，这样的话我们给 main 100% 的宽度，实现后样式如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 10]  
我们想要 left 跑上去，这个时候就可以使用奇妙的负边距了。

//相当于left左边的边界线，向左（向前）移动了父盒子的长度。 //跑到了main的前面。main被挤短了。 .left { 
        margin-left: 100%;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 11]  
而right也需要向前移，只需要移动right自身的宽度即可到上一排的最后面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 12]  
但是这时候中间盒子还是占据一整行，内容被其他两个遮挡了。那么如何去使得 main 部分往里面收收呢？这也就是**圣杯布局与双飞翼布局根本区别**了。

**圣杯布局**的思想就是给包裹着三个元素的 content 加一个 padding, 让 padding-left 和 padding-right 的数值是 left 和 right 的宽度，然后利用相对定位把他们再移动在两旁。

.content { 
        padding: 0 60px 0 40px;
    }
    .left { 
        position: relative;
        left: -40px;
    }
    .right { 
        position: relative;
        right: -60px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 13]  
圣杯布局总代码：

**双飞翼布局**是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right.

## SEO ##

即搜索引擎优化。seo是通过总结搜索引擎的排名规律，对网站进行合理的优化是你的网站在搜索引擎的排名提高，从而利用搜索引擎给自己带来客户。

**方法：**

*  合理的 **title、description、keywords**：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2词，而且要靠前，不同页面title要有所不同； description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同； keyword列举出重要关键词即可
 *  **语义化的 HTML 代码**，符合W3C规范：语义化代码让搜索引擎容易理解网页
 *  **重要内容 HTML 代码放在最前**：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
 *  **重要内容不要用 js 输出**：爬虫不会执行js获取内容
 *  **少用 iframe**：搜索引擎不会抓取 iframe 中的内容
 *  **非装饰性图片必须加 alt**
 *  **提高网站速度**：网站速度是搜索引擎排序的一个重要指标

## rem ##

**rem+vw适配**  
什么是vw和vh?

vw : 1vw 等于视口宽度的1%  
vh : 1vh 等于视口高度的1%  
vmin : 选取 vw 和 vh 中最小的那个  
vmax : 选取 vw 和 vh 中最大的那个

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 \* 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）

注意：这里的1%是指占视口的1%，而不是我们定义的div的1%

如何利用rem+vw进行屏幕适配呢？我们以设计稿为750px为基准

第一步：设置meta标签

因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算  
第二步：设置html的font-size大小

html\{font-size:13.33333333vw\}  
为什么font-size=13.33333333vw?

下面分析下原理吧, 上面我们说了vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw,。

同时我们知道rem,rem是相对html元素的字体大小，为了方便计算,我们取html的font-size=100px,通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了

所以，我们让1rem=100px=13.333333vw

那么在项目上就很好地可以进行使用了

当我们通过ps测量一个div的大小为 width:200px,height:137px时，我们就可以这样写，ps量出来的像素直接除以100，计算小数很方便

div \{  
width: 2rem;  
height:1.37rem;

\}  
是不是相对于前面的rem适配来说，不用去计算小数了。vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

其他适配方法：

*  百分比
 *  将屏幕分为N等份，每份为1rem，但是计算比较复杂
 *  媒体查询

## CSS渲染层合并 ##

参考文章：https://blog.csdn.net/weixin\_38129930/article/details/102675221  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]

> **DOM节点=》（一一对应）渲染对象=》（同一个Z轴空间中 | 满足特定属性）渲染层=》（满足特定条件）合成层=》（一一对应）图形层**

**渲染层**  
DOM 节点和渲染对象是一一对应的，满足以上条件的渲染对象就能拥有独立的渲染层。当然这里的独立是不完全准确的，并不代表着它们完全独享了渲染层，由于不满足上述条件的渲染对象将会与其第一个拥有渲染层的父元素共用同一个渲染层，因此实际上，这些渲染对象会与它的部分子元素共用这个渲染层。

**图形层**  
GraphicsLayer 其实是一个负责生成最终准备呈现的内容图形的层模型，它拥有一个图形上下文（GraphicsContext），GraphicsContext 会负责输出该层的位图。存储在共享内存中的位图将作为纹理上传到 GPU，最后由 GPU 将多个位图进行合成，然后绘制到屏幕上，此时，我们的页面也就展现到了屏幕上。

所以 GraphicsLayer 是一个重要的渲染载体和工具，但它并不直接处理渲染层，而是处理合成层。

**合成层**  
合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 的父层共用一个。

那么一个渲染层满足哪些特殊条件时，才能被提升为合成层呢？这里列举了一些常见的情况：

1.  3D transforms：translate3d、translateZ 等
2.  video、canvas、iframe 等元素
3.  通过 Element.animate() 实现的 opacity 动画转换
4.  通过 СSS 动画实现的 opacity 动画转换
5.  position: fixed
6.  具有 will-change 属性
7.  对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition

**隐式合成**

> **一个或多个非合成元素应出现在堆叠顺序上的合成元素之上，被提升到合成层。**

可能会导致层爆炸。比如如果将z-index:3的元素设为合成层，则上面的三个元素都会变成合成层。![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_19_color_FFFFFF_t_70_g_se_x_16][]  
因此浏览器有层压缩的策略：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
渲染层提升为合成层之后，会给我们带来不少**好处**：

1.  合成层的位图，会交由 GPU 合成，比 CPU 处理要快得多；
2.  当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层；
3.  元素提升为合成层后，**transform 和 opacity 才不会触发 repaint，如果不是合成层，则其依然会触发 repaint**。

**坏处：**

1.  绘制的图层必须传输到 GPU，这些层的数量和大小达到一定量级后，可能会导致传输非常慢，进而导致一些低端和中端设备上出现闪烁；
2.  隐式合成容易产生过量的合成层，每个合成层都占用额外的内存，而内存是移动设备上的宝贵资源，过多使用内存可能会导致浏览器崩溃，让性能优化适得其反。

**优化建议：**

1.  动画使用transform，而不是top | left…
2.  减少隐式合成
3.  减小合成层的尺寸。对于一些纯色图层来说，我们可以使用 width 和 height 属性减小合成层的物理尺寸，然后再用 transform: scale(…) 放大，这样一来可以极大地减少层合成带来的内存消耗。

比如使用will-change:transform | transform:translateZ(0)，就可以实现提升为合成层。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]: /images/20220829/35b86ba0f0b4415f8c1e3d8d529fefb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/10ab9e709d234f2c8dbd2bdaf1a271e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/786a1653871d45119d118e7752b578f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/2859d44daf594f1cacd48d873e8bcbb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/bb6f8ac08fa241fe9fb5eca4648542c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/ac7f436358a5445789e124f65dabeecc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/da74bc210f1040888f662eab33ec0bb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/32e0e7d77655459b86ea0808f05d5c2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/4acf1176b2124a7395b653e1d1cc0f43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/c9cdc4b1c0c14653b0e6bc6dda617cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/0daa134ded424a739d2a87b86b0ffba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/b34183c8d59d4838909e60b0145e3d21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/192648fb542644cdaed12bc1815c722c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/10ec733cad014e21bdb8c1ee164b96b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/43b202b3d8744f72a94982717aa5157e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d4998bda45a24e069521150ae93aae33.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/6501bd5c24364eca924df8468ff1e9df.png