2024前端面试真题【CSS篇】

盒子模型

盒子模型：box-sizing，描述了文档中的元素如何生成矩形盒子，并通过这些盒子的布局来组织和设计网页。包含content、padding、margin、border四个部分。

分类

• W3C盒子模型（content-box）：标准盒子模型，Width = width
• IE盒子模型（border-box）：Width = width + padding + border

  BFC

  BFC：块级上格式下文，是一块具有自己渲染规则的渲染区域。

  渲染规则：

  • 内部盒子垂直向上一个接一个堆叠
  • 同一个BFC的两个相邻盒子的margin会重叠
  • BFC的区域不会与float元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • 每个元素的左外边距与包含块的左边界相接触；

    -BFC就是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

    BFC的触发条件

    触发BFC的条件包含但不局限于：

    • 根元素
    • 浮动元素：left、right
    • overflow的值除了visible外
    • display的值为inline-、flex-等；
    • position的值为absolute或fixed

      BFC应用场景

      1. 防止margin塌陷
      2. 清除内部浮动
      3. 自适应多栏布局

      响应式设计

      特点

      • 同时适配PC + 平板 + 手机等；
      • 根据视口调整模块大小和位置

        实现方式

        响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。为了处理移动端，页面头部必须有meta声明viewport

        实现方式：

        • 媒体查询：@media screen and (max-width: 1920px) {...}
        • 百分比：height、width属性的百分比依托父元素的宽高，但是其它属性不完全依赖；
        • vw/vh：相对于视图窗口的宽高；
        • rem：相对于根元素html的font-size属性，默认情况下浏览器大小为16px，此时，1rem = 16px

          元素的水平垂直居中方法

          实现方式：

          1. 定位 + margin: auto
          2. 定位 + margin: 负值
          3. 定位 + transform
          4. table布局
          5. flex布局
          6. grid布局：网格布局

          多栏布局、剩余宽度自适应

          两栏布局

          两栏布局一般是一个定宽栏和一个自适应的栏并排展示存在。

          实现思路：

          • float左浮左边栏
          • 右边模块使用margin-left撑出内容块做内容展示
          • 为父级元素添加BFC，防止下方元素飞向上

            .box {
            	overflow: hidden;
            }
            .left {
            	width: 200px;
            	flot: left;
            	height: 100%;
            }
            .right {
            	margin-left: 200px;
            	height: 100%;
            }
            

            三栏布局

            实现思路：

            • 两边固定宽度、float，中间使用margin
            • 两边定宽、使用absolute，中间使用margin
            • 两边使用float和负margin
            • flex实现

              弹性布局

              • flex-direction
              • flex-wrap
              • flex-flow: flex-direction flex-wrap;
              • justify-content
              • align-items：定义项目在交叉轴上如何对齐
              • align-content：定义多根轴线的对齐方式。
              • order：项目的排列顺序，数值越小，排列越靠前，默认为0
              • flex-grow：定义项目的放大比例，默认为0，即存在剩余空间也不放大；
              • flex-shrink：定义项目的缩放比例
              • flex-basis：设置元素在主轴上的初始尺寸，默认为内容决定；
              • align-self：单个项目的对齐方式

                CSS选择器

                分类：

                • id选择器
                • 类选择器
                • 标签选择器
                • 后代选择器（div p）
                • 子选择器（div > p）
                • 相邻同胞选择器（div + p）
                • 群组选择器（div, p）
                • 伪类选择器：（first-child、:nth-child()等）
                • 属性选择器（[attribute~=value]等）
                • 层次选择器（p~ul：选择前面有p元素的每个ul）

                  实现单行/多行文本溢出的省略样式

                  1. 单行文本溢出省略

                  .text-ellipsis {
                  	overflow: hidden;
                  	line-height: 40px;
                  	height: 40px;
                  	width: 100%;
                  	text-overflow: ellipsis;
                  	white-space: nowrap; /*文本不换行*/
                  }
                  
                  

                  1. 多行文本溢出省略
                  • 基于高度截断：伪元素+定位

                    .text-ellipsis1 {
                    	position: relative;
                    	line-height: 20px;
                    	height: 40px;
                    	overflow: hidden;
                    	word-break: break-all;
                    }
                    .text-ellipsis1:after {
                    	content: '...';
                    	position: absolute;
                    	bottom: 0px;
                    	right: 0px;
                    	padding: 0 20px 0 10px;
                    }
                    
                    

                    • 基于行数截断（-webkit-box-clamp）：

                      .text-ellipsis2 {
                      	width:100%;
                      	display: -webkit-box;
                      	-webkit-box-orient: vertical;
                      	-webkit-line-clamp: 2;
                      	overflow: hidden;
                      	text-overflow: ellipsis;
                      }
                      
                      

                      CSS 实现一个三角形

                      .border {
                      	width: 0;
                      	height: 0;
                      	border-style: solid;
                      	border-width: 0 50px 50px;
                      	border-color: transparent transparent #ff0000;
                      }
                      
                      

                      CSS3 动画

                      • transition实现渐变动画：transition: all 2s ease-in 500ms;
                      • transform转变动画：scale、translate、rotate、skew
                      • animation实现自定义动画：通过@keyframes来定义关键帧

                        @keyframes rotate {
                        	from {
                        		transform: rotate(0deg)
                        	}
                        	to {
                        		transform: rotate(180deg)
                        	}
                        }
                        div {
                        	animation: rotate 2s;
                        }
                        
                        

                        CSS的设备像素、css像素、设备独立像素、dpr、ppi

                        css像素

                        css像素以px为后缀，是一个长度单位，是一种相对单位，相对的是设备像素。

                        一般情况，页面缩放比为1,1个css像素 = 1个设备独立像素。

                        px会受到下面的因素的影响而变化：

                        • 每英寸像素（PPI）
                        • 设备像素比（DPR）

                          设备像素

                          设备像素，又称为物理像素。指设备能控制显示的最小物理单位。固定不变，单位为pt。

                          设备独立像素

                          设备独立像素，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念。

                          一个设备独立像素里可能包含一个或者多个物理像素点，包含的越多则屏幕看起来越清晰。

                          至于1个虚拟像素被换算成几个物理像素，这个数值就成为设备像素比（DPR）。

                          设备像素比（DPR）

                          DPR = 设备像素 / 设备独立像素，在window中通过window.devicePixelRatio获取。

                          总结

                          • 无缩放情况下，1个css像素 = 1个设备独立像素；
                          • 设备像素由屏幕生成之后确定，不变；
                          • PC中，1个设备独立像素 = 1个设备像素（未缩放情况下）；
                          • 移动端中，标准屏幕（160ppi）下，1个设备独立像素 = 1个设备像素；
                          • 设备像素比（dpr） = 设备像素 / 设备独立像素；
                          • 每英寸像素（ppi），值越大越清晰

                            px、em、rem、vh、vw

                            • px：绝对单位，大小与元素的其它属性无关；

                            • em：相对长度单位，相对于当前对象内文本的字体尺寸，特点

                              • em的值不固定；
                              • em会继承父级元素的字体大小；
                              • em是相对单位，相对于当前对象内文本的字体尺寸；
                              • 任意浏览器的默认字体高都是16px（1em = 16px）；
                              • 为了简化font-size的计算，我们只需要配置body的font-size: 62.5%;即可，此时：1em = 10px。

                              • rem：相对单位，相对HTML根元素的font-size的值。

                                Chrome支持12px

                                解决方案：

                                • zoom: 0.8;
                                • -webkit-transform: scale()
                                • -webkit-text-size-adjust: none;

                                  回流和重绘

                                  回流：布局引擎根据各种样式计算每个盒子在页面上的大小和位置；在页面初始渲染阶段，会留不可避免的会触发。

                                  重绘：当计算好盒模型的位置、大小和其它属性后，浏览器会根据每个盒子的特性进行绘制。

                                  触发回流一定会触发重绘。回流的阶段主要是计算节点的位置和集合信息，当页面布局或者几何信息发生变化，则需要回流。重绘的阶段主要是做样式修改渲染。

                                  如何减少回流

                                  • 样式组合
                                  • 避免内联样式使用
                                  • 复杂的动画应尽可能脱离文档流；
                                  • 使用css3硬件加速，transform等动画不会引起回流重绘；
                                  • 等；

                                    css预编译语言

                                    css提高性能的方法有哪些？

                                    • 内联首屏关键css
                                    • 异步加载css
                                    • 资源压缩
                                    • 合理使用选择器
                                    • 不要使用@import：会影响浏览器的并行下载，是的页面夹杂延迟
                                    • 把小的icon图片转base64编码使用等