CSS三大特性 ：继承、优先级、层叠

继承：子类继承父类元素样式

优先级：不同选择器的权重比不一样

层叠：选择器数量（权重）相同时，后者覆盖前者

1.对盒模型的理解

:o:可以将页面中的元素看成一个个的盒子box，每个盒子由 content padding border 和margin组成，这种盒子又可以分成两种，一种是W3C标准盒模型，一种是IE盒模型。

标准盒模型： 盒子总宽度 = width（内容） + padding + border + margin 高度同理

IE盒模型： 盒子总宽度 = width(content + padding + border) + margin 高度同理

Box-sizing 可以设置一个盒子的总宽高的计算方式，也就是以那种模型形式计算

Box-sizing：content-box 默认值，和标准盒模型一致

        border-box  和IE盒模型一致

        inherit 从父元素那继承

示例：

.box{
    width:200px;
    height:200px;
    padding:10px;
    没有设置Box-sizing，所以默认以标准盒模型方式计算，时间看到盒子的宽度为220px,因为 显示的总宽度 = content + padding
}
.box{
    width:200px;
    height:200px;
    padding:10px;
    Box-sizing: border-box;

    设置Box-sizing:border-box，所以默认以IE盒模型方式计算，时间看到盒子的宽度为200px,因为 显示的总宽度 = width(content + padding)
}

2.块级元素与内联（行内）元素

:boom:块级元素指单独占满一行的元素，display值为block、table、list-item等，如div、ul、li、p、h1标题等

:boom:内联元素又叫行内元素，display值默认为inline、inline-block、inline-table、table-cell

:boom:实际开发中把display计算值为block的元素叫块级元素，计算值为inline、inline-block、inline-table、inline-cell的元素叫做内联元素

:boom:特征

• display：block；块级元素，独占一行，可以设置宽高，不设置宽高时宽为父元素大小
• display: inline; 行内元素，不独占一行，无法设置宽高，宽高由内容决定
• display：inline-block；行内元素，不独占一行，可以设置宽高，不设置宽高时大小由内容决定
• display：none；元素不被显示
• display：table-cell；元素被当做表格单元格，特征和inline-block一样
• display：list-item; 元素被当做列表显示，独占一行，可以设置宽高，不设置时宽撑满一行

:o:常见块级元素：div、table、h1-h6、ol、ul、li、p、tr、form、address（地址）、center（居中对齐）、dl（定义列表）、menu（菜单列表）、pre（格式化文本）

:o:常见行内元素：a、img、span、input、label、textarea（多行文本输入框）、i（斜体）、b（粗体）、br（换行）、u（下划线）、big（大字体）em（强调）、strong（粗体强调）、select（项目选择）、

3.选择器有哪些，优先级，哪些可以继承

:o:常用的选择器

1. id选择器（#box）
2. 类选择器（.one）
3. 标签选择器（div）
4. 后代选择器（#box div）
5. 子代选择器（div>div）
6. 相邻同胞选择器（.one + .two）选择.one之后的.two元素
7. A~B（波浪号）全局选择前面有A元素的所有B标签（A和B必须有相同的父元素）
8. 群组选择器（div，p）选择所有div和p标签元素
9. 属性选择器：[attribute]选择带有attribute属性的选择器， [attribute = value]选择属性 attribute = value 的属性
10. 伪类选择器：当元素处于某种状态时能为其添加对应样式的选择器就叫伪类选择器，用 : 表示
    1. :link 选择未被访问过的链接
    2. :visited 已被访问过的链接
    3. :active 选择活动链接（目前选中的）
    4. :hove 鼠标浮动其上的元素
    5. :focus 选择具有焦点的
    6. :first-child 首个子元素 父>div:nth-child(n)父元素下的第n个div
11. 伪元素选择器：能为某元素添加逻辑上存在但实际文档树上又不存在的元素的选择器，用 :: 表示
    1. ::first-letter表示被选元素的首字母 p::first-letter{color:red}
    2. ::first-line 元素的首行
    3. ::before 被选元素的前面插入内容 P::before{ content: "123456";}
    4. ::after 被虚线元素的后面插入内容 P::after{ content: "123456";}

:o:选择器优先级

！importer > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符(*) > 继承 > 浏览器默认样式

:o: 优先级的计算

优先级的计算由A、B、C、D 的值来决定，规则如下

1. 如果有内联样式，A=1，否则A=0
2. B的值等于ID选择器出现的次数
3. C的值等于类选择器，属性选择器和伪类选择器出现的总数
4. D的值等于标签选择器和伪元素选项的总次数 例： #nav-global > ul > li > a .nav-link == (0,1,1,3)

比较规则： 从左到右每位比较，大的优先级就更大，如果相同则比较下一位，四位都相同时则后者样式覆盖前者

:o:css中不能被继承的属性

1. display
2. 文本属性：vertical-align text-decoration text-shadow white-space(属性设置如何处理元素内的空白,值有：nowrap) unicode-bidi
3. 盒模型属性
4. 背景属性 background-image background-repeat background-position background-color等
5. 定位属性 float position 清除浮动等
6. 生成的内容属性 content counter-reset counter-increment
7. 轮廓样式属性等 outline-style outline-width outline-color outline
8. 页面样式属性： size page-break-before page-break-after

:o:css中能被继承的属性

1. 所有元素可继承：visibility和cursor
2. 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
3. 块状元素可继承：text-indent和text-align
4. 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
5. 表格元素可继承：border-collapse

4.css单位

:o:补充：设备独立像素不等于设备物理像素，她是计算机的一个抽象概念，在前端方面可以将它等同于css像素。

当写上meta标签后，width=device-width（网页宽度=设备宽度），使css像素与设备像素链接起来，即css像素等于设备独立像素，例如像素比为2的iPhone6，width=375px时即可铺满整个宽度为750物理像素的iPhone6屏幕，这也是为社么拿到UI稿后要把长宽都除于2的原因，因为UI稿是的单位是设备物理像素，而前端用的是css像素（等同于设备独立像素），所以要根据比值进行转换。

:o:像素比（DPR，可由 window.devicePixelRatio获得）：一个方向上占满屏幕所需的设备物理像素/一个方向上装满屏幕所需的设备独立像素（css像素）的比值；例如：DPR==2，则表示一个物理像素==四个设备独立像素（两个方向上的）

:o:视口单位：vw（浏览器可见视口，window.innerWidth，移动端指的是布局视口）1vw == 1/100视口宽度，vh同理

:o:em,相对单位，基于父节点的字体大小，如果自身由定义font-size则按自身的来，没有就1em=父节点字体大小，都没由则等于浏览器默认的字体大小。

:o:rem,相对单位，基于根节点html元素的字体大小font-size来调整。

:o:rpx,微信小程序解决自身自适应屏幕尺寸的尺寸单位，微信小程序规定屏幕尺寸宽度固定为750rpx。

:o:ppi,每英寸像素，就是像素密度，屏幕分辨率为X乘于Y，则PPI＝ｘ的平方加上Y的平方之和后开根号，再除于屏幕尺寸（对角线长度，单位为英寸）

5.css中有哪些方式可以隐藏页面元素，区别

1. display: none ,原有空间会被占去，无法相应事件，会导致重排重绘。
2. visibility(可见度)： hidden，占有原空间，无法相应事件，不会重排但会重绘。
3. opacity（不透明度）：透明度为0，占有原空间，可相应事件，不会重排但会重绘。
4. position：absolute，top:-9999px,left:-9999px
5. clip-path:裁剪，clip-path:polygon(00,00,00,00)
6. 直接设置长宽为0，等于无，会重排重绘。

6.谈谈对BFC的理解

:o:BFC（Block formatting Context）,全称块级格式化上下文。我的理解是，它是浏览器再渲染文档页面布局时对块级元素布局排列的一种规则，标准。 :o:BFC触发条件

1. 根元素，即HTML元素（html标签就是一个块级格式上下文，所以内部元素要遵守BFC的渲染规则）
2. 浮动元素，float值为left，right会触发该块以BFC渲染规则为标准。
3. position值为absolute和fixed时
4. overflow，值为auto，scroll，hidden，不为visible时
5. display值为flex,table,grid,inline-block,inltable-cell,table-capition,inline-table,inline-flex,inline-grid时

:o:BFC渲染规则

1. html元素内部盒子会在垂直方向上一个接着一个布局放置（标准流）
2. 处于同一个BFC下的相邻盒子的margin会重叠，以margin较大的为实际布局，如相邻的两个盒子margin，一个下margin为50px，一个上margin为100px，实际页面显示margin为100px。
3. 每个元素的左边距与父元素的左边界接触（从左到右）即使浮动也是如此（应该就是子元素不会超出父元素，浮动元素也不例外，但绝对定位的元素通过设置四个方向的偏移量可以超出父元素）
4. BFC的区域不与float元素的区域重叠
5. 计算BFC高度时，浮动元素的高度也会被计算在内
6. BFC就是页面上的一个隔离独立容器，容器里面的子元素不会影响外面，外面的也不会影响到里面，两个BFC之间也不会相互影响。

:o:应用场景

1. 解决外边距重叠问题，利用规则6和触发条件4，给相邻元素的其中一个添加一个外div，属性overflow：hidden，使其成为一个新的BFC，根据规则6解决问题
2. 解决浮动元素高度塌陷的问题：利用规则5，给父元素添加属性overflow：hidden，使其符合BFC标准
3. 解决只适用外栏布局

//html
<div class=aside>aside</div>
<div class=main>main</div>
//css
body{width:300px;position:relative;}
.aside{width:100px,height:150px;float:left}
.main{height:200px;background-color：red;}

上面效果：aside浮动，main占了它的原位置，main有一部分被aside遮住

利用规则4，给main加一个overflow：hidden属性，布局变正常，不会被遮住。

7.flex布局

:o:flex是Flex Box的缩写，意为弹性盒模型，通过将css属性display：flex，可将其设为弹性容器，它的子元素会自动变为弹性盒的成员项目item

:o:弹性容器的属性有：

1. flex-direction： row(默认) | row-reverse(右到左) | colume | colume-reverse
2. flex-wrap: nowrap(默认) | wrap | wrap-reverse
3. flex-flow: | 前两者的简写模式
4. justify-content：flex-start(默认值，从左到右) | flex-end | center | space-between(两端对齐，项目间间隔相等) | space-around(项目两侧间隔相等，所以项目间的间隔是两端变宽的一倍) justify：两端对齐
5. align-items：定义项目在交叉轴上的对齐方式 flex-start | flex-end | center | baseline（项目第一行文字的基线对齐） | stretch（默认值，拉长）
6. align-content：对整体内容的对齐，项目的行数必须 >= 2行/列，否则该属性无效。flex-start | flex-end | center | space-between | space-around | stretch。

:o:项目属性

1. order：定义项目显示排列顺序但不改变其文档（HTML）结构，数值越小排越前，默认值为0，如果此时有一位-1，则其排最前
2. flex-grow：项目放大比例，默认都为0，即有剩余空间也不放大，数值越大，当有剩余空间时放得越大，遵循数值关系
3. flex-shrink（shrink：缩小）：定义项目的缩小比例，默认值为1，空间不足时数值越大缩得越小。
4. flex-basis（basis：基础）：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本身大小，也可以设置和width或height一样的值，则该项目占据固定的值
5. flex：属性是flex-grow、flex-shrink、flex-basis的简写模式，默认值为 0 1 auto， 有两个快捷键 auto（1 | auto）、none（0 0 auto）建议优先使用这个属性，而不是分别写，因为浏览器会根据这属性推算相关值
6. align-self：允许单个项目和其他项目有不同的对齐方式，可以覆盖父元素的align-items属性，默认值为auto，即由父元素的align-items决定，值：auto | flex-start | flex-end | center | baseline | stretch

8.grid布局

:boom:grid布局即网格布局，它将容器划分为行和列，产生单元格，然后指定项目在哪个单元格，可以看做“二维布局”

:o:grid容器属性

1. display：grid、inline-grid（不独占一行）
2. grid-template-column（设置列数）：100px 100px 100px ；表示3列，每列宽100px，也可用%，也能混搭使用；也可用repeat（）函数，repeat（3，100px）表示建立3列，每列100px，还有更多简便的写法。
3. grid-template-rows（设置行数，用法与上同）
4. grid-row-gap（设置行间距）：10px;
5. grid-coloumn-gap(列间距)；
6. grid-gap（行列间距）：10px 10px;
7. grid-template-areas：（用于定义区域，一个区域由单个或多个单元格组成，要配合项目属性grid-area：指定元素在哪个区域才能看出效果）
8. grid-auto-flow：表示将子项目用行排列还是用列排列。默认row，row dense表示先行后列并且尽可能填满格子
9. justify-items：确定单元格内容的水平位置
10. align-items：确定单元格内容的垂直位置
11. place-items： 上两者的简写模式
12. justify-content：对整个容器内容整体的操作
13. align-content：对整个容器内容整体的操作
14. place-content：对整个容器内容整体的操作
15. grid-auto-column、grid-auto-row：有些时候一些项目被指定到网格的外部，这是浏览器会自动生成多余的网格。如划分好网格为3*3，但8号项目被指定到第四行，9号项目在第五行，这是会自动生成多余的网格。

:o:项目属性

1. grid-column-start：左边框所在垂直网格线
2. grid-column-end：右边框所在垂直网格线
3. grid-row-start：上边框所在水平网格线
4. grid-row-end：下边框所在水平网格线

通过定位哪根网格线可以指定项目的位置，除可以用数字指定网格线位置，也可以用网格线的名字，也可以用span 2，表示跨越2格

5. grid-column：简写形式，/ 如 1/3
6. grid-row：简写形式，/ 如 2/4
7. grid-area：指定项目放在哪一块区域，值为区域名，和容器grid-template-areas相配合，也能写成///如：1/1/3/3
8. justify-self:设置单元格内容水平位置
9. align-self：垂直位置 start | end | center | stretch
10. place-self：简写形式

9.元素水平和垂直居中对齐方法有哪些，不定宽高呢

:o:分

1. 内联元素居中布局
2. 块级元素居中布局

:o:内联元素居中布局

:boom: 水平居中：

• 行内元素可设置：text-align: center;
• flex布局： 父元素：display：flex；justify-content：center； :boom: 垂直居中:
• 单行文本父元素确认高度：height===line-height
• 多行文本父元素确认高度：display：table-cell；vertical-align：middle

:o:块级元素居中布局

:boom:水平居中：

• margin: 0 auto;(定宽)
• 定位 + left(偏移量)：50% + transform：translateX(-50%)或者margin-left：-50%;
• flex布局

:boom:垂直居中

• position:absolute + top(偏移量)：50% + transform：translateY(-50%)或者margin-top：-50%;
• flex布局
• 父元素：display：table-cell; 子元素display：inline-block
• grid布局：父元素：display：grid； align-items：center; justify-content: center; 子元素居中

10.如何实现两栏布局中间自适应，三栏布局中间自适应

:boom:注意，HTML的width默认是浏览器的宽度100%，height为0，body如果没有设置默认值和HTML一样

:o:两栏布局： :boom:左边定宽，右边自适应

<div id="container" class="clearfix">
    <div id="left"></div>
    <div id="right"></div>
</div>

/* 1 */
#left {
    width: 300px;
    height: 300px;
    background-color: orange;
    float: left;
}

#right {
    /* 不给宽度，默认会自动占满 */
    height: 300px;
    margin-left: 310px;
    background-color: skyblue;
}

/* 2 */ 
#container{
    position: relative;
}
#left {
    width: 300px;
    height: 300px;
    background-color: orange;
    position: absolute;
}

#right {
    /* 不给宽度，默认会自动占满 */
    height: 300px;
    margin-left: 310px;
    background-color: skyblue;
}

/* 3 */
#left {
    width: 300px;
    height: 300px;
    background-color: orange;
    float: left;
}

#right {
    height: 300px;
    /* 触发BFC */
    overflow: hidden;
    background-color: skyblue;
}
/* 4 */
#container{
    display: flex;
}
#left {
    width: 300px;
    height: 300px;
    background-color: orange;
}
#right {
    flex: 1;
    background-color: skyblue;
}
/* 5 table */
#container{
      width: 100%;
      display: table;
    }
    #left {
      display: table-cell;
      width: 300px;
      height: 300px;
      background-color: orange;
    }
    #right {
      display: table-cell;
      height: 300px;
      background-color: skyblue;
    }

:boom:左边不定宽，右边自适应

用 1.flex 布局 ，左列不要给定宽度，让它由内容撑开即可 2. 浮动 + BFC

:o:三栏布局：

1. 两边使用float，中间只需给定左右margin即可自适应铺满。缺点：文档结构固定，中间内容栏最后加载

<div id="container" class="clearfix">
<div id="left"></div>
<div id="right"></div>
<div id="centent"></div>因为div会独占一行，所以content只能放在最后
</div>

    #left {
    width: 300px;
    height: 300px;
    float: left;
    background-color: orange;
}
#right {
    width: 300px;
    height: 300px;
    float: right;
    background-color: skyblue;
}
#centent{
    height: 300px;
    margin: 0 310px;
    background-color: greenyellow;
}

2. 两边使用absolute，中间使用左右margin（和上同理）

3. 两边同样是浮动，中间元素加上overflow：hidden; 触发BFC（和两栏布局同道理）

4. flex布局：父元素：display：flex；justify-content：space-between；左右两栏定宽，中间栏设置属性 flex: 1;

5. table布局

<div id="container" class="clearfix">
        <div id="left"></div>
        <div id="centent"></div>
        <div id="right"></div>
    </div>

    #container {
            width: 100%;
            display: table;
        }

        #left {
            display: table-cell;
            width: 300px;
            height: 300px;
            background-color: orange;
        }

        #right {
            width: 300px;
            height: 300px;
            display: table-cell;
            background-color: skyblue;
        }

        #centent {
            height: 300px;
            background-color: greenyellow;
        }

6. flex实现圣杯布局 主要根据 flex项目的order值越小显示时排在越前面，但HTML结构不改变，这样就达到了优先加载页面内容的目的了

<div id="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

#container{
    display: flex;
}
.left {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    order: -1;
}
.right {
    width: 100px;
    height: 100px;
    background-color: aqua;
}
.center {
    flex: 1;
    height: 100px;
    background-color: rgb(165, 77, 138);
}

7. 圣杯布局（之所以叫圣杯局，最重要的就是html结构中，内容元素是放在最前面的，这样HTML解析的时候就能最先一步将内容呈现给用户）

<div id="container" >
    <div id="centent"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

#container{
    /* 第二步 */
    margin-left: 300px;
    margin-right: 300px;     
    /* 注意，这里不能加上width：100%；不然宽度就会被确定为父元素大小，子元素center也会跟着确定大小，，就无法自适应宽度了 */
}
#centent{
    /* 第一步 */
    width: 100%;
    height: 300px;
    float: left;
    background-color: greenyellow;
}
#left {
    /* 第一步 */
    width: 300px;
    height: 300px;
    float: left;
    background-color: orange;
    /* 第三步 */
    margin-left: -100%;
    /* 第四步 */
    position: relative;
    left: -300px;

}
#right {
    /* 第一步 */
    width: 300px;
    height: 300px;
    float: left;
    background-color: skyblue;
    /* 第三步 */
    margin-left: -300px;
    /* 第四步 */
    position: relative;
    right: -300px;
}

8. 双飞翼布局(双飞翼布局没有父元素包裹，但内容元素会被包裹)

<div id="main">
    <div id="centent"></div>
</div>
<div id="left"></div>
<div id="right"></div>

/* 第三步 给内容元素加个父元素并将内容元素的浮动和宽度属性转移到它身上*/
#main {
    float: left;
    width: 100%;
}
#centent {
    /* 第一步 
width: 100%;
height: 300px;
float: left;
*/
height: 300px;
/* 第四步 */
margin-left: 300px;
margin-right: 300px;
background-color: greenyellow;

}

#left {
    /* 第一步 */
    width: 300px;
    height: 300px;
    float: left;
    background-color: orange;
    /* 第二步 */
    margin-left: -100%;
}

#right {
    /* 第一步 */
    width: 300px;
    height: 300px;
    float: left;
    background-color: skyblue;
    /* 第二步 */
    margin-left: -300px;
}

11.css3新增了哪些新特性

1. 盒模型 box-sizing：border-box、content-box、inherit
2. 弹性布局：flex
3. 新增选择器：如：属性选择器[attribure=value] (选择所有属性值为value的元素)、如伪类选择器：:nth-child（n）（选择第n个元素）、:last-child（选择最后一个元素等等）
4. 新增样式
   • :boom:边框属性
   • border-ridius（边框圆角）、box-shadow（添加阴影）、border-image（图片边框）
   • :boom:背景属性
   • background-clip（背景从哪个区域开始显示）：border-box、padding-box、content-box、no-clip（默认，等于border-box）；
   • background-origin（用于设置图片以哪个角度对齐）：border-box、padding-box、content-box
   • background-size：contain（维持长宽比）、cover（保持长宽比放大以铺满元素）、100px 100px(缩放指定大小)、50% 100%（同理）
   • background-break（控制背景怎样不同的盒子中显示）
   • :boom:文字属性
   • word-wrap：normal（与浏览器默认相同）、break-all（允许单词内换行）
   • text-overflow：clip（超出边框的直接剪掉）、ellipsis（用省略号代替）、text-shadow等
   • :boom:颜色
   • color：rgba(32,23,12,0.5)、color：hala(色相，饱和度，亮度，透明度)
5. transition 过渡
   • 简写：transition： 要过渡的属性名 花费的时长 效果曲线（默认ease慢-快-慢） 延迟时间
   • 分开写：transition-property：width；transition-duration：1s；transition-timing-function：linear；transition-delay：2s;
6. transform 转换
   • transform-origin（转换点）：（50%，50%，0）（默认中心点）
   • transform：translate（120px,50%）位移
   • transform：scale（2，0.5）缩放
   • transform：rotate（0.5turn）旋转、skew（30deg,20deg）倾斜
7. animation 动画
   • 定义动画，如

       @keyframes 动画名 {
           from{
               属性
           }
           to{
               属性
           }
       }
   

   • animation-name：动画名
   • animation-duration：持续时间
   • animation-timing：速度函数
   • animation-delay：延迟时间
   • animation-iteration-count：执行次数（infinite：无限循环）
   • animation-direction：执行方向
   • animation-paly-state：播放状态
   • animation-fill-mode：填充模式
   • :boom:简写模式
   • animation：name duration timing-function delay iteration-count direction
8. 渐变
   • background-image: linear-gradient(#e66465, #9198e5)（线性渐变）、radial-gradient(red, yellow, green)（径向渐变）;
9. 多列布局、媒体查询等等

12.css3常见动画有哪些，实现方式

:o:transition实现渐变动画 :o:transform实现转动画，一般搭配transition使用，transform无法用于inline元素 :o:animation实现自定义动画

• 定义： keyframes 名字{ form{

  }
  to{
  
  }
  或者使用百分比形式
  0%{
  
  }
  20%{
  
  }
  100%{
  
  }
  

  }

• 使用： animation：name duration timing-function delay iteration-count direction

13.回流（重排）跟重绘，怎么触发

:boom:回流：浏览器的布局引擎会根据元素的样式计算出元素盒子的大小和所在位置

:boom:重绘：浏览器根据回流所计算出的元素盒子的大小、所在位置等相关属性特征进行绘制

:boom:浏览器解析渲染机制：

1. 解析HTML文档生成DOM树，解析css生成CSSOM树
2. 将DOM树和CSSOM树结合生成渲染树（Render Tree）
3. Layout（回流/重排）根据生成的渲染树进行回流，得到元素的大小和位置等几何信息
4. Padding（重绘）根据渲染树和回流得到的几何信息进行绘制，得到元素的绝对像素
5. Display，将像素信息发送个GPU，展示在页面

:boom:重排（回流）触发机制

当页面布局和元素的大小位置等集合信息发生该表时就会触发重排

1. 添加和删除可见dom元素
2. 元素的位置和尺寸（宽高、边框、内外边距等）发生改变
3. 内容发生改变，如文本变化，更换图片等
4. 浏览器窗口尺寸发生改变
5. offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 这些属性都是通过即使计算得到的，所以获取这些属性值时也会进行重排

:boom:重绘触发机制

1. 修改颜色
2. 文本方向的修改
3. 阴影的修改

:boom:浏览器优化机制

1. 更改多个元素样式时不要通过js进行多次修改，可以通过类名合并的方式一次性添加一个类（元素.classList.add（‘类名’））
2. 对于一些复杂的动画元素可以将其 position：absolute、fixed 或设置浮动，使其脱离文档流，减少对其他元素的影响
3. 使用css3硬件加速，配合transform、opacity、filters等使用的动画不会引起重排重绘，因为这些属性会导致GPU开启一个新的复合图层，不影响原来的文档流。
4. 一些需要多次调用的常量如 offsetWidth 等可以用一个变量存储起来，不要每次需要都重新调用API获取
5. 需要进行多项操作时可以将其display设置为none，操作完成后再更回，这种离线操作也能减少重排重绘

14.什么是响应式设计，如何做

:boom:响应式设计就是页面布局会根据显示设备环境（如系统平台、屏幕尺寸、屏幕定向等）的改变而进行相应的布局调整达到一个好的显示效果。 :boom:原理：响应式的基本原理就是通过媒体查询检测不同设备尺寸并进行相应处理，为了处理移动端页面头部必须带有meta声明viewport， :boom:实现方式

1. 媒体查询
2. 百分比
3. vh/vw
4. rem :boom:媒体查询：

@media type(all<所有设备类型>/print(打印机)/screen(电脑、平板、手机等屏幕)/speech(屏幕阅读器)) and （max-width：480px）{
    html{
        font-size: 18px;
    }
}

:boom:百分比：将元素度量单位改为百分比形式 :boom:vw/vh：将元素度量单位改为vw/wh形式 :boom:rem：可以通过媒体查询相结合的方式，如

@media screen and (max-width:375px){
    html{font-size:16px;}
}
@media screen and (max-width:414px){
    html{font-size:18px;}
}

:o:为了更准确监听设备可视窗口的变化，可以在css之前插入script标签，动态如下

// 在开发时先选定一个设备，如iPhone6 375，此时html的字体大小16px，页面能完美显示，那么就确定比值 ratio = 16/375 = x/新设备宽度（新设备宽度可以获取） 所以 x = ratio * 新设备宽度
function init(){
    const ratio = 16/375
    var width = document.doucmentElement.clientWidth //获取屏幕宽度
    document.doucmentElement.style.fontSize = ratio * width + 'px';
}
init()
window.addEventListener('resize',init)  //监听手机窗口尺寸改变事件
window.addEventListener('onorientationchange',init)  //监听手机改变朝向事件

无论窗口如何改变，1rem = width / 10 + 'px'

除此之外也能使用一些主流框架提供的栅格布局来实现响应式，如element-ui、antd等

1px像素问题

问题描述：设置了1px边框，但在有些机型上显示感觉很粗，不只1px大小,这原因就是不同像素比的不同（DPR），本质就是上面的适配问题

:boom:首先要知道的就是 UI 搞上的1px像素指的是物理像素，DPR = 单方向物理像素/单方向设备独立像素（css像素），开发时必须遵循这个规则 若 dpr = 2 ,哪1px举例，也就是说 1px/css像素 = 2 ，所以css像素 = 0.5px 才能在屏幕正常显示 ，所以开发时如果固定写死1px，那么不同设备显示大小就不一样，因为不同设备DPR值是不一样的，所以这1px要动态改动大小

获取DPR的方式：

1. window.devicePixelRatio

2. 媒体查询

 @media only screen and (-webkit-min-device-pixel-ratio:2){
    .border-1px:before{
        transform: scaleY(0.5);
    }
}

:boom:解决方法1：用媒体查询,通过媒体查询获取DPR，做出响应

.setOnePx{
  position: relative;
  &::after{
    position: absolute;
    content: '';
    background-color: #e5e5e5;
    display: block;
    width: 100%;
    height: 1px; /*no*/
    transform: scale(1, 0.5);
    top: 0;
    left: 0;
  }

15.提高css性能的方法有哪些

主要有：

1. 内联首屏关键css
2. 异步加载css
3. 资源压缩
4. 合理使用选择器
5. 减少使用昂贵的属性
6. 不要使用@import

:o:首屏关键css写成内联样式 首屏加载时间直接影响用户体验，用内联样式可以使浏览器下载完HTML后直接渲染，如果是外部css文件，会在解析HTML过程中遇到才会下载，然后再渲染

:o:异步加载css 在css文件请求下载，解析完成之前，css会阻塞渲染，浏览器不会渲染任何已处理的内容，前面加载内联代码后就可以采用异步加载的方案，主要如下

<link rel='stylesheet' href='mystyle.css' media='noexist' onload="this.media = 'all'">
设置link标签media属性值为noexist，浏览器会认为当前样式不适合当前类型，会在不阻塞页面渲染的情况下再进行下载，加载完后将media值改为screen或all，从而让浏览器正常解析css文件

<link rel='alternate(备用) stylesheet' href='mystyle.css' media='noexist' onload="this.rel = 'stylesheet'">
和上面同理，将rel属性值改为 alternate stylesheet ，首屏加载之后在改回 stylesheet 也能实现异步加载。

:o:资源压缩 利用webpack、gulp/grunt、rollup等模块化工具将css代码进行压缩，使文件体积减小，减低加载时间

:o:合理使用选择器

• css匹配规则从右到左，嵌套越多查找所花的时间就越多
• 不要嵌套使用过多的选择器，多使用id选择器
• 通配符和属性选择器效率低，避免使用

:o:减少昂贵属性的使用 在页面重绘时，昂贵属性如 box-shadow 、border-radius 、filter、透明度、nth-child等会减低浏览器的渲染性能

:o:不要使用@import css文件有两种引入方式，一种是link标签引入，一种是用@import，@import会影响浏览器的并行下载，使页面加载时间增长，而且多个@import可能会导致下载顺序紊乱

:o:其他 减少重排重绘操作，css动画尽量使用transform和opacity（不透明度）来实现，避免写重复的样式，把icon图片转成base64编码

16.如何实现单行或多行文本溢出的省略号形式

:o:当行文本溢出实现：

text-overflow: ellipsis; /* 规定文本溢出以省略号代替被修剪的文本 */

white-space：nowrap; /* 设置文本在一行显示不能换行 */

overflow: hidden; /*超出宽度的内容隐藏 */

:o:多行文本溢出 基于行数截断

webkit-line-clamp: 2; 用来限制块级元素显示文本的行数，需要结合其他webkit属性使用
display: webkit-box; 和上面结合使用，将对象作为弹性伸缩盒子模型显示
webkit-box-origin: vertical; 和上面元素结合使用，设置伸缩盒对象的子元素的排列方式
overflow：hidden;
text-overflow: ellipsis;

17.如何使用css完成视觉差滚动效果

:boom:视差滚动指多层背景以不同的速度移动，形成立体的运动效果，可以把网页分成背景层，内容层和悬浮层

css实现方式
1.background-attachment（附着）
2.transform：translate3D

background-attachment：scroll（默认值，背景图像会随着页面其余部分滚动）、fixed（背景图像不会随着页面滚动而移动）、inherit（继承父元素的此属性）

18.css如何画一个三角形，原理

div{
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 50px 50px; (上0 左右50 下50)
   border-color: transparent transparent  skyblue;
}

//空心三角形，如果想要实现一个只有边框是空心的三角形，由于这里不能再使用border属性，所以最直接的方法是利用伪类新建一个小一点的三角形定位上去
.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

:boom:原理：边框实际并不是一条直线，边框间的交接处是以该角点和中心点连接的斜线分开，边框是一个梯形

19.让Chrome支持小于12px的文字方式有哪些

:boom:背景 Chrome中文版浏览器会默认设定页面的最小字号为12px，英文版没有限制。其实中文版也可以在浏览器设置里设置

:boom:解决方案

1. zoom （使用css的zoom（变焦）属性，改变其值大小。需要考虑兼容性，且会触发重排重绘）
2. webkit-transform：scale（）可以适用于定义宽高的元素，行内元素不行，行内块可以
3. webkit-text-size-adjust：none

zoom：0.8;表示缩放到原来的0.8倍，可以改变页面元素的真实尺寸。 :heavy_check_mark:webkit-transform: scale()支持大部分浏览器，缩放不会改变元素所占据的空间大小，页面布局也不会改变。

20.对css预编语言的理解，有哪些区别

:boom:预处理语言本质上是css的超集，它扩充了css语言，增加了诸如变量、混合（mixin)、函数等功能，让css变得更加容易方便维护

:boom:前端优秀的预处理器有：sass、less、stylus

• sass 07年诞生，最早也是最成熟的预处理器，目前已进化到全面兼容css的scss，文件后缀为sass、scss，也可以严格按照sass的缩进方式，省去大括号和分号。
• less 09年诞生，受sass影响较大，用css语法，更容易上手，优点简单
• stylus 是一个css预处理框架，2010年产生，用来给node项目进行css预处理支持

:boom:内容使用频率

1. 嵌套（nested rules）
2. 变量（variable）
3. 代码混合（mixin）
4. 作用域（scope）
5. 代码模块化（module）

:boom:嵌套：三者的嵌套语法都一致，引用父级圈选择器的符号 & 也相同 :boom:变量：less声明变量需以@开头，如 @red: #coo; sass声明变量与less相似，如 $red: #coo; :boom:作用域：声明变量时不要使用同名变量。css预编器会和js一样赋予变量作用域，会先从局部往上一级一级查找 :boom:模块化：就是将css分成各个css文件模块，需要的再引入 语法：@import "路径/xx.scss" @import "路径/xx.less" 文件后缀可省略