CSS 面试题总结

总结了最近的一些面试题和之前的知识点

面试常问

flex中的缩写代表什么

flex是flex-grow,flex-shrink和flex-basis的缩写，flex属性值可以只指定一个属性的值，而另外的属性值采用各自在flex属性中的的初始值，但是有一点要注意的是：flex属性中flex-grow和flex-basis的初始值和它们原始的默认值不同，至于为什么不同，mdn中有明确的说过这样的设计是为了让「flex」缩写在最常见的情景下比较好用。
flex:1—-(flex-grow:0;flex-shrink:1;flex-basis:auto)

水平垂直居中

一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

对于宽高不定的元素，下面两种方法，可以实现元素的垂直和水平的居中

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

1
2
3
4
5
6
7
8
parentElement{
       position:relative;
   }
childElement{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
}

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

(6) gird布局

1
place-items:center

CSS 中的 place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。
(7)文本水平居中：text-algin: center

CSS3 高斯模糊 filter blur

canvas和svg | 使用场景及二者的区别

canvas是H5中新增的标签，官方解释说canvas是一块画布，可以在网页中绘制图像
svg即可缩放矢量图形，什么是矢量图形呢，也就是放大或者缩小不会失真的图形。 svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形

canvas和svg的区别

canvas绘画出来的图形一般成为位图，也就是放大缩小的情况下会出现失真的情况，svg绘制的图形是矢量图，不存在失真的情况

canvas绘制的图形不会出现在DOM结构中，svg绘制的会存在于DOM结构

canvas类似于动画，每次图形的改变都是先清除原来的图形，然后把新的图形画上去，svg则是可以直接通过js来进行某些操作

canvas依赖于分辨率，svg不依赖分辨率

canvas最适合图像密集型的游戏，其中的许多对象会被频繁重绘，svg不适合游戏应用

图片格式,各自优缺点和使用场景

图片格式&&各自优缺点和使用场景 _

link标签和import标签的区别

  1. link是属于html标签，而@import是css提供的
  2. 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
  3. link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
  4. link方式样式的权重高于@import
  5. 使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是 dom可以控制的。

css 两栏布局的实现？

两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式

回答：
两栏布局一般指的是页面中一共两栏，左边固定，右边自适应的布局，一共有四种实现的方式。
以左边宽度固定为 200px 为例
-（1）利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
-（2）第二种是利用flex 布局，将左边元素的放大和缩小比例设置为 0，基础大小设置为 200px。将右边的元素的放大比例设置为 1，缩小比例设置为 1，基础大小设置为 auto。
-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

/*以左边宽度固定为200px为例*/

/*（1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。*/
.outer {
 height: 100px;
}

.left {
 float: left;

 height: 100px;
 width: 200px;

 background: tomato;
}

.right {
 margin-left: 200px;

 width: auto;
 height: 100px;

 background: gold;
}

/*（2）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。*/
.outer {
 display: flex;

 height: 100px;
}

.left {
 flex-shrink: 0;
 flex-grow: 0;
 flex-basis: 200px;

 background: tomato;
}

.right {
 flex: auto;
 /*11auto*/

 background: gold;
}

/*（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为absolute定位，并且宽度设置为
200px。将右边元素的margin-left的值设置为200px。*/
.outer {
 position: relative;

 height: 100px;
}

.left {
 position: absolute;

 width: 200px;
 height: 100px;

 background: tomato;
}

.right {
 margin-left: 200px;
 height: 100px;

 background: gold;
}

/*（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。*/
.outer {
 position: relative;

 height: 100px;
}

.left {
 width: 200px;
 height: 100px;

 background: tomato;
}

.right {
 position: absolute;

 top: 0;
 right: 0;
 bottom: 0;
 left: 200px;

 background: gold;
}

css实现两栏固定中间自适应（和三栏布局一样）

1、利用绝对定位和margin
2、利用浮动和margin–注意：中间一栏必须放到最后。
3、CSS3 flex

博客：css实现两栏固定中间自适应

css 三栏布局的实现？

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式

这里以左边宽度固定为100px，右边宽度固定为200px为例
（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。

（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意：中间一栏必须放到最后。

（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。
三栏布局demo

相关资料：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/*这里以左边宽度固定为100px，右边宽度固定为200px为例。*/

/*（1）利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。*/
.outer {
 position: relative;
 height: 100px;
}

.left {
 position: absolute;

 width: 100px;
 height: 100px;
 background: tomato;
}

.right {
 position: absolute;
 top: 0;
 right: 0;

 width: 200px;
 height: 100px;
 background: gold;
}

.center {
 margin-left: 100px;
 margin-right: 200px;
 height: 100px;
 background: lightgreen;
}

/*（2）利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto*/
.outer {
 display: flex;
 height: 100px;
}

.left {
 flex: 0 0 100px;
 background: tomato;
}

.right {
 flex: 0 0 200px;
 background: gold;
}

.center {
 flex: auto;
 background: lightgreen;
}

/*（3）利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。*/
.outer {
 height: 100px;
}

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

.right {
 float: right;
 width: 200px;
 height: 100px;
 background: gold;
}

.center {
 height: 100px;
 margin-left: 100px;
 margin-right: 200px;
 background: lightgreen;
}

/*（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。*/
.outer {
 height: 100px;
 padding-left: 100px;
 padding-right: 200px;
}

.left {
 position: relative;
 left: -100px;

 float: left;
 margin-left: -100%;

 width: 100px;
 height: 100px;
 background: tomato;
}

.right {
 position: relative;
 left: 200px;

 float: right;
 margin-left: -200px;

 width: 200px;
 height: 100px;
 background: gold;
}

.center {
 float: left;

 width: 100%;
 height: 100px;
 background: lightgreen;
}

/*（5）双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元
素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。*/

.outer {
 height: 100px;
}

.left {
 float: left;
 margin-left: -100%;

 width: 100px;
 height: 100px;
 background: tomato;
}

.right {
 float: left;
 margin-left: -200px;

 width: 200px;
 height: 100px;
 background: gold;
}

.wrapper {
 float: left;

 width: 100%;
 height: 100px;
 background: lightgreen;
}

.center {
 margin-left: 100px;
 margin-right: 200px;
 height: 100px;
}

transition（过渡）和animation（动画）的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，
(1)transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from …. to，而animation可以一帧一帧的。
(2)transition通常和hover等事件配合使用，animation是自发的，立即播放
（3）animation可设置循环次数
（4）animation可设置每一帧的样式和时间，transition只能设置头尾
（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果

Js 动画与 CSS 动画区别及相应实现 （JS动画重绘回流，性能影响）

CSS3 的动画的优点
在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化,代码相对简单
缺点(在动画控制上不够灵活,兼容性不好)

Js动画
JavaScript 的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧
如果动画相较复杂，我们可以采用 JS + canvas 去尝试，能不能实现最后再考虑纯 JS 实现
博客

什么是重绘和回流？（浏览器绘制过程）注意：回流一定会触发重绘，而重绘不一定会回流

什么是回流？

当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流

什么是重绘？

当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘

什么时候会进行回流？

  1. 添加或者删除可见的DOM元素的时候
  2. 元素的位置发生改变
  3. 元素的尺寸发生改变
  4. 内容改变
  5. 页面第一次渲染的时候

列举一些相关的CSS样式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow等

什么时候会进行重绘？

列举一些相关的CSS样式：color、background、background-size、visibility、box-shadow

如何进行性能优化？

  1. 用transform 代替 top，left ，margin-top， margin-left… 这些位移属性
  2. 不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之
  3. 不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流
  4. 避免设置多层内联样式，写个外部类这样只回流一次
  5. 让多次回流的元素脱离文档流比如动画，使用 position 属性的 fixed 值或 absolute 值
  6. 一起变化（同时修改所有需要变化的属性）

如何避免

CSS

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）。

JavaScript

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

博客：浏览器的回流与重绘

Flex –请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？

  1. flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。
  2. 一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。
  3. 我们可以使用flex-direction来指定主轴的方向。（默认是x轴为主轴）（row 行 column列）
  4. 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。
  5. 还可以使用flex-wrap来规定当一行排列不下时的换行方式。
  6. 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。
  7. 还可以使用flex-shrink /flex-grow来指定当排列空间不足时，项目的缩小比例。

博客：Flex布局

css选择器优先级

!important > inline > id > class > tag > *> inherit > default

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 同一级别

!important：大于其他
行内：1000
id选择器：100
类，伪类和属性选择器，如.content：10
类型选择器和伪元素选择器：1
tag 标签选择器 如（body div p li）
全局选择器(如：*号)
通配符、子选择器、相邻选择器：0

同级别的后写的优先级高。

相同class样式，css中后写的优先级高，和html中的class名字前后无关

CSS 中哪些属性是可以继承的

前面通过一段代码来简单看了一下关于继承的一个概念。哪些 CSS 这些属性都可以被继承呢？这里总结出了一下常见被继承的 CSS 属性。

字体属性：font、font-family、font-size、font-style、font-variant、font-weight
字母间距属性：letter-spancing
可见性属性：visibility
文字展示属性：line-height、text-align、text-indent、text-transform
字间距属性：word-spacing

基本选择器

id选择器>class选择器>标签选择器

层次选择器

  1. 后代选择器：在某个元素的后面(都会作用)
1
/*body  p{        background: red;    }*/例：body后的所有p标签背景都会变为红色
  1. 子选择器：(就作用一代)
1
/*body>p{       background:blue;   }*/例：body后面的第一代p标签才有效果，其他嵌套的没有
  1. 相邻兄弟选择器：只有一个，相邻(向下)
1
/*.active+p{        background:blue;    }*/例：类active标签的向下的一个P标签才会作用
  1. 通用兄弟选择器
1
当前选中元素的向下的所有兄弟元素 */    .active ~ p {      background: tomato;    }例：类active后面向下的所有P标签都会作用

结构伪类选择器(避免使用，class,id选择器)

带冒号都是伪类选择器
1 ul li:first-child

1
2
/*ul的第一个子元素*/ul li:first-child {  background: tomato;}
/*ul的最后一个元素*/ul li:last-child {  background: turquoise;}

2 p:nth-child(1) (nth父元素)

1
2
/*选中p1: 定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选择父级元素的第一个,并且是当前元素才生效*/    
p:nth-child(1){      background: violet;  }*/

3 p:nth-of-type(1)
4 a:hover(鼠标悬浮的颜色 (重要))
a:hover { background: yellow;}

属性选择器(重要)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/*属性名， 属性名= 属性值（正则）
=绝对等于
*=包含这个元素
^= 以这个开头
$= 以这个结尾

    /*存在id属性的元素   a[]{}*/
    /*a[id]{
    background: yellow;
}*/
    /*id=first的元素*/
    /*a[id=first]{
    background: violet;
}*/
    /*class 中有links的元素*/
    /*a[class*="links"]{
    background: yellow;
}*/
    /*选中href中以http开头的元素*/
    /*a[href^=http]{
background: yellow;
}*/
    /*选中href中以doc结尾的元素*/
    a[href$='doc'] {
      background: yellow;
    }

HTML

html第一行！doctype是做什么用的

告诉浏览器用什么样的模式来解析文档。如html5则为声明为html5文档
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

HTML5 新特性、语义化

  1. 概念：HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
  2. 语义化标签：header nav main article section aside footer
  3. 语义化的优点:
    在没CSS样式的情况下，页面整体也会呈现很好的结构效果
    代码结构清晰，易于阅读，
    利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
    有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

src和href的区别？(src相当于同步执行，href相当于并行处理)

  1. src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源
    下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。
  2. href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的
    ⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

前端需要注意哪些 SEO ？

（1）合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可。
（2）语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
（3）重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
（4）重要内容不要用 js 输出：爬虫不会执行 js 获取内容
（5）少用 iframe：搜索引擎不会抓取 iframe 中的内容
（6）非装饰性图片必须加 alt
（7）提高网站速度：网站速度是搜索引擎排序的一个重要指标

行内元素 块级元素

块级元素：div、p、ol、ul、dl、li、table、td、th、tr、dd、dt、caption、h、
行内元素：i、img、input、select、label、textarea、button、b、span、a、u、em、

块级元素的特点
1、高度，行高以及外边距和内边距都可控制。
2、总是在新行上开始，占据一整行。
3、它可以容纳内联元素和其他块元素。
4、宽度始终是与浏览器宽度一样，与内容无关。

行内元素的特点
1、行内元素只能容纳文本或者其他行内元素。
2、宽度只与内容有关。
3、和其他元素都在一行上。
4、高，行高及外边距和内边距部分可改变。

区别
1、行内元素会在一条直线上分列，都是统一行的，程度偏向分列。
块级元素各盘踞一行，垂直偏向分列；块级元素重新行开端停止接着一个断行。
2、行内元素不可以包括块级元素，只能包容文本或许其余行内元素。
块级元素能够包括行内元素和块级元素，还能够包容内联元素和其余元素；。

3、行内元素与块级元素属性的分歧，主要在盒模子属性上。
行内元素设置width无效，height无效（能够设置line-height），margin、padding设置上下有效。

切换 display:inline-block、inline和block

不常问（已掌握）

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
(2) 盒模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

IE盒模型和W3C标准盒模型的区别

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。

CSS 如何设置这两种模型？

box-sizing : content-box //标准(W3C)盒子模型
box-sizing : border-box //IE盒子模型

为什么要清除浮动？怎么清除浮动？

产生原因：子盒子浮动导致的父盒子内高度为 0 ，父级盒子不能被撑开，发生高度塌陷的情况

带来的负作用

  1. 背景不能显示
  2. 边框不能撑开
  3. margin和padding值不能正确显示

清除浮动的方法

  1. 给父盒子设置合适的高度
  2. 给父盒子添加样式 overflow：hidden/auto;（这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子）（为了去除兼容性问题，会添加zoom:1;）
  3. 在父盒子里面的子盒子后面添加一个子盒子，如div，添加样式 .clear{clear:both;}；
  4. 采用伪元素，给父元素追加::after，给父元素添加一个类.clearfix{content:””;clear:both;}

BFC/IFC （块级格式化上下文/行级格式化上下文）

BFC指的是块级格式化上下文，

  1. 一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。
  2. 一个BFC就像是一个隔离区域，和其他区域互不影响。
  3. 一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些属性时也会创建BFC。
  4. 还有就是元素的overflow的值不为visible时都会创建BFC。
BFC的应用 (overflow:hidden)

清除浮动：父元素设置overflow: hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等等。
消除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow: hidden，构建BFC使其不影响外部元素。
消除父子元素边距重叠，父元素设置overflow: hidden

触发BFC的方式

float 不为 none，浮动元素所在的区域就是一个 BFC 区域。
position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域
display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域
overflow 不为 visible 的元素所在的区域也是一个 BFC 区域

margin重叠 及防止方法(overflow:hidden)

防止外边距重叠解决方案：

1
2
3
4
5
6
7
外层元素padding代替
外层元素 overflow:hidden;

内层元素绝对定位 postion:absolute:
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
内层元素透明边框 border:1px solid transparent;

● 双边距重叠问题（外边距折叠）

水平排放的盒子，水平间距是两个margin的累加
参考回答：
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
如果它们相等，则仅为其中一个
两个外边距一正一负时，折叠结果是两者的相加的和。

IFC指的是行级格式化上下文，它有这样的一些布局规则

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒子的高度决定。

博客：BFC–块级格式化上下文

css布局

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

  1. 圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
  2. 双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。
  3. Flex布局是由CSS3提供的一种方便的布局方式。
  4. 绝对定位布局是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。
  5. 表格布局的好处是能使三栏的高度统一。
  6. 网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。
 将元素的宽高设为0，只设置
 border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。

1
2
3
4
5
6
7
 #demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

博客：CSS绘制三角形—border法

meta viewport 移动端适配

meta viewport 有六个属性：
设置 viewport 的宽度：width
设置 viewport 的高度：height
设置页面的初始缩放值：initial-scale
允许用户最小缩放值：maximum-scale
允许用户最大缩放值: minimum-scale
是否允许用户进行缩放：user-scalable

1
2
//不允许用户手指放大缩小页面，页面比例始终为 1:1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

3 个 viewport：
1）layout viewport：浏览器会默认将 viewport 设置成一个比可视区域更宽的值，这就是 layout viewport，其宽度通过 document.documentElement.clientWidth 来获取；
2）visual viewport：跟浏览器可视区域大小相同的值，其宽度通过 document.documentElement.innerWidth 来获取；
3）idea viewport：完美适配移动端的 viewport，无论在何种分辨率的屏幕下，针对 idea viewport 而设计的网站，不需要缩放和横向滚动条就可以完美呈现给用户。

画一条0.5px的线

1.采用meta viewport的方式

1
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px
要记得viewport只针对于移动端，只在移动端上才能看到效果
2.采用transform: scale()的方式

transform: scale(0.5,0.5);
3.采用border-image的方式

怎么让文本不自动换行？怎么让超过文本部分变成省略号？

1
2
3
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个元素的作用

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

绝对定位–position 的值 relative 和 absolute 定位原点是？

 绝对定位是相对于元素 最近的已定位的父亲元素 来定位的（拥有定位的祖先元素：position的值不为static的元素）。如果元素没有已定位的父亲元素，那么它的位置则是相对于最初的包含块（body），这点在做轮播时非常重要。

  1. absolute生成绝对定位的元素，相对于值不为static的第一个父元素的padding box进行定位，也可以理解为离自己这一级元素最近的一级5. 5.
  2. fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。relative生成相对定位的元素，相对于其元素本身所在正常位置进行定位。
  3. static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
  4. inherit规定从父元素继承position属性的值。
  5. position设置为absolute或者relative的父元素的padding box的左上角为原点的。

答：relative定位的元素，是相对于元素本身的正常位置来进行定位的

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

em\px\rem区别

px：绝对单位，⻚⾯按精确像素展示。
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了font-size按⾃身来计算（浏览器默认字体是 16px），整个⻚⾯内1em不是⼀个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性
rem优缺点
博客：

优点：在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好
缺点：（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（2）使用iframe引用也会出现问题。（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题

CSS 哪些可以隐藏⻚⾯元素？

display:none; visibility:hidden; opacity: 0; 等等

  1. opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
  2. visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
  3. overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互
  4. display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
  5. z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
  6. transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互

display:none与visible:hidden的区别

一般在面试中问display:none和visibility:hidden两者区别，面试者都能回答出：两者都是隐藏元素，前者不会占据空间，后者隐藏了依然占据空间。

visibility:隐藏对应的元素但不挤占该元素原来的空间。
display:隐藏对应的元素并且挤占该元素原来的空间。

两者区别：

  1. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
  2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
  3. visibility用来设置元素的可见状态。
  4. display:none是会有回流，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
  5. visibility: hidden; 不会有回流，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

● display：table和本身的table有什么区别

参考回答：
Display:table和本身table是相对应的，区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。
之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table边写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁

● z-index的定位方法

参考回答：
z-index属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值

● 对CSS的新属性有了解过的吗？

CSS3的新特性中，在布局方面新增了flex布局，在选择器方面新增了例如first-of-type,nth-child等选择器，在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了animation，2d变换，3d变换等，在颜色方面添加透明，rbga等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查询等

● line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度

● 设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域，

● inline-block、inline和block的区别；为什么img是inline还可以设置宽高

  1. Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。
  2. Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
  3. Inline-block：能设置宽度高度，margin/padding水平垂直方向 都有效，前后无换行符
  4. 在 CSS 中，可替换元素（replaced element）的展示效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
  5. 替换元素
    简单来讲，它们的内容不受当前文档的样式的影响。CSS 能够影响可替换元素的位置，但不会影响到可替换元素自身的内容。例如<iframe>元素，可能具备本身的样式表，但它们不会继承父文档的样式。
    典型的可替换元素有：浏览器<iframe><video><embed><img>
    有些元素仅在特定状况下被做为可替换元素处理，例如：<input>