CSS常用知识点整理

1、标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同？

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;

1.1rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（1rem=10px）
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁
反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如：p{font-size:14px;font-size:0.875rem;}
(推荐一个单位转换的工具：http://pxtoem.com/)

2、CSS 隐藏元素的几种方法（至少说出三种）

• Opacity : 0 元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
• Visibility:hidden 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
• Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
• Position: 不会影响布局，能让元素保持可以操作;
• Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3、CSS 清除浮动的几种方法（至少两种）

清除浮动主要是为了解决父元素因为子元素浮动而引起的内部高度为0的问题。

清除浮动： 核心：clear:both;

1.使用额外标签法（不推荐使用）

​ 在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

​ a 内部标签：会将父盒子的高度重新撑开

​ b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

2.使用 overflow 清除浮动（不推荐使用）

​ 先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

​ 伪元素：在页面上不存在的元素，但是可以通过 css 添加上去

种类：
:after(在。。。之后)
:before(在。。。之前)

注意：每个元素都有自己的伪元素

.clearfix:after {
    content:"";
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;  /_将元素隐藏起来_/ 
      在页面的 clearfix 元素后面添加了一个空的块级元素
     （这个元素的高为 0 行高也为 0   并且这个元素清除了浮动）
}
.clearfix {
  zoom:1;/_为了兼容 IE6_/  
    // Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。
}

3.1边框塌陷

方法1：增高父元素高度。缺点：高度是定死的，需要不断调整，容易出问题。

.father{
	border: 5px solid salmon;
	height: 110px;
}

方法2：清除父元素部分浮动或添加清除浮动的元素。清除浮动后的元素不受前面元素浮动的影响，继续按块元素排列，撑起父元素。

<p style="clear: both;">123</p>
<!-- 
     clear:left;  :清除左浮动
     clear:right; :清除右浮动
     clear:both;  :左右浮动都清除
-->

方法3：overflow:hidden。给父元素增加overflow:hidden属性后，父元素就被撑起来了。使用简单，但是下拉场景的不适用。

方法4：给父类添加一个伪类:after（推荐使用）

.father::after {
    content: '';
    display: block;
    clear: both;
}

4、页面导入样式时，使用 link 和@import 有什么区别？

1. Link 属于 html 标签，而@import 是 CSS 中提供的

2. 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

3. @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

4. Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

5、伪元素和伪类的区别？

1、伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

​ 伪类使用1个冒号，常见有：:hover，:link，:active，:target，:not()，:focus等。

2、伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；

​ 伪类是给页面中已经存在的元素添加一个类。

::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等
伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使用 :after 这种老语法表示伪元素
综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

6、 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

• 1.id选择器（ # myid）

• 2.类选择器（.myclassname）

• 3.标签选择器（div, h1, p）

• 4.相邻选择器（h1 + p）

• 5.子选择器（ul < li）

• 6.后代选择器（li a）

• 7.通配符选择器（ * ）

• 8.属性选择器（a[rel = “external”]）

• 9.伪类选择器（a: hover, li: nth - child）

*   可继承： font-size font-family color, UL LI DL DD DT;

*   不可继承 ：border padding margin width height ;

*   优先级就近原则，样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:

   !important >  id > class > tag  

   important 比 内联优先级高

CSS3新增伪类举例：

• p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  

• p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
  

• p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  

• p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
  

• p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
  

• :enabled、:disabled 控制表单控件的禁用状态。
  

• :checked，单选框或复选框被选中。
  

7、行内元素和块级元素的具体区别是什么？

块级元素的特点：

• 1.总是从新行开始
• 2.高度，行高、外边距以及内边距都可以控制。
• 3.宽度默认是容器的100%
• 4.可以容纳内联元素和其他块元素。

块级元素：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table

行内元素的特点：

• 1.和相邻行内元素在一行上。
• 2.高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
• 3.默认宽度就是它本身内容的宽度。
• 4.行内元素只能容纳文本或其他行内元素。

行内元素：span、img、button、input、b、q、i、a、em、label

8、 rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

9、垂直居中一个元素

1）水平居中

inline元素：text-align：center
block元素：margin：0 auto
直接absolute：（ left：50% + margin-left：负值）
translateX
flex：（ display: flex; justify-content: center;）

（2）垂直居中

inline元素：height = line-height
absolute：（ top：50% + margin-top：负值 ）
translateY
flex：（display: flex; flex-direction: column; justify-content: center;）

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    position: absolute;
    /*父元素需要相对定位*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    /*设为高度的1/2*/
    margin-left: -100px;
    /*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    position: absolute;
    /*父元素需要相对定位*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*在水平和垂直方向上各偏移-50%*/
}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {
    width: 200px;
    height: 200px;
    background-color: #6699ff;
    margin: auto;
    /*很关键的一步*/
    position: absolute;
    /*父元素需要相对定位*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*让四个定位属性都为0*/
}

方法四：flex 布局居中

body {
    display: flex;
    /*设置外层盒子display为flex*/
    align-items: center;
    /*设置内层盒子的垂直居中*/
    justify-content: center;
    /*设置内层盒子的水平居中*/
    .content {
        width: 200px;
        height: 200px;
        background-color: #6699ff;
    }
}

那么问题来了，如何垂直居中一个 img（用更简便的方法。）

.content {
    //img的容器设置如下
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

10、BFC

• 什么是 BFC

  BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

• 形成 BFC 的条件(满足一个即可)

  • 浮动元素，float 除 none 以外的值
  • 定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-block，table-cell，table-caption,flex
  • overflow 除了 visible 以外的值（hidden，auto，scroll）

• BFC 的特性

  • 内部的 Box 会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由 margin 决定
  • bfc 的区域不会与 float 的元素区域重叠。
  • 计算 bfc 的高度时，浮动元素也参与计算
  • bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

display:flex:

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

11、Sass、LESS 是什么？大家为什么要使用他们？

答案：他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

​ 例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node. js)。

为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

stylus/sass/less 区别：

1. 后缀

默认 Sass 使用 . sass 扩展名，而 Less 使用 . less 扩展名，Stylus 默认使用 . styl 的文件扩展名

2. 语法

3. 变量

• sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和 css 属性是一样的
• Less css 中变量都是用@开头的，其余与 sass 都是一样的
• stylus 对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在 stylus 中不能用@开头

12、 移动端 1px 问题的解决办法

推荐解决方法：媒体查询 + transfrom

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

手机端适配问题

Flex弹性布局
以天猫的实现方式进行说明：它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，宽度自适应，元素都采用px做单位。随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行，这样就实现了『适配』。

13、哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height ;

14、几种常见的 CSS 布局

• 单列布局
• 两列自适应布局
• 圣杯布局和双飞翼布局（三栏布局）
• 伪等高布局
• 粘连布局

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sb6KrHX3-1618403602163)(C:/Users/hffxy/AppData/Roaming/Typora/typora-user-images/image-20210325220800330.png)]

14.1flex:1到底是什么

flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。
flex的默认值为flex:0 0 auto。flex:1相当于设置了flex:1 1 auto。

15、让 Chrome 支持小于 12px 的文字

谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？ 我们的做法是： 针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！

<style>
p span{font-size:10px;
  -webkit-transform:scale(0.8);display:block;}
</style>
<p><span>测试10px</span></p>

16、display:inline-block 什么时候会显示间隙？

答案：间隙产生的原因是因为，换行或空格会占据一定的位置

推荐解决方法：

父元素中设置
font-size:0; letter-spaceing:-4px;

17.png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢

答案：

gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

结论：JPG 适合照片，GIF 适合动画，PNG 适合其他任何种类——图表，buttons，背景，图表等等。

18、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）

19、 css3 有哪些新特性

答案：

1. 选择器

• E:last-child 匹配父元素的最后一个子元素 E。
• E:nth-child(n)匹配父元素的第 n 个子元素 E。
• E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。

2. RGBA

回答此问题，面试官很可能继续问：rgba()和 opacity 的透明效果有什么不同？

3. 多栏布局

<div class="mul-col">
    <div>
        <h3>新手上路</h3>
        <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
    </div>
    <div>
        <h3>付款方式</h3>
        <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
    </div>
    <div>
        <h3>淘宝特色</h3>
        <p>手机淘宝 旺信 大众评审 B格指南</p>
    </div>
</div>

.mul-col {
    column-count: 3;
    column-gap: 5px;
    column-rule: 1px solid gray;
    border-radius: 5px;
    border: 1px solid gray;
    padding: 10px;
}

4. 多背景图

/* backgroundimage:url('1.jpg),url('2.jpg') */

5. CSS3 word-wrap 属性，用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

p.test {
    word-wrap: break-word;//word-break 属性用来标明怎么样进行单词内的断句。
}

6. 文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

7. @font-face 属性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
    font-family: BorderWeb;
    src: url(BORDERW0.eot);
}

@font-face {
    font-family: Runic;
    src: url(RUNICMT0.eot);
}

.border {
    font-size: 35px;
    color: black;
    font-family: "BorderWeb";
}

.event {
    font-size: 110px;
    color: black;
    font-family: "Runic";
}

/* 淘宝网字体使用 */

@font-face {
    font-family: iconfont;
    src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}

8. 圆角

border-radius: 15px;

9. 边框图片

CSS3 border-image 属性

10.盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

11.盒子大小

​ CSS3 box-sizing 属性

12.媒体查询

​ CSS3 @media 查询

13.CSS3 动画

​ @keyframes

@keyframes abc {
    from {
        transform: rotate(0);
    }

    50% {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(360deg);
    }
}

​ animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state */

14、渐变效果

background-image: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
    from(#2a8bbe),
    to(#fe280e));

15.CSS3 弹性盒子模型

• 弹性盒子是 CSS3 的一种新的布局模式。
• CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

16.CSS3 过渡

div {
    transition: width 2s;
    -moz-transition: width 2s;
    /* Firefox 4 */
    -webkit-transition: width 2s;
    /* Safari 和 Chrome */
    -o-transition: width 2s;
    /* Opera */
}

17.CSS3 变换

• rotate()旋转
• translate()平移
• scale( )缩放
• skew()扭曲/倾斜
• 变换基点
• 3d 转换

18.will-change

will-change通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。

属性的取值：

1、auto: 实行标准浏览器优化。

2、scroll-position: 表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

3、contents: 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

4、: 表示开发者希望在不久后改变指定的属性名或者使之产生动画，比如transform 或 opacity。

20、display 有哪些值？说明他们的作用

默认值：inline

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline： 指定对象为内联元素。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。
inline-block： 指定对象为内联块元素。（CSS2）
table： 指定对象作为块元素级的表格。类同于html标签

（CSS2）
inline-table： 指定对象作为内联元素级的表格。类同于html标签 （CSS2）
table-caption： 指定对象作为表格标题。类同于html标签（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签（CSS2）
table-column： 指定对象作为表格列。类同于html标签（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

（CSS2）
table-cell： 指定对象作为表格单元格。类同于html标签

（CSS2） table-row： 指定对象作为表格行。类同于html标签

21、CSS 合并方法

答案：@import url(css 文件地址)

22、CSS 在性能优化方面的实践

1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。

2，减少css嵌套，最好不要套三层以上。

3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。

4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有… 这性能能好吗？当然重置样式这些必须 的东西是不能少的。

6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。

7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。

8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。

9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize. css

10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。

11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，

12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。

23、position 的值， relative 和 absolute 分别是相对于谁进行定位的？

• absolute : 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

• fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

• static 默认值。没有定位，元素出现在正常的流中

• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

• static ：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

• relative ：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

• absolute ：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• fixed ：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

24、知道 css 有个 content 属性吗？有什么作用？有什么应用？

答案：知道。css 的 content 属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content: "."; //这里利用到了content属性
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.clearfix {
    zoom: 1;
}

after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用 clear:both 清除浮动。
那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过 css content 属性实现 css 计数器？

答案：css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合 after / before 伪类实现。

25、 使用 CSS 预处理的优缺点分别是什么？

优点：

• 提高 CSS 可维护性。
• 易于编写嵌套选择器。
• 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
• 通过混合（Mixins）生成重复的 CSS。
• 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

• 需要预处理工具。
• 重新编译的时间可能会很慢。

26、 解释浏览器如何确定哪些元素与 CSS 选择器匹配。

答案：

​ 浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。

​ 例如，对于形如 p span 的选择器，浏览器首先找到所有 <span> 元素，并遍历它的父元素直到根元素以找到 <p> 元素。对于特定的 <span> ，只要找到一个 <p> ，就知道’`已经匹配并停止继续匹配。

27、transition、transform和translate的区别和联系

transition和transform都是一种动画，translate是transform里的一个属性

1.transition（动画效果）

​ transition(要过渡的属性 花费的时间 运动曲线 何时开始)

要过渡的属性：包括长、宽等等，如果是全部属性，则选择"all"

花费的时间：以"s"为单位，如"0.5s"
运动曲线：默认为ease(慢-快-慢),其他属性还包括linear(匀速)、ease-in（慢-快）、ease-out（快-慢）ease-in-out(慢-快-慢)
何时开始：以"s"为单位，如"0.5s"

通常配合伪类来使用，如下：

<style>
.tr1{
        background-color: chocolate;
        width: 100px;
        height: 100px;
        transition: all 2s ease 0s;
    }
    .tr1:hover{
        width: 200px;
    }
</style>
<body>
    <div class="tr1">hello world</div>
</body>

2.transform:变形。改变

          CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)

          扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)

          缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)

          移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

          所有的2D转换方法组合在一起： matrix()  旋转、缩放、移动以及倾斜元素

           matrix(scale.x ,, , scale.y , translate.x, translate.y)      

改变起点位置 transform-origin: bottom left;

综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;

translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：用法transform: translate(50px, 100px)

28、过渡与动画的区别是什么

• transition

  可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果和动画属性

• animation(@keyframe)

  可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

29、文本超出部分显示省略号

// 单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

// 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

30、行内元素和块级元素有哪些

行内元素

一个行内元素只占据它对应标签的边框所包含的空间

一般情况下，行内元素只能包含数据和其他行内元素

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

块级元素

占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

32、解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

.box {
	display: flex;
}

行内元素也可以使用Flex布局

.box {
	display:inline-flex;
}

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

33、回流（Reflow）与重绘（Repaint）

1、回流（重排）：元素的大小或者位置发生改变（当页面布局发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染

如添加或删除可见的DOM元素；
元素的位置发生变化；
元素的尺寸发生变化、
内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；
页面一开始渲染的时候（无法避免）；
 因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流

因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流

2、重绘：只改变自身样式，不会影响到其他元素

元素样式的改变(但宽高、大小、位置不变)
eg：   visibility、color、background-color等

注意：回流一定会触发重绘，而重绘不一定会回流

优化：限制回流和重绘的范围

34、clientHeight、offsetHeight、scrollHeight的区别

clientHeight：元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距

offsetHeight：元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

scrollHeight：元素内容的高度,包括溢出的不可见内容

offsetLeft：返回元素左上角相对于offsetParent的左边界的偏移像素值