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、混入、继承、函数、逻辑控制

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

flex布局

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

css选择器优先级

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

转载于:https://juejin.im/post/5ce8eda0e51d4555fd20a2a8