【2023前端初中级面试准备】CSS篇【2023前端初中级面试准备】CSS篇. 本文主要介绍一些在工作及面试中高频率出现

本文主要介绍一些在工作及面试中高频率出现的知识点，如有问题请在评论区纠正。

1.谈谈BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则：

内部Box会在垂直方向一个接一个地放置
Box垂直方向的距离由margin决定。属于同一BFC区域内的两个相邻Box会发生外边距重叠
BFC区域不会和float Box重叠
每个元素的margin box的左边，与包含块border box的左边相接触
BFC是页面中一个独立的区域，不会影响区域外的元素
计算BFC区域的高度时,浮动元素也参与计算

怎么触发BFC：

根元素html
float属性不为none
position属性为absolute和fixed
display属性为inline-block,table-cell,table-caption,flex,inline-flex
overflow属性不为visible

常见问题及解决

外边距重叠创建两个div，分别设置margin-bottom和margin-top

        .father {
            margin: 0 auto;
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background: blue;
            margin-bottom: 50px;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 50px;
        }

两个div的距离并不是100px而是50px。可将其中一个div再包一层div并且在父div开启BFC避免重叠。

父元素高度塌陷
当子元素设置浮动元素后，父元素的高度会消失。

        .father {
            width: 500px;
            border: 1px solid black;
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }

解决方案：父元素触发BFC即可恢复高度。

2.如何实现元素水平垂直居中

1.利用display:flex

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

2.利用定位+transform

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
           
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

4.利用display:table-cell

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            
           
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            display: inline-block;
        }

4.利用display:grid

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: grid;
            justify-items: center;
            align-items: center;  
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

5.利用定位+margin:auto

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
          
        }

        .son {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

3.说说盒子模型

盒子模型分为W3C标准盒模型和IE怪异盒模型

标准盒模型 box-sizing：content-box

盒模型宽度=width+border+padding

IE怪异盒模型 box-sizing：border-box

盒模型宽度=width

图形展示

        .box1,.box2 {
            width: 100px;
            height: 100px;
            border: 10px solid black;
            padding: 10px;
            background: blue;
            margin: 10px;
            
        }
        .box1{
            box-sizing: content-box;
        }
        .box2{
            box-sizing: border-box;
        }

标准盒模型下的box1: 宽度=width+border+padding=100+10+10+10+10=140

怪异盒模型下的box2:宽度=width=100

4.CSS引入的方式有哪些？link和!@import的区别是？

四种引入方式：内联(元素上写style)，内嵌(style标签),外链(link),导入(@import)

link和@import的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入后才加载
link是XHTML标签，无兼容问题；@import是CSS2.1提出的,低版本的浏览器不支持
link支持使用JS控制DOM去改变样式，而@import不支持

5.如何消除图片底部空隙？

设置高度为100px的图片，在浏览器显示104px

将图片设置display-block
将图片设置vertical-align: bottom
将父元素设置line-height:0

6.如何实现两栏布局

两栏布局----左侧宽度固定，右侧自适应

float+margin

        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
        .item1{
            width: 100px;
            height: 300px;
            background: red;
            float: left;
        }
        .item2{
            height: 300px;
            background: blue;
            margin-left: 100px;

        }

定位+margin

        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
        .item1{
            width: 100px;
            height: 300px;
            background: red;
            position: absolute;
            
        }
        .item2{
            height: 300px;
            background: blue;
            margin-left: 100px;
        }

float+bfc

元素设置overflow:hidden,开启BFC，BFC不会和浮动元素重叠

        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
        .item1{
            width: 100px;
            height: 300px;
            background: red;
            float: left;
            
        }
        .item2{
            height: 300px;
            background: blue;
            overflow: hidden;
           
        }

4.flex布局

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }

        .item1 {
            width: 100px;
            height: 300px;
            background: red;
        }

        .item2 {
            height: 300px;
            background: blue;
            flex: 1;

        }

5.grid布局

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-columns: 100px auto;
        }

        .item1 {
            /* width: 100px; */
            height: 300px;
            background: red;
        }

        .item2 {
            height: 300px;
            background: blue;
        }

6.table布局

        .box {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            display: table;
        }

        .item1 {
            display: table-cell;
            width: 100px;
            height: 300px;
            background: red;
        }

        .item2 {
            display: table-cell;
            height: 300px;
            background: blue;
        }

7.大屏自适应处理方案

利用rem+vw+vh

rem：相对于根节点字体大小的单位
vw：相对于视窗宽度的单位
vh：相对于视窗高度的单位
通过设计稿的px像素，转换为实际屏幕的vw，vh比例进行自适应
通过设置根节点font-size,利用rem实现自适应
缺点：当涉及的元素过于多且复杂，如echarts图表，需要自适应的代码过多。

利用scale

js监听浏览器大小改变，通过transform: scale()属性改变元素的大小，实现适应。
缺点：容易出现网页留空的现象。

8.如何用CSS画一个三角形及梯形

利用boder属性，画三角形

        .box{
            width: 0px;
            height: 0px;
            border: 100px solid red;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
        }

画一个梯形

利用border

        .box{
            width: 100px;
            height: 100px;
            border-right: 100px solid transparent;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid red;
        }

2. 利用透视

        .box{
            margin-top: 100px;
            width: 100px;
            height: 200px;
            background: red;
            transform: perspective(0.5rem) rotateY(-3deg);  
        }

9.常见的隐藏元素的方法有哪些？有什么区别？

display:none
opacity:0
visibility:hidden

区别：

display:none，会将DOM节点直接删除，会引起页面布局的改变，触发重排
opacity:0，改变元素的透明度，不会改变页面的布局，只会触发重绘，绑定的事件仍然可以触发，只是肉眼上看不见
visibility:hidden，占据位置，不会改变页面的布局，绑定的事件不会触发

10.什么是重排，重绘？

重排

当元素尺寸，位置，初始化渲染，DOM节点增删等操作会引起重排
重排消耗的浏览器的资源更大，重排必定引起重绘

重绘

当元素属性改变如color，border改变等操作，会引起重绘

如何优化

元素设置position:absolute或者fixed脱离文档流，修改css不会引起重排
避免单独多次对DOM节点进行增加或删除，利用createDocumentFragment进行一次性增删
修改DOM样式时，避免每次操作DOM改变，可以尝试改变className
避免使用table，table属性改变会导致页面重排重绘

11.如何优化动画？

避免直接操作left,top等，改用transfrom生成动画。
开启硬件GPU加速（transform，opacity，filter）
避免频繁导致页面重排
采用requestAnimationFrame，基于屏幕刷新帧率进行动画展示

12.浏览器是如何渲染页面的？

解析html文件，通过词法分析，将html标签转化为DOM树
当遇到script标签，会停止html分析，去读取script标签内的内容，因为浏览器无法预测代码是否会进行DOM操作。
解析CSS，生成CSSOM树
css代码并不会影响DOM树的生成，css不会阻塞Dom的解析，但是会影响页面的渲染。
DOM树和CSSOM树进行结合，生成渲染树RenderTree
遍历renderTree，计算每个节点的几何布局，大小(Layout)
通过GPU将各个节点渲染到屏幕上(Paint)

13.css选择器优先规则是什么？

!important>行内style>id>class>伪类和标签选择器>通配符选择器

选择器权重

!important 优先级无限大
内联选择器优先级1000
ID选择器优先级100
类别选择器优先级10
属性选择器优先级10
伪类优先级10
元素选择器优先级1
伪元素优先级1
通配符选择器优先级0
继承选择器无优先级

14.了解过css预编译语言没有？

sass,less,stylus是为了开发者方便书写css而提供的一些预编译语言

如sass:

实现css层级嵌套规则书写
实现css函数的编写
实现css常量的使用 $abc
实现css混合mixin
实现css的继承 @extend
实现css条件判断 @if @else