2019前端面试题（html、css篇）

在此分享、整理前端面试题，若有解答错误的地方，烦请各位大佬指正，感谢！！

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

标准的盒子模型是content-box，盒子的width和height分别等于content的width和height；低版本的IE盒子模型是border-box，盒子的width=content的width+padding+border，盒子的height=content的height+padding+border

CSS选择符有哪些，哪些属性能够继承

选择符：

• id选择器(# myid)
• 类选择器(.myclassname)
• 标签选择器(div, h1, p)
• 相邻选择器(h1 + p)
• 子选择器(ul > li)
• 后代选择器(li a)
• 通配符选择器( * )
• 属性选择器(a[rel = "external"])
• 伪类选择器(a: hover, li:nth-child)

可继承的样式：

• font-size
• font-family
• color
• text-indent

css伪类有哪些

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。（MDN解释） :active 、:focus、:hover、:link、visited、:first-child、:last-child

li与li之间有看不见的空白间隔是什么缘由引发的，有什么解决办法

li设置成行内元素了，行内元素之间是会有必定间隙的 解决：

• 设置float:left
• ul设置font-size：0 -
• 标签间不要留空格

为何要初始化css样式

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

谈谈css定义的权重

行内样式,1000，ID100，属性选择器/class/伪类10，元素名/伪元素1

相同的权重：之后面出现的选择器为最后规则

不一样的权重，权重值高则生效

解释下为何要清除浮动，清除浮动的方式

浮动会脱离文档流，浮动能够内联排列，会致使父元素高度坍塌，

方式：

• 给父元素一个高度
• 在同一级加一个div，style是clear:both
• 父元素加伪元素 .clearfix:after { display: table; content: " "; clear: both; }

使用css预处理器吗，有哪些特性

嵌套语法、变量、@import、混入、继承、函数、逻辑控制

移动设备忽略将页面中的数字识别为电话号码的方法

<meta name = "format-detection" content = "telephone=no">

flex布局

www.ruanyifeng.com/blog/2015/0…

css选择器优先级

• 越具体越优先
• 后面的会覆盖前面的
• important优先级最高，少用

单行和多行文字超出省略

• 单行英文：

overflow: hidden;
 text-overflow: ellipsis;
复制代码

• 单行中文

overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
复制代码

多行

display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;  
overflow: hidden;
复制代码