2019CSS经典面试题

这些是我自己在学习过程中总结的一些知识点，本篇文章我将以面试题的形式分享给大家，希望对大家有所帮助，本文篇幅较长，您若认真看完，并且反复阅读，我相信对您的学习或者是面试，都会有一定帮助，同时希望大家批评指正！

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和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;//适用场所：计算一个元素的绝对位置复制代码

实例题（根据盒模型解释边距重叠）？

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

      
    
复制代码

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

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

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

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

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

BFC 规定了内部的 Block Box 如何布局。

定位方案：

满足下列条件之一就可触发 BFC

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

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

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

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

元素。

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

元素。

:enabled

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

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

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

:after在元素之后添加内容

水平居中p：

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

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

第一种：未知元素宽高

    我想居中显示

复制代码

第二种：已知元素宽高的

    我想居中显示

复制代码

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

          

复制代码

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

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

还有更加优雅的居中方式就是用 flex布局，点击查看我的文章 掌握flex布局，这篇文章就够了

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

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

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

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

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

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

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

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

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); 
}复制代码

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

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

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

更多关于 flex 布局，请点击查看我的文章 你真的了解 flex 布局吗？

首先，需要把元素的宽度、高度设为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;复制代码

第一种真正的品字：

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

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

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

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

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

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

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

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

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

如果都找不到，则为 initial containing block。

补充：

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

2. absolute: 向上找最近的定位为absolute/relative的元素

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

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

在谷歌浏览器里，使用 collapse值和使用 hidden值没有什么区别。

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

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

visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

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

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

出现浮动的原因：

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

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

浮动带来的问题：

清除浮动的方式：

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;"就行了.

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

    



 .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属性。
        }复制代码

自动变成display:block

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

复制代码

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

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

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其它 CSS 预处理器语言：

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

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

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

display:inline后不应该再使用width、height、margin、padding以及float。

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

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

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

不滥用web字体

对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

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

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

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

◆何时应当使用margin

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

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

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

◆何时应当时用padding

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

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

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

◆浏览器兼容性问题

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

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

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

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

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

复制代码

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

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

注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。

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

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

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

复制代码

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

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

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