2019年前端面试题 | CSS篇（更新于4月15日）

时间 2019-11-17

标签 2019年端面试题 css 更新 4月 15日栏目 CSS 繁體版

原文原文链接

虽然说刷面试题有走捷径之嫌，但我发现，对于我这样没有工做经历的人来讲，实际上是拓展本身实战技能和加深知识理解的一个好机会。javascript

分享出来，也但愿你们不要背完了事，正经的去细细琢磨各类起因。html

本篇是一个题目合集，部分答案我会整理后用本身的话说的尽可能简单，部分网络现成的好答案我就直接贴连接了，也尊重你们的劳动成果，但愿各位不会太介意。前端

若有bug，欢迎指出👏👏java

1. 什么是盒子模型？

盒子模型包括content+padding+border+marginweb

标准盒子模型：宽度=内容的宽度（content）面试

低版本IE盒子模型：宽度=content+border+paddingchrome

2. CSS经常使用选择器有哪些？

segmentfault.com/a/119000001…小程序

3. CSS3新增伪类有哪些？

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

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

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

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

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

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

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

4. CSS3有哪些新增特性

这个问题贼大，做为一个新闻专业出身的人，这种问题简直是脑残，新特性那么多，难道须要我背一遍文档你听吗？

可是，显然面试官并不care你答不答的全，他本身都不定记得，对吧～

咱们彻底能够从我的项目经验出发，好比我本身，在作小程序时用过flex布局，就能够以这个为主，再列举三四个其余的就好了。

为了方便你们，这里先列几个出来：

(1)CSS3 弹性盒（ Flexible Box 或 flexbox）

是一种当页面须要适应不一样的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

具体使用参考 www.jianshu.com/p/5856c4ae9…

注意：必定要分清主轴和侧轴（交叉轴），flex-direction设置的是row，水平就是主轴，垂直就是侧轴；设置为colume，垂直就是主轴，水平就是侧轴，而justify-content是设置主轴排列方式的，align-items是设置侧轴排列方式的。知道这些就大概能用啦～

(2)伪类选择器，参考上面的第三条，列表渲染修改单个列表样式时，上面的nth-child()超好用

(3)边框圆角：border-radius：3px

(4)@font-face，能够引入客户端没有的字体

(5)媒体查询@meida，具体用法：www.cnblogs.com/yan-ck/p/58…

其余参考：blog.csdn.net/lxcao/artic…

5. CSS优先级计算规则

important Infinity

行间样式 1000

id 100

class/属性/伪类 10

标签选择器/伪元素 1

通配 0

6. 如何使用自定义字体

@font-face能够实现，具体使用方法：www.jianshu.com/p/976d95fb8…

7. CSS有哪些继承属性

参考：www.cnblogs.com/thislbq/p/5…

8. CSS单行省略和多行省略

单行：

overflow: hidden;//隐藏溢出
text-overflow:ellipsis;//省略号
white-space: nowrap;//不换行

9. 如何去除inline-blcok元素间隙？

空隙产生缘由：HTML中的换行符、空格符、制表符等空白符，字体大小不为0的状况下，空白符占据必定宽度，使用inline-block会产生元素间的空隙。

解决办法：

把全部的子元素写在一行；
子元素设置浮动；
父元素的font-size设置为0，子元素的font-size设置为实际大小；
使用注释：

<div class="parent"> 
&emsp;&emsp;&emsp; <div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div>
</div>

10. display属性？

block: 指定元素为块级元素，能够设宽高，元素先后自带换行符，好比div、p。 inline：指定元素为内联元素，不能设置宽高，元素不带换行符，会显示在同一行，好比span。 inline-block：行内块元素，兼具前二者的特色，元素先后不带换行符，但又能够设置宽高，好比input\img。 none：能够隐藏元素。经常使用的还有2个，我我的认为很是实用，就是table和table-cell，结合使用在父子元素身上，子元素若是有大段文字，只要再加一个vertical-align:middle，就能轻松将文字垂直居中。 CSS3新增了一个很是适合移动端使用的flex，能很好的适应不一样屏幕大小。

11. box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box。

context-box：W3C的标准盒子模型，设置元素的height/width属性指的是content部分的高/宽；border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽。

12. display:none与visibility:hidden

不少前端的同窗认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留，实际上没那么简单，visibility是一个很是有故事性的属性

一、visibility具备继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。可是若是从新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

二、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，可是其计数器仍在运行。这和display: none彻底不同。

13.visibility属性的collapse属性值

collapse属性颇有意思，当一个元素的 visibility 属性被设置成 collapse 值后，对于通常的元素，它的表现跟 hidden 是同样的。但例外的是，若是这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现会和浏览器不一样而变化。

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

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

14. em\px\rem区别

px：绝对单位，页面按精确像素展现。

em：相对单位，基准点为父节点字体的大小，若是自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

PX特色：

IE没法调整那些使用px做为单位的字体大小；
国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位；
Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)。

EM特色：

em的值并非固定的；
em会继承父级元素的字体大小。

rem特色：

rem是CSS3新增的一个相对单位（root em，根em），这个单位引发了普遍关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

position有哪些值？

一、static（静态定位）：默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

二、relative（相对定位）：生成相对定位的元素，经过top,bottom,left,right的设置相对于其正常（原先自己）位置进行定位。可经过z-index进行层次分级。元素位置变换之后，不会脱离文档流。

三、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级，会脱离文档流。

四、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级。

如何让非文字类元素实现水平垂直居中？

普通div的水平居中

margin: 0 auto;
height: 50px;
width: 80px;

绝对定位的水平居中：

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;

浮动元素的水平垂直居中：

border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

利用绝对定位元素的自动伸缩特性水平垂直居中

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

利用flex布局水平垂直居中（回答这个显得更高端）

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}

在不知道图片大小的状况下，如何设置样式让图片不变形？

max-width: 100%

如何清除浮动？

www.cnblogs.com/hanqingtao/…

请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

www.cnblogs.com/lixuemin/p/…

用纯CSS建立一个三角形

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

rgba和opacity的透明有何不一样？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来讲就是opacity做用于元素和元素全部内容的透明

rgba相对于opacity仍是技高一筹的，固然只要是涉及颜色的，均可以用rgba来设置。

对BFC规范(块级格式化上下文：block formatting context)的理解

BFC有如下特性：

一、内部的Box会在垂直方向，从顶部开始一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加三、每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。四、BFC的区域不会与float box叠加。五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。六、计算BFC的高度时，浮动元素也参与计算。

那么咱们怎样作就能够触发BFC呢

float 除了none之外的值 overflow 除了visible 之外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed） fieldset元素
fieldset元素在以上状况下能够建立BFC

BFC能够解决的问题

margin叠加的问题，咱们将某个元素放到咱们新建的BFC里面就能够避免margin叠加、
对于左右布局的元素，咱们能够给右侧的元素添加overflow:hidden或者auto，左侧的是float:left
能够清除浮动，计算BFC高度，浮动元素不会撑开父元素的高度，咱们可让父元素触发BFC,即便用overflow:hidden

媒体查询

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

案例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

圣杯布局和双飞翼布局

www.cnblogs.com/imwtr/p/444…

浏览器解析CSS选择器

自右向左

响应式设计

怎么让浏览器支持小于12px 的文字？

.Num{
    display: inline-block;
    font-size: 14px;
    transform: scale(0.8);
 }

link和@import的区别

link属于XHTML标签，而@import是CSS提供的。
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
link方式的样式权重高于@import的权重。
使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。

重排和重绘

www.cnblogs.com/zichi/p/472…

CSS优化与性能提升

www.cnblogs.com/xiaoloulan/…

纯属我的记录，未完待续……

做者：梭梭酱加油鸭连接：https://juejin.im/post/5ca80d366fb9a05e3345dccf来源：掘金著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

2019年前端面试题 | CSS篇 （更新于4月15日）