web前端最新最全面试题总结（css3)

盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

1）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

CSS如何设置这两种模型

/* 设置当前盒子为 标准盒模型（默认） */
    box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
    box-sizing: border-box;

盒模型的叠加

标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
子父元素两个div，子元素margin之后，父元素的高度是子元素的高度，而并非是子元素高度+margin距离。解决方案是：给父亲设置一个属性：overflow: hidden
父div里面一个p子元素，设置p元素的margin的时候，会让整个div的增加一个margin,出现这个的原因是因为父亲div没有border属性。解决方案是：给父div加个border即可。

BFC（边距重叠解决方案）

BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。

BFC 的原理/BFC的布局规则【非常重要】

BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：

（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。
（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。
（4）计算BFC的高度时，浮动的子元素也参与计算。

如何生成BFC

有以下几种方法：

方法1：overflow: 不为vidible，可以让属性是 hidden、auto。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

box-sizing常用的属性有哪些？分别有什么作用？

(Q1) box-sizing: content-box|border-box|inherit;

(Q2) content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

如何让一个div元素隐藏？你能想到的方式有几种？

**Opacity：0 ** 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了该属性的元素,它的背景和元素内容也是会跟着变化的.
Display：none 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。
Visibility：hidden 该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。
Position 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。
Clip-path 该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

px和em、rem的区别

相同点：px和em都是长度单位；

异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

em相对于父元素，rem相对于根元素

清除浮动有哪些方式？比较好的方式是哪一种？

(Q1)

（1）父级div定义height。

（2）结尾处加空div标签clear:both。

（3）父级div定义伪类:after和zoom。

（4）父级div定义overflow:hidden。

（5）父级div定义overflow:auto。

（6）父级div也浮动，需要定义宽度。

（7）父级div定义display:table。

（8）结尾处加br标签clear:both。

(Q2) 比较好的是第3种方式，好多网站都这么用。

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

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

####什么叫优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

CSS实现垂直水平居中

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
}

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

absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器  多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

display:inline-block什么情况下会产生间隙，以及解决办法

在前端页面布局中，经常用到display：inline-clock；方便布局，能够将块状元素按照内联元素的方式布局，同时能设置宽高。

但是，经常写代码的朋友会发现，会产生间隙，间隙产生的原因是因为，换行或空格会占据一定的位置。

解决方法

1，在html代码中除去当前元素的空格或换行；
2，当前元素的父元素中设置font-size:0;
3，在当前元素的父元素中设置letter-spaceing:-4px;

垂直居中

单行行内元素
- 可以设置padding-top,padding-bottom
- 将height和line-height设为相等
多行行内元素
- 可以将元素转为table样式，再设置vertical-align：middle;
- 使用flex布局
块级元素
- 已知高度绝对定位负边距
- 未知高度transform: translateY(-50%);
- flex布局
```
display: flex;
justify-content: center;
align-items: center;
```

position:absolute和float属性的异同？

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。

tansition和margin的百分比根据什么计算？

transition是相对于自身,margin相对于参照物

实现一个秒针绕一点转动的效果

animation: move 60s infinite steps(60); 
/*设置旋转的中心点为中间底部*/ 
transform-origin: center bottom; 
/*旋转从0度到360度*/ 
@keyframes move { 
    from { 
        transform: rotate(0deg); 
    } 
    to { 
        transform: rotate(360deg); 
    } 
}

css3动画和jquery动画的差别？

css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。
jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。‍

解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

优点：
减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式

CSS样式覆盖规则

规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
- 内联样式的权值>>ID选择器>>类选择器>>标签选择器
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。

css三角形运用

<style>
.colored-border-empty-retangle {
    margin: 50px auto;
    width: 0;
    height: 0;
    border-top: 40px solid pink;
    border-right: 40px solid green;
    border-bottom: 40px solid red;
    border-left: 40px solid blue;
}
</style>
<div class="colored-border-empty-retangle"></div>

什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？

FOUC(Flash Of Unstyled Content)–文档样式闪烁

描述下“reset”CSS文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

描述下“reset”CSS文件的作用和使用它的好处。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。

如何优化网页的打印样式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。打印样式示例如下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但打印样式表也应注意以下事项：

打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
隐藏掉不必要的内容。（@print div{display:none;}）
打印样式表中最好少用浮动属性，因为它们会消失。如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

在书写高效CSS时会有哪些问题需要考虑？

样式是：从右向左的解析一个选择器；
ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；
不要tag-qualify（永远不要这样做ul#main-navigation{}ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）；
后代选择器最糟糕（换句话说，下面这个选择器是很低效的：html body ul li a{}）；
想清楚你为什么这样写；
CSS3的效率问题（CSS3选择器（比如:nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）；
我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

如果设计中使用了非标准的字体，你该如何去实现？

所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。

方法：

用图片代替
web fonts在线字库，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；
@font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

解释下浏览器是如何判断元素是否匹配某个CSS选择器？

从后往前判断。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。举个例子，有选择器：

1 body.ready#wrapper>.lol233