编辑排版 | 宋大狮

平台运营 | 小唐狮

一、说一说盒模型的组成？

    盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成

    怪异盒模型：

        box-sizing:border-box;

        设置的宽度是content+padding+border

    标准盒模型：

        box-sizing:content-box;

        设置的宽度是content

二、说一下垂直水平居中的方式有哪些？

    行元素：

        1、text-align + line-height

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            text-align: center;

            line-height: 500px;

        }

        /* 子元素 */

        .sonDiv {

            background-color: pink;

            display: inline;

        }

        2、display: table-cell;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: table-cell;

            text-align: center;

            vertical-align: middle;

        }

        /* 子元素 */

        .sonDiv {

            background-color: pink;

            display: inline;

        }

        3、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

        }

        4、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

            margin: auto;

        }

        5、position: absolute;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            margin: auto;

        }

        6、position: absolute;

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

        }

        7、position: absolute;【好用】

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

        }

        8、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

            margin: auto;

        }

        9、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline;

        }

    行块元素：

        1、text-align + line-height + vertical-align

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            text-align: center;

            line-height: 500px;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            vertical-align: middle;

        }

        2、display: table-cell;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: table-cell;

            text-align: center;

            vertical-align: middle;

        }

        /* 子元素 */

        .sonDiv {

            background-color: pink;

            display: inline-block;

        }

        3、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

        }

        4、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            margin: auto;

        }

        5、position: absolute;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            margin: auto;

        }

        6、position: absolute;

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

        }

        7、position: absolute;【好用】

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

        }

        8、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

            margin: auto;

        }

        9、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: inline-block;

        }

    块元素：

        1、display: table-cell;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: table-cell;

            vertical-align: middle;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            margin: auto;

        }

        2、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

        }

        3、display: flex;【好用】

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: flex;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            margin: auto;

        }

        4、position: absolute;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            margin: auto;

        }

        5、position: absolute;

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -100px;

            margin-top: -100px;

        }

        6、position: absolute;【好用】

       /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            position: relative;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

        }

        7、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

            margin: auto;

        }

        8、display: grid;

        /* 父元素 */

        .fatherDiv {

            width: 500px;

            height: 500px;

            background-color: green;

            display: grid;

            justify-content: center;

            align-items: center;

        }

        /* 子元素 */

        .sonDiv {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: block;

        }

三、说一说对rem的理解？

概述：

页面响应式用 rem 实现【根据设备屏幕宽度改变根元素fontsize】，设备自适应用 媒体查询 实现【根据设备屏幕宽度控制哪些样式class生效】

媒体查询实现：【页面结构需要变化时使用】

1、link元素中的CSS媒体查询【一般用于Js项目】

<!-- pc端，设备屏幕宽度大于等于901px时，pc端样式文件class生效，控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(min-width:901px)" href="./css/pc/index.css">

<!-- 移动端，设备屏幕宽度小于等于900px时，移动端样式文件class生效，控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(max-width:900px)" href="./css/pe/index.css">

2、样式表中的CSS媒体查询【一般用于Vue项目】

<!-- pc端 -->

@media screen and (min-width:901px){

body {

background-color: red;

}

}

<!-- 移动端 -->

@media screen and (max-width:900px){

body {

background-color: green;

}

}

rem原理：

百分比布局可实现响应式布局，而rem相当于百分比布局。无论设备可视窗口如何变化，始终设置rem为width的1/n，即实现了百分比布局。

rem公式：

方案一：1rem=100px【方便计算】

html.fontSize = 1rem = 设备屏幕宽度/(设计稿宽度/100)，

1、分析阶段 --- 让设备屏幕宽度等于设计稿宽度，则1rem=100px，此时方便计算、编写设计稿元素宽度对应的rem。

2、执行阶段 --- 让设备屏幕宽度等于Js获取的设备屏幕宽度

方案二：1rem = 设计稿宽度/份数【需使用cssrem插件来方便计算】

1、分析阶段 --- html.fontSize = 1rem = 设计稿宽度/份数

2、执行阶段 --- html.fontSize = 1rem = 设备屏幕宽度/份数

3、页面元素的rem：nrem = 设计稿元素宽度/1rem

rem实现：

1、分析阶段，先根据设计稿宽度px计算1rem，再根据设计稿元素宽度px计算、编写页面元素的rem

2、执行阶段，Js先自动根据设备屏幕宽度计算1rem，再将1rem对应的px赋值给Html的fontsize，再根据编写好的页面元素的rem，计算实际页面元素的px

rem工具：

分析阶段：cssrem插件，把页面元素px自动计算成rem。需先在VSCode的配置文件中，根据设计稿宽度px计算1rem。

执行阶段：flexible.js库，将设备屏幕宽度分成了10份，根据设备屏幕宽度自动计算1rem。【Js项目在head中引入，Vue项目在main.js中引入】

四、说一说清除浮动的方法？【浮动导致父元素高度塌陷问题解决方法】

    1、给父级直接设置高度

    2、隔墙法：在最后一个浮动标签后，新加一个标签，给其设置clear：both

    3、overflow:hidden;：通过触发BFC，实现清除浮动

    4、伪类清除法：推荐使用

        .clearfix:after{

            //内容为空

            content: "";

            //转成块元素

            display: block;

            //清除左右浮动

            clear: both;

        }

五、说一说css3新特性？

    特殊选择器：属性选择器、表单伪类选择器、结构伪类选择器、伪元素选择器

    特殊效果：渐变、圆角border-radius、文字阴影text-shadow/盒阴影box-shadow、滤镜filter

    特殊动效：过渡transition、变换transform（倾斜skew、平移translate、缩放scale、旋转rotate）、动画animation

六、说一说对BFC的理解？

    页面【等同于html根元素】：一个三维模型，分X、Y、Z轴；内部每一个子元素也都是一个三维模型，都拥有自己的X、Y、Z轴

    FC格式化上下文【管理页面的X、Y轴】，它是页面中一个决定元素内部如何布局的容器，决定了元素内部的布局方式，内部的子元素不会影响到容器外的布局。

    SC层叠上下文【管理页面的Z轴】，它是页面中一个决定元素内部如何分层的容器，决定了元素内部的层级关系，每个元素都拥有属于自己的一个层叠上下文。

    文档流【管理页面的X、Y轴】：页面中所有元素的默认布局特性。块元素独占一行、垂直排列，行元素不独占一行、水平排列，水平自动换行，垂直超出溢出。

    FC、SC、文档流的关系：

        页面最外面最底端是html根元素；【Z轴方面】根元素内部有许多层堆叠，每一层有许多子元素；【X、Y轴方面】根元素内部有自己的FC布局格式-BFC，内部每一个块元素都受根元素FC布局格式的约束，其它方面依然遵循文档流特性

        【X、Y轴方面】通过触发FC可以改变元素自身内部的文档流 某些 布局特性，【Z轴方面】通过触发SC可以使元素自身 脱离 父元素的文档流布局特性。

    

    存在四种类型的FC：

        BFC 块级格式化上下文，只有块元素参与， 它规定了内部的块元素如何布局。

        IFC 行内格式化上下文，只有行元素参与， 它规定了内部的行元素如何布局。

        FFC 弹性盒格式化上下文

        GFC 网格格式化上下文

    

    BFC：

        触发方式：

            根元素：html

            浮动：float的值不是none

            定位：position的值不是static、relative

            块级容器：display的值是inline-block、table-caption、table-cell

            overflow：overflow的值不是visible

        作用：

            避免上下外边距重叠

            清除浮动，解决浮动元素高度塌陷

    IFC：

        触发方式：

            块级元素中仅包含行内元素

    FFC：

        触发方式：

            display: flex / inline-flex的容器

    GFC：

        触发方式：

            display: gird / inline-grid的容器    

七、说一说对flex的了解？

    容器：开启flex布局的元素

    项目：容器内的子元素

    容器分主轴与侧轴，项目默认从左到右、从上到下排列

    容器的属性：

        flex-direction 设置主轴的方向

        justify-content 设置主轴的子元素排列方式

        align-items 设置侧轴上的子元素排列方式（单行）

        align-contnet 设置侧轴上的子元素的排列方式（多行）

        flex-wrap 设置子元素是否换行

        flex-flow 是flex-direction和flex-wrap属性的复合属性

    

    项目的属性：

        flex 是flex-grow、flex-shrink和flex-basis属性的复合属性

            (1) flex-grow:   定义项目的扩展比率

            (2) flex-shrink: 定义项目的收缩比率

            (3) flex-basis:  定义项目的默认基准值

        align-self 设置项目在交叉轴上的对齐方式，可覆盖align-items属性

        order 设置项目的排列顺序

八、说一说外边距相关问题及解决方式？

    兄弟上下外边距重叠：

        1、给一个元素外面套一个开启BFC的父元素

        2、在兄弟元素间添加内容

    父子上下外边距重叠：

        1、给父元素开启BFC

        2、在父元素内第一行或最后一行添加内容

        3、给父元素添加Padding

        4、给父元素添加Border

九、说一说什么是页面的回流、重绘？

    页面渲染流程：解析DOM树 - 解析样式结构体 - 构建Render渲染树 - 绘制Render渲染树

    回流(页面布局变化)：当前元素改变了自身的宽高、布局、显示隐藏，需要重新构建渲染树

    重绘(元素外观变化)：当前元素改变了自身的外观，但是没有改变页面布局，不需要重新构建渲染树，只需要浏览器重新绘制，比如：改变了背景色

    回流必定引起重绘，但重绘不一定会引起回流。

    如何优化：

        1. 【合并多次操作】将多次操作节点、多次改变样式属性的操作合并成一次操作。

        2. 【脱离文档流】将需要多次重排的元素，脱离文档流，使它的变化不会影响到其他元素。

        3. 【先隐藏再操作】由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行多次操作时，可以先隐藏它，操作完成后再显示。

十、说一说css优先级？

    从引入方式方面：行内style > 内嵌<style> > 链入<link>

    从选择器权重方面：

        ！important > 行内选择器 1000 > Id选择器 100 > class选择器=属性选择器=伪类选择器 10 > 标签选择器=伪元素选择器 1 > 继承=通配符选择器 0

        当权重相等时，按照就近原则

        优先解析权重高的选择器，不会出现权重进位：比如，当11个class选择器和1个Id选择器在一块时，优先解析的是Id选择器，并不会出现所谓的11个class选择器大于Id选择器的问题

        使用 复合选择器 时权重计算方式：后代、父子、兄弟、交集，权重相加；并集，权重分开计算

十一、说一说哪些属性可以被继承？

    color

    font-xxx

    line-xxx

    text-xxx

十二、说一说如何画一个三角形？

    .triangle{

        width: 0;

        height: 0;

        border: 100px solid transparent;

        border-left-color: red;

    }

十三、说一说如何实现6px字体？

    .font{

        font-size: 12px;

        transform: scale(.5);

    }

十四、说一说移动端如何画一个0.5px的边框？

    1、通过缩放0.5倍

        border: 1px solid red;

        transform: scaleY(.5);

    2、通过50%背景渐变实现

        height: 2px;

        background-image: linear-gradient(0deg, red 50%, transparent 50%);

- END -