2019 CSS经典面试题

这些是我本人在学习历程中总结的一些知识点，本篇文章我将以面试题的情势分享给大家，但愿对大家有所帮忙，本文篇幅较长，您若认真看完，并且重复阅读，我信赖对您的学习或者是面试，都会有必然帮忙，同时但愿大家批判指正！

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

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型

标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin

宽高指的是 content 的宽高

低版本IE盒子模型：内容（content+padding+border）+ 边界margin，

宽高指的是 content+padding+border 部分的宽高

专题引荐：2020年CSS面试题汇总（最新）

问题的拓展：

CSS 怎样设定这两种模型？

box-sizing : content-box  
box-sizing : border-box复制代码

JS 怎样设定猎取盒模型对应的宽和高？

dom.style.width/height;//设定猎取的是内联样式
dom.currentStyle.width/height;//只要IE支撑
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用处所：运算一个元素的绝对位置复制代码

实例题（按照盒模型说明边距重叠）？

该例子是父子边距重叠，还有兄弟元素的边距重叠

<style>        
    html *{            
        padding: 0;            
        margin: 0;        
    }        
    #sec{            
        background: #f00;            
        overflow: hidden; //创立了一个BFC，块级格局化上下文   
    }        
    .child{            
        height: 100px;            
        margin-top: 10px;            
        background: yellow;        
    }    
</style>
<section id="sec">        
    <article class="child"></article>    
</section>复制代码

BFC（边距重叠解决方案）？

2. box-sizing属性？

用来操纵元素的盒子模型的解析模式，默许为content-box
context-box：W3C的标准盒子模型，设定元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型。设定元素的 height/width 属性指的是 content + border + padding 部分的高/宽

3. 对 BFC 标准(块级格局化上下文：block formatting context)的懂得？

（W3C CSS 2.1 标准中的一个概念,它是一个独立容器，决议了元素怎样对其内容停止定位,乃至与其他元素的关系和彼此作用。）

一个页面是由许多个 Box 组成的,元素的类型和 display 属性,决议了这个 Box 的类型。

不一样类型的 Box，会参与不一样的 Formatting Context（决议怎样渲染文档的容器），因此Box内的元素会以不一样的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

BFC 规定了内部的 Block Box 怎样规划。

定位方案：

1. 内部的 Box 会在垂直标的目的上一个接一个放置。
2. Box 垂直标的目的的间隔由 margin 决议，属于统一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边，与包括块 border box 的左边相接触。
4. BFC 的区域不会与 float box 重叠。
5. BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 运算 BFC 的高度时，浮动元素也会参与运算。

知足以下前提之一就可触发 BFC

1. 根元素，即 html
2. float 的值不为none（默许）
3. overflow 的值不为 visible（默许）
4. display 的值为 inline-block、table-cell、table-caption
5. position 的值为 absolute 或 fixed

更多关于 BFC 的介绍，请看我的文章 BFC 是啥？有什么用？

4. CSS选中器是什么？哪些属性可以继承？CSS优先级算法怎样运算？

CSS选中符：

1. id选中器（ # myid）

2. 类选中器（.myclassname）

3. 标签(元素)选中器（p, 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，dt，dd；

不成继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

优先级算法运算

优先级就近原则，同权重状况下样式定义比来者为准

!important>id >class>tag

important比内联优先级高

元素选中符的权值：元素标签（派生选中器）：1，class选中符：10，id选中符：100，内联样式权值最大，为1000

1. !important声明的样式优先级最高，假如冲突再停止运算。
2. 假如优先级雷同，则选中最后显现的样式。
3. 继承得到的样式的优先级最低。

5. 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，单选框或复选框被选中。

:before在元素此前增加内容，也可以用来做清除浮动

:after在元素之后增加内容

6. 怎样居中p？怎样居中一个浮动元素？怎样让绝对定位的p居中？怎样居中一个img（position定位）

水平居中p：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;复制代码

水平垂直居中一个浮动元素（position定位）

第一种：未知元素宽高

<p class="outer">
    <span>我想居中显示</span>
</p>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{        float:left;
        position:absolute;
        backgroond-color:red;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
</style>复制代码

第二种：已知元素宽高的

<p class="outer">
    <span>我想居中显示</span>
</p>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{        float:left;
        position:absolute;
        backgroond-color:red;
        width:150px;
        height:50px;
        top:50%;
        left:50%;
        margin:-25px 0px 0px -75px;
    }
</style>复制代码

怎样垂直居中一个img（display : table-cell 或者 position定位）

<p class="outer">        
    <img src="nz.jpg" alt="">    
</p>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>复制代码

绝对定位的p水平垂直居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;复制代码

还有愈加文雅的居中方式就是用 flex规划，点击查看我的文章 把握flex规划，这篇文章就够了

更多的居中问题，点击查看我的文章 p居中的几种办法

7. display 是什么值？说明他们的作用?

8. position 的值？

css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；

粘性定位可以被认为是相对定位和牢固定位的混合。元素在跨过特定阈值前为相对定位，之后为牢固定位。例如：

#one { position: sticky; top: 10px; }复制代码

在 viewport 视口滚动到元素 top 间隔小于 10px 此前，元素为相对定位。之后，元素将牢固在与顶部间隔 10px 的位置，直到 viewport 视口回滚到阈值以下。

更多关于 sticky 的介绍，请点击查看 粘性定位介绍

9. CSS3是什么新特性？

1. 新增各种 CSS 选中器 :not(p) 选中每个非p的元素； p:empty 选中每个没有任何子级的p元素（包罗文本节点）
2. 边框（Borders）：

   p{ 
       border:2px solid; 
       border-radius:25px; //用于设定圆角
       box-shadow: 10px 10px 5px #888888; //水平暗影 垂直暗影 含糊间隔 暗影色彩
       border-image:url(border.png) 30 30 round;// 设定所有边框图像的速记属性。
   }复制代码

3. 背景 background-clip（规定背景图的绘制区域），background-origin，background-size

   p{ 
       background:url(img_flwr.gif); 
       background-repeat:no-repeat; 
       background-size:100% 100%; //规定背景图的尺寸
       background-origin:content-box;//规定背景图的定位区域
   } 
   多背景 
   body{ 
       background-image:url(img_flwr.gif),url(img_tree.gif); 
   }复制代码

4. 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角标的目的

   background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码

5. 文本结果 暗影text-shadow，textwrap，word-break，word-wrap；
6. 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D转换 perspective()；transform是向元素利用 2D 或者 3D 转换；
7. 过渡 transition
8. 动画
9. 多列规划 （multi-column layout）
10. 盒模型
11. flex 规划
12. 多媒体查询 定义两套css，当阅读器的尺寸转变时会采纳不一样的属性

更多 CSS3 和 HTML5的新特性，请点击 CSS3 和 HTML5 新特性一览

10. 请说明一下 CSS3 的 flexbox（弹性盒规划模型）,乃至适用处景？

该规划模型的目的是供给一种愈加高效的方式来对容器中的条目停止规划、对齐和分配空间。在传统的规划方式中，block 规划是把块在垂直标的目的从上到下顺次摆列的；而 inline 规划则是在水平标的目的来摆列。弹性盒规划并没有这样内在的标的目的限制，可以由开发人员自在操纵。
试用处景：弹性规划适合于移动前端开发，在Android和ios上也完善支撑。

更多关于 flex 规划，请点击查看我的文章 你真的理解 flex 规划吗？

11. 用纯CSS创立一个三角形的道理是啥？

第一，需要把元素的宽度、高度设为0。然后设定边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;复制代码

12. 一个满屏 品 字规划怎样设计?

第一种真正的品字：

1. 三块高宽是肯定的；
2. 上面那块用margin: 0 auto;居中；
3. 下面两块用float或者inline-block不换行；
4. 用margin调整位置使他们居中。

第二种全屏的品字规划:
上面的p设定成100%，下面的p离别宽50%，然后使用float或者inline使其不换行。

13. 常见的兼容性问题？

1. 不一样阅读器的标签默许的margin和padding不一样。解决方法是加一个全局的

   *{margin:0;padding:0;} 来统一；

2. IE6双边距bug：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设定的大。hack：display:inline; 将其转化为行内属性。渐进识别的方式，从总体中逐步排除部分。第一，奇妙的使用“9”这一标志，将IE阅读器从所有状况中别离出来。接着，再次使用“+”将IE8和IE7、IE6别离开来，这样IE8已经独立识别。 渐进识别的方式，从总体中逐步排除部分。第一，奇妙的使用“9”这一标志，将IE阅读器从所有状况中别离出来。接着，再次使用“+”将IE8和IE7、IE6别离开来，这样IE8已经独立识别。

   {
   background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码

3. 设定较小高度标签（一样小于10px），在IE6，IE7中高度超出本人设定高度。hack：给超出高度的标签设定overflow:hidden;或者设定行高line-height 小于你设定的高度。
4. IE下，可以使用猎取常规属性的办法来猎取自定义属性,也可以使用getAttribute()猎取自定义属性；Firefox下，只能使用getAttribute()猎取自定义属性。解决办法:统一通过getAttribute()猎取自定义属性。
5. Chrome 中文界面下默许会将小于 12px 的文本强迫依照 12px 显示,可通过参加 CSS 属性 -webkit-text-size-adjust: none; 解决。
6. 超链接拜访过后hover样式就不显现了，由于被点击拜访过的超链接样式不再具有hover和active了。解决办法是改动CSS属性的摆列次序:L-V-H-A :

   a:link {} 
   a:visited {} 
   a:hover {} 
   a:active {}复制代码

7. IE下,even对象有x,y属性,但是没有pageX,pageY属性;

   Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

   解决办法：（前提注释）缺陷是在IE阅读器下大概会增添额外的HTTP恳求数。

8. png24位的图片在iE6阅读器上显现背景，解决方案是做成PNG8.

14. 写出几种IE6 BUG的解决办法

1. 双边距BUG float引发的 使用display

2. 3像素问题 使用float引发的 使用dislpay:inline -3px

3. 超链接hover 点击后失效 使用准确的书写次序 link visited hover active

4. Ie z-index问题 给父级增加position:relative

5. Png 透亮 使用js代码 改

6. Min-height 最小高度 !Important 解决’

7. select 在ie6下覆盖 使用iframe嵌套

8. 为什么没有方法定义1px摆布的宽度容器(IE6默许的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)

9. ie 6 不支撑!important

15. 为什么要初始化 CSS 样式

由于阅读器的兼容问题，不一样阅读器对有些标签的默许值是不一样的，假如没对CSS初始化往往会显现阅读器之间的页面显示差别。当然，初始化样式会对SEO有必然的影响，但鱼和熊掌不成兼得，但力求影响最小的状况下初始化。

16. absolute 的 containing block(容器块)运算方式跟正常流有什么不一样？

不管属于哪种，都要先寻到其祖先元素中比来的 position 值不为 static 的元素，然后再推断：

1. 若此元素为 inline 元素，则 containing block 为能够包括这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
2. 不然,则由这个祖先元素的 padding box 构成。

假如都寻不到，则为 initial containing block。

补充：

1. static(默许的)/relative：简便说就是它的父元素的内容框（即去除padding的部分）

2. absolute: 向上寻比来的定位为absolute/relative的元素

3. fixed: 它的containing block一概为根元素(html/body)，根元素也是initial containing block

17. CSS里的 visibility 属性有个 collapse 属性值是干吗用的？在不一样阅读器下今后什么不同？

当一个元素的 visibility 属性被设定成 collapse 值后，关于一样的元素，它的展现跟 hidden 是一样的。但例外的是，假如这个元素是table相关的元素，例如table行，table group，table列，table column group，它的展现却跟 display: none 一样，也就是说，它们占用的空间也会开释。

在谷歌阅读器里，使用 collapse 值和使用 hidden 值没有什么不同。

在火狐阅读器、Opera和IE11里，使用 collapse 值的结果就如它的字面意思：table的行会消逝，它的下面一行会补充它的位置。

18. display:none 与 visibility:hidden 的不同是啥？

display : none 潜藏对应的元素，在文档规划中不再分配空间（回流+重绘）

visibility:hideen 潜藏对应的元素，在文档规划中仍保存本来的空间（重绘）

使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丧失”;而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透亮），而它所占据的空间位置依然存在。

19. position 跟 display、overflow、float 这些特性彼此叠加后会如何样？

display 属性规定元素应当生成的框的类型；position属性规定元素的定位类型；float属性是一种规划方式，定义元素在哪个标的目的浮动。
相似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

20. 为什么会显现浮动? 什么时候需要清除浮动？清除浮动是什么方式？优缺陷是啥？你认为最好的是哪一种？为什么？

显现浮动的缘由：

浮动元素碰到包括它的边框或者浮动元素的边框逗留。在CSS标准中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框展现得就像浮动框不存在一样。浮动元素会漂泊在文档流的块框上。

关于css的定位机制：一般流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以摆布移动，直到它的外边沿碰到包括框或者另一个浮动框的边沿，所以才说浮动定位不属于正常的页面流。文档中的一般流就会展现得和浮动框不存在一样，当浮动框高度超出包括框的时候，就会显现包括框不会主动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要思考子元素的位置，就造成显示父容器像空容器一样。

浮动带来的问题：

1. 父元素的高度没法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟从其后
3. 若非第一个元素浮动，则该元素此前的元素也需要浮动，不然会影响页面显示的构造。

清除浮动的方式：

1. 父级p定义height
2. 最后一个浮动元素后加空 p 标签 并增加样式 clear:both。（理论上能清除任何标签，增添无意义的标签）
3. 包括浮动元素的父标签增加样式 overflow 为 hidden 或 auto。
4. 父级 p 定义 zoom（空标签元素清除浮动而不得不增添无意义代码的弊端，使用zoom:1用于兼容IE）
5. 用after伪元素清除浮动（用于非IE阅读器）

1、父级p定义height

道理：父级p手动定义height，就解决了父级p没法主动猎取到高度的问题

长处：简便，代码少，容易把握

缺陷：只适合高度牢固的规划，要给出准确的高度，假如高度和父级p不一样时，会发生问题

倡议：不引荐使用，只倡议高度牢固的规划时使用

2、结尾处加空 p 标签 clear:both

道理：增加一个空p，利用css提高的clear:both清除浮动，让父级p能主动猎取到高度

长处：简便，代码少，阅读器支撑好，不容易显现怪问题

缺陷：不少初学者不睬解道理；假如页面浮动规划多，就要增添许多空p，让人感受很不爽

倡议：不引荐使用，但此办法是之前主要使用的一种清除浮动办法

3、父级 p 定义 overflow:hidden

道理：必需定义width或zoom:1，同时不克不及定义height，使用overflow:hidden时，阅读器会主动检查浮动区域的高度

长处：简便，代码少，阅读器支撑好

缺陷：不克不及和position配合使用，由于超出的尺寸的会被潜藏

倡议：只引荐没有使用position或对overflow:hidden懂得比力深的伴侣使用

4、父级p定义伪类 :after 和 zoom

道理：IE8以上和非IE阅读器才支撑:after，道理和办法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题

长处：阅读器支撑好，不容易显现怪问题（当前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺陷：代码多，不少初学者不睬解道理，要两句代码结合使用，才能让主流阅读器都支撑

倡议：引荐使用，倡议定义公共类，以减少CSS代码

(1) 在子元素后增加一个空p p{clear:both;}

(2) 在父元素中{overflow:hidden|auto;zoom:1}

(3) :after伪选中符，在父容器的尾部主动创立一个子元素

.clearfix:after {
    content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
    zoom: 1;
}复制代码

"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白符，

"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选中符IE 6不支撑,增加一条IE 6的独占命令"zoom:1;"就行了.

21. 上下 margin 重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
/*盒子main的外面包一个p，通过改动此p的属性使两个盒子分属于两个不一样的BFC，以此来阻挠margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }复制代码

22. 设定元素浮动后，该元素的 display 值是多少？

主动变成display:block

23. 移动端的规划用过媒体查询吗？

通过媒体查询可认为不一样大小和尺寸的媒体定义不一样的css，顺应响应的设备的显示。

1. <head>里边

   <link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码

2. CSS :

3. @media only screen and (max-device-width:480px) {
       /css样式/}复制代码

24. 什么是CSS 预处置器 / 后处置器？大家为什么要使用他们？

预处置器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、轮回、函数等，具有很利便的UI组件模块化开发能力，极大的提高工作效力。

后处置器例如：PostCSS，平常被视为在完成的样式表中按照CSS标准处置CSS，让其更有效；当前最常做的是给CSS属性增加阅读器私有前缀，实现跨阅读器兼容性的问题。

CSS 预处置器为 CSS 增添一些编程的特性，无需思考阅读器的兼容性问题”，例如你可以在 CSS 中使用变量、简便的逻辑程序、函数（如右侧代码编纂器中就使用了变量$color）等等在编程说话中的一些根本特性，可以让你的 CSS 愈加简约、顺应性更强、可读性更佳，更易于代码的保护等诸多好处。

其它 CSS 预处置器说话：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

为什么要使用它们？

构造清楚，便于扩展。

可以利便地屏蔽阅读器私有语法差别。这个不消多说，封装对阅读器语法差别的反复处置，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以利便地利用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

25. CSS优化、提高机能的办法是什么？

1. 幸免过度束缚
2. 幸免后代选中符
3. 幸免链式选中符
4. 使用紧凑的语法
5. 幸免不必要的命名空间
6. 幸免不必要的反复
7. 最好使用表示语义的名字。一个好的类名应当是描写他是啥而不是像什么
8. 幸免！important，可以选中其他选中器
9. 尽大概的精简规则，你可以合并不一样类里的反复规则
10. 修复解析错误
    
11. 幸免使用多类选中符
12. 移除空的css规则

13. 准确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析机能。

    display:inline后不该该再使用width、height、margin、padding乃至float。

    display:inline-block后不该该再使用float。

    display:block后不该该再使用vertical-align。

    display:table-*后不该该再使用margin或者float。

14. 不滥用浮动：虽然浮动不成幸免，但不成否认许多css bug是由于浮动而引发。

15. 不滥用web字体

    关于中文网站来说Web Fonts大概很生疏，国外却很流行。web fonts平常体积巨大，并且一些阅读器鄙人载web fonts时会堵塞页面渲染伤害机能。

16. 不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
17. 不在选中符中使用ID标识符，主要思考到样式重用性乃至与页面的耦合性。
18. 不给h1~h6元素定义过多的样式
19. 全站统必然义一遍heading元素即可，若需额外定制样式，可使用其他选中符作为代替。
20. 不反复定义h1~h6元素
21. 值为0时不需要任何单位
22. 标准化各种阅读器前缀：平常将阅读器前缀置于前面，将标准样式属性置于最后，相似：.foo{

        -moz-border-radius: 5px;
        border-radius: 5px; 
    }复制代码

23. 使用CSS渐变等高级特性，需指定所有阅读器的前缀
24. 幸免让选中符看起来像正则表达式
25. CSS3增加了一些相似~=等复杂属性，也不是所有阅读器都支撑，需慎重使用。
26. 遵照盒模型规则（Beware of broken box models）

26. 阅读器是怎样解析CSS选中器的？

CSS选中器的解析是从右向左解析的，为了不对所有元素停止遍历。若从左向右的匹配，发明不相符规则，需要停止回溯，会亏损许多机能。若从右向左匹配，先寻到所有的最右节点，关于每一个节点，向上寻觅其父节点直到寻到根元素或知足前提的匹配规则，则完毕这个分支的遍历。两种匹配规则的机能差异很大，是由于从右向左的匹配在第一步就挑选掉了大量的不相符前提的最右节点（叶子节点），而从左向右的匹配规则的机能都白费在了失败的查寻上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起停止剖析创立一棵 Render Tree，终究用来停止画图。在创立 Render Tree 时（WebKit 中的「Attachment」历程），阅读器就要为每个 DOM Tree 中的元素按照 CSS 的解析结果（Style Rules）来肯定生成怎样的 Render Tree。

27. 在网页中的应当使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开端只供给 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀少。

28. margin 和 padding 离别适合什么场景使用？

◆何时应当使用margin

需要在border外侧增加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要彼此抵消时。如15px+20px的margin，将得到20px的空白。

◆何时应当时用padding

需要在border内测增加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，但愿等于两者之和时。如15px+20px的padding，将得到35px的空白。

◆阅读器兼容性问题

在IE5.x、IE6中，为float的盒子指定margin时，左侧margin大概会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

29. 元素竖向的百分比设定是相关于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相关于父容器的宽度运算的，但是，关于一些表示竖向间隔的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，根据的也是父容器的宽度，而不是高度。

30. 全屏滚动的道理是啥？用到了CSS的哪些属性？

1. 道理：有点相似于轮播，团体的元素不断摆列下去，假设有5个需要展现的全屏页面，那么高度是500%，只是展现100%，剩下的可以通过transform停止y轴定位，也可以通过margin-top实现
2. overflow：hidden；transition：all 1000ms ease；

31. 什么是响应式设计？响应式设计的根本道理是啥？怎样兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

根本道理是通过媒体查询检测不一样的设备屏幕尺寸做处置。

页面头部必需有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码

32. 视差滚动结果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，操纵背景的移动速度比前景的移动速度慢来创立出令人惊讶的3D结果。

1. CSS3实现
   长处：开发时间短、机能和开发效力比力好，缺陷是不克不及兼容到低版本的阅读器
2. jQuery实现
   通过操纵不一样层滚动速度，运算每一层的时间，操纵滚动结果。
   长处：能兼容到各个版本的，结果可控性好
   缺陷：开发起来对制作者要求高
3. 插件实现方式
   例如：parallax-scrolling，兼容性十分好

33. ::before 和 :after中双冒号和单冒号有什么不同？说明一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2. ::before就是以一个子元素的存在，定义在元素主体内容此前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新显现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的标准里，伪元素的语法被修改成使用双冒号，成为::before ::after

留意:关于IE6/7/8仅支撑单冒号表示法，而现代阅读器同时支撑这两种表示法。别的，在CSS3中单冒号和双冒号的区域主如果用来区分伪类和伪元素的。

34. 你对line-height是怎样懂得的？

行高是指一行文字的高度，详细说是两行文字间基线的间隔。CSS中起高度作用的是height和line-height，没有定义height属性，终究其展现作用必然是line-height。
单行文本垂直居中：把line-height值设定为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设定display属性为inline-block。

35. 如何让Chrome支撑小于12px 的文字？

p{
    font-size:10px;
    -webkit-transform:scale(0.8);//0.8是缩放比例
} 
复制代码

36. 让页面里的字体变清楚，变细用CSS如何做？

-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最好的，灰度平滑。

37. position:fixed; 在 android 下无效如何处置 ？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码

38. 假如需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默许频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

39. li 与 li 之间有看不见的空白间隔是啥缘由引发的？有什么解决方法？

行框的摆列会受到中心空白（回车空格）等的影响，由于空格也属于字符,这些空白也会被利用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决办法：

1. 可以将<li>代码全部写在一排
2. 浮动li中float：left
3. 在ul中用font-size：0（谷歌不支撑）；
4. 可以将 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

40. display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：s除空格
2. margin正值的时候 解决：margin使用负值
3. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

41. 有一个高度自顺应的p，里面有两个p，一个高度100px，但愿另一个填满剩下的高度

外层p使用position：relative；高度要求自顺应的p使用position: absolute; top: 100px; bottom: 0; left: 0

42. png、jpg、gif 这些图片格局说明一下，离别什么时候用。有没有理解过webp？

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据紧缩位图文件格局.长处是：紧缩比高，色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真紧缩办法，是一种毁坏性的紧缩，在色彩及色彩平滑转变做的不错。在www上，被用来贮存和传输相片的格局。
3. gif是一种位图文件格局，以8位色重现真色彩的图像。可以实现动画结果.
4. webp格局是谷歌在2010年推出的图片格局，紧缩率只要jpg的2/3，大小比png小了45%。缺陷是紧缩的时间更久了，兼容性不好，当前谷歌和opera支撑。

43. style 标签写在 body 后与 body前有什么不同？

页面加载自上而下 当然是先加载样式。
写在 body 标签后由于阅读器以逐行方式对HTML文档停止解析，当解析到写在尾部的样式表（外联或写在 style 标签）会致使阅读器休止此前的渲染，等候加载且解析样式表完成之后从新渲染，在windows的IE下大概会显现 FOUC 现象（即样式失效致使的页面闪耀问题）

44. CSS属性overflow属性定义溢出元素内容区的内容会怎样处置?

参数是 scroll 时候，必会显现滚动条。
参数是 auto 时候，子元素内容大于父元素时显现滚动条。
参数是 visible 时候，溢出的内容显现在父元素之外。
参数是 hidden 时候，溢出潜藏。

45. CSS Sprites是啥？它的优势和劣势？

CSS Sprites小图片背景同享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image，background- repeat，background-position 的组合停止背景定位。利用CSS Sprites能很好地减少网页的http恳求，从而大大的提高页面的机能；CSS Sprites能减少图片的字节。

优势：

1.很好的减少网页的恳求，大大提高页面的机能；

2.减少图片的字节；

3.解决了网页设计师在图片命名上的困扰；

4.改换风格利便，保护利便。

劣势：

1.图片合并时需预留好足够空间，宽屏、高辨论率的屏幕下易显现背景断裂；

2.开发较费事，测量繁琐；（可使用样式生成器）

3.保护费事，背景少许改动有大概影响整张图片，使得字节增添还要改动css。

46. CSS 伪类和伪元素的不同？

第一种答复：

伪类： :focus、:hover、:active

伪元素：:before、:after

伪类本质上是为了补偿常规CSS选中器的不足，以便猎取到更多信息；

伪元素本质上是创立了一个有内容的虚拟容器；

CSS3中伪类和伪元素的语法不一样；

可以同时使用多个伪类，而只能同时使用一个伪元素；

第二种答复：

伪类：伪类选中元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标记。由于状态是动态转变的，所以一个元素到达一个特定状态时，它大概得到一个伪类的样式；当状态改动时，它又会失去这个样式。由此可以看出，它的功效和class有些相似，但它是基于文档之外的抽象，所以叫伪类。

:first-child :link: :visitive :hover :active :focus :lang

伪元素：与伪类针对非凡状态的元素不一样的是，伪元素是对元素中的特定内容停止操纵，它所操纵的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去拔取诸如元素内容第一个字（母）、第一行，拔取某些内容前面或后面这种一般的选中器没法完成的工作。它操纵的内容实际上和元素是雷同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

:first-line 
:first-letter 
:before 
:after复制代码

47.有哪项方式可以对一个 DOM 设定它的CSS样式？　　

外部样式表，引入一个外部css文件

内部样式表，将css代码放在 <head> 标签内部

内联样式，将css样式直接定义在 HTML 元素内部

48. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在阅读器可视范畴内？　　

最根本的：设定 display 属性为 none，或者设定 visibility 属性为 hidden

技巧性：设定宽高为 0，设定透亮度为 0，设定 z-index 位置在 -1000

49. 什么是 Css Hack？ie6,7,8 的 hack 离别是啥？

答案：解决各阅读器对 CSS 说明不一样所采取的，不同不一样阅读器制作不一样CSS样式的设定就叫作 CSS Hack。

50. 行内元素和块级元素的详细不同是啥？行内元素的 padding 和 margin 可设定吗？

块级元素( block )特性：

总是独占一行，展现为另起一行开端，并且其后的元素也必需另起一行显示；

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可操纵；

内联元素(inline)特性：

和相邻的内联元素在统一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不成改动（也就是padding和margin的left和right是可以设定的）。

　　那么问题来了，阅读器还有默许的天生inline-block元素（具有内在尺寸，可设定高宽，但不会主动换行），是什么？

　　答案：<input> 、<img> 、<button> 、<textarea>。

相关文章 为什么img、input等内联元素可以设定宽高

51. 什么是外边距重叠？重叠的结果是啥？

　　外边距重叠就是 margin-collapse。

　　在CSS傍边，相邻的两个盒子的外边距可以结合成一个独自的外边距。这种合并外边距的方式被称为折叠，并且因此所结合成的外边距称为折叠外边距。

　　折叠结果遵照以下运算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。　　

52. rgba() 和 opacity 的透亮结果有什么不一样？

rgba()和opacity都能实现透亮结果，但最大的不一样是opacity作用于元素，乃至元素内的所有内容的透亮度，

　　而rgba()只作用于元素的色彩或其背风光。（设定rgba透亮的元素的子元素不会继承透亮结果！）

53. css 中可以让文字在垂直和水平标的目的上重叠的两个属性是啥？

　　垂直标的目的：line-height

　　水平标的目的：letter-spacing (letter-spacing 属性增添或减少字符间的空白)

　　那么问题来了，关于letter-spacing的妙用知道是什么么？

　　答案:可以用于消弭inline-block元素间的换行符空格间隙问题。

54. px 和 em 的不同。

px和em都是长度单位，不同是：px的值是牢固的，指定是多少就是多少，运算比力容易。em得值不是牢固的，并且em会继承父级元素的字体大小。

　　阅读器的默许字体高都是16px。所以未经调整的阅读器都相符: 1em=16px。那么12px=0.75em, 10px=0.625em。

55. 描写一个"reset"的CSS文件并怎样使用它。知道normalize.css吗？你理解他们的不一样之处？　

不一样的阅读器对一些元素有不一样的默许样式，假如不处置，在不一样的阅读器下会存在必要的风险。

　　你大概会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅供给了一套合理的默许样式值。既能让众多阅读器到达一致和合理，但又不扰乱其他的东西（如粗体的标题）。

56. 问:translate()办法能移动一个元素在z轴上的位置？

不克不及。它只能移动x,y轴的位置。translate3d可以。

57. CSS3是什么新特性？

1. CSS3实现圆角（border-radius），暗影（box-shadow），

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

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

4. 增添了更多的CSS选中器 多背景 rgba

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

6. 媒体查询，多栏规划

7. border-image

58. xhtml 和 html 有什么不同

功效上的差异：HTML是一种根本的WEB网页设计说话；XHTML是一个基于XML的置标说话，XHTML可兼容各大阅读器、手机乃至PDA，并且阅读器也能快速准确地编译网页。

书写习惯上：

(1) XHTML 所在标签都必需小写

(2) XHTML 标签必需成双成对

(3) XHTML 标签次序必需准确

(4) XHTML 所有属性都必需使用双引号

(5) 不XHTML 同意使用target=”_blank”

(6) XHTML 文档必需具有根元素。

(7) XHTML 元素必需被准确地嵌套。

59. 前端页面有哪三层构成，离别是啥?

构造层 Html 表示层 CSS 行动层 js

60. css的根本语句构成是?

选中器{属性1:值1;属性2:值2;……}

61. 与 HTML4 比力，HTML5 废弃了哪些元素？

废弃的元素包罗：

· frame

· frameset

· noframe

· applet

· big

· center

· basefront

62. CSS引入的方式是什么？使用Link和@import有什么不同？

答：内联，内嵌，外链，导入

（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支撑使用javascript改动样式；而@import是CSS供给的，只能用于加载CSS，不支撑使用 javascript 改动样式；

（2）页面被加载的时，link 会被同时加载，而@import 援用的CSS会比及页面加载完再加载；

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

63. 介绍一下你对阅读器内核的懂得

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如参加CSS等），乃至运算网页的显示方式，然后会输出至显示器或打印机。阅读器的内核的不一样关于网页的语法说明会有不一样，所以渲染的结果也不雷同。所有网页阅读器、电子邮件客户乃至其他它所需要编纂、显示网络的利用程序都需要内核。

（2）JS引擎则：解析和施行JavaScript 来实现网页的动态结果；

最开端渲染引擎和 JS 并没有区分的很明白，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

64. 常见的阅读器内核有哪运算些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗阅读器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。

Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]

EdgeHTML内核：Microsoft Edge。[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]

65. 对WEB标准乃至W3C的懂得与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js足本、构造行动展现的别离、文件下载与页面速度更快、内容能被更多的会员所拜访、内容能被更广泛的设备所拜访、更少的代码和组件，容易保护、改版利便，不需要变更页面内容、供给打印版本而不需要复制内容、提高网站易用性;

66. 为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？

HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参照 DTD，关于HTML5，你仅需放置下面的文档类型代码告诉阅读器识别这是HTML5文档

67. 假如我不放入，HTML5还会工作么？

不会，阅读器将不克不及识别他是HTML文档，同时HTML5的标签将不克不及正常工作

68. HTML5 中的 datalist 是啥？

HTML5中的Datalist元素有助于供给文本框主动完成特性，如下图所示：

69. CSS中使用列规划是啥？

CSS列规划帮忙你分割文本变为列，例如思考下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，这里HTML5的列规划就有所帮忙了

70. 怎样水平并且垂直居中一张背景图

设定 background-position:center;

71. font-style属性可以让它赋值为“oblique”是啥意思

让一种字体标识为歪体(oblique)，假如没有这种格局，就使用italic字体

72. 怎样懂得 CSS 的继承和重用？

继承：在一个属性利用于一个特定标签之后，该标签的子标签也应当利用该属性。这一行动称为继承。但并不是所有的属性都会被继承。如文字样式一样都继承，盒图的宽高一样不 继承，总之该继承的都会继承，不该继承的都不继承。

重用：一个样式文件，可以多个页面使用，这关于一些公共样式的重构是很有用的。

73. 制作一个拜访量很高的大型网站，你会怎样来治理所有CSS文件,js 与图片？

答案：触及到人手、分工、同步

（1） 先期团队必需肯定好全局样式，编码模式等

（2） 编写习惯必需一致

（3） 标注样式编写人，各模块都及时标注（标注关键样式调取的地方）

（4） 页面停止标注

（5） Css与html分文件夹并行存置，命名都要统一

（6） Js分文件夹存置，命名以该JS功效为准英文翻译

（7） 图片采纳整合的.png格局文件使用，尽量整合在一起，利便未来的治理。

74. 强迫换行的css是啥？

Word-break:break-all;

(HTML和CSS)测试题：

1. 简述的作用。

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签此前。

它不是一个 HTML 标签，它是用来告知（声明） Web 阅读器页面使用了哪种 HTML 版本

2. 行内元素和块级元素的不同是是啥。

行内元素：

（1）行内元素不换行

（2）行内元素不成以设定大小

（3）行内元素大小由内容决议

块元素：

（1）块元素独立成行

（2）块元素可以设定大小

（3）块元素假如不设定宽度，宽度会自顺应其父级的宽度

3. 列举常用行内元素和块元素，并说明其作用

行元素：

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（援用）、i（歪体）、q（短援用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默许display：inline-block）

从阅读器的显示结果可以看出，相邻的行内元素不换行，宽度即为内容的宽度、padding的4个标的目的都有效（从span标签可以看出，关于行内非更换元素，不会影响其行高，不会撑开父元素；而关于更换元素，则会撑开父元素）、margin只要水平标的目的有效（其中垂直标的目的的margin对行内更换元素（比方img元素）有效，对行内非更换元素无效）、不成以设定width和height属性。行内块元素展现其实和行内元素一样，只是其可以设定width和height属性。

块元素：

p、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

从阅读器的显示结果可以看出，块级元素新开启一行（即便是设定了width属性也是独占一行）、尽大概撑满父级元素的宽度，可以设定width和height属性；table元素阅读器默许的display属性为table。

4. 让行内元素水平居中的两种办法

(1) 寻到对应其标签的父级，给其父级设定 text-align : center；

(2) 将元素转化成块元素，设定margin : 0 auto，（必需是块元素，并且有宽度）

5. 怎样实现一个标题文字居中？text-align : center

6. 使块元素在一行显示。float : left

7. 文字加粗，乃至文字字体倾歪

加粗：

CSS：font-weight : bold

HTML : <b></b>，<strong></strong>

歪体：

CSS : font-style : italic | oblique，font-style : normal（正常的字体）

HTML : <i></i> ，<em></em>

?8. 解决 img 图片自带边距的问题

谷歌中这样是说明的：

图片底部的闲暇实际上触及行内元素的规划模型，图片默许的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的闲暇大概是 2px，而有时大概是 4px 或更多。不一样的 font-size 应当也会影响到这个闲暇的大小。

解决方法：

最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大约还有一像素的顶边距，最好为top或bottom。当然还有种极端解决方法大家可以试试就是将 父容器的字体大小为零，font-size:0

（1）转化成（行级）块元素

 display : block复制代码

（2）浮动，浮动后的元素默许可以转化为块元素（可以随便设定宽高属性）

float ： left；复制代码

（3）给 img 定义 vertical-align（消弭底部边距）

img{    
    border: 0;    
    vertical-align: bottom;
}复制代码

（4）将其父容器的font-size 设为 0；

（5）给父标签设定与图片雷同的高度

9. 假如使用了 float 的元素，没有实现并排结果，大概显现的问题？

父级的宽度不足，致使元素没法并排显示；

10. 设定css方式是什么？

行内样式、内部样式（写一个style）、外部样式

11. CSS 内边距和外边界用什么属性表示？

padding margin复制代码

12. 清除所有的默许边距。

padding : 0;
margin : 0;复制代码

13. 单词间距与字母间距属性，中文利用哪一种？

word-spacing : 单词

letter-spacing : 字母、中文

14. 文字怎样加下划线，上划线，删除线

text-decoration : underline | overline | line-through

15. 清除列表符号，背景改成图片

list-style:none;
background-image:url()复制代码

16. 边框（boder）得根本属性都是什么？

宽度（width）

色彩（color）

线形（solid，dashed，dotted，）实线，虚线，点画线

17. 行元素怎样转化为块元素，或者 行级块元素，行级块元素有什么特点

diaplay：block | inline-block

18. 标签上 title 属性与 alt 属性的不同是啥？

title ：鼠标放入时提醒的文字，

alt : 图片途径出错时，提醒文字

19. 怎样防止显现乱码？

<meta charset="UTF-8">

相关教程引荐：CSS视频教程

以上就是2019 CSS经典面试题的具体内容，更多请关注百分百源码网其它相关文章！