摘要：替换元素是指用作为其他内容占位符的一个元素。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。折叠的结果两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个外边距一正一负时，折叠结果是两者的相加的和。
1 . CSS 属性是否区分大小写？
答：不区分。 HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。
2 . 行内(inline)元素 设置margin-top和margin-bottom 是否起作用？padding-top和padding-bottom是否会增加它的高度？
答：行内元素又分为替换元素（replaced element）和非替换元素（non-replaced element）。
替换元素: 是指用作为其他内容占位符的一个元素。如： img、input 等起作用;
非替换元素:是指内容包含在文档中的元素 如：span等不起作用；
3 . 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？
答：rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
4 . translate()方法能移动一个元素在z轴上的位置？
答：不能。translate()方法只能改变x轴，y轴上的位移。
5 . only 选择器的作用是？ @media only screen and (max-width: 1024px) {margin: 0;}
答：停止旧版本浏览器解析选择器的其余部分。
only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；
对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；
另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。
6 . 浏览器CSS匹配顺序
答：浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。
比如#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class="red"的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，
如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
7 . display:none 和visibilty:hidden的区别：
答：display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别: visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而display:none`属性会使这个对象彻底消失（看不见也摸不到）
8 . 请描述 BFC(Block Formatting Context) 及其如何工作。：
答：浮动元素和绝对定位元素，非块级盒子的块级容器
（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子， 都会为他们的内容创建新的BFC（块级格式上下文）
会触发BFC的条件有：
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block 中的任何一个。
position的值不为relative 和static。
折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
9 . 谈谈样式的优先级
优先级逐级增加
0.元素(类型)选择器 （h1） 和 伪元素选择器 （:before）
1.类选择器（.demo）属性选择器（[type="radio"]）
2.ID选择器（#demo）
内联样式
当在一个样式声明上使用 !important规则时，该样式声明会覆盖CSS中任何其他的声明。
Never 永远不要在全站范围的 css 上使用 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在你的插件中使用 !important
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
10 . 遇上过FOUC吗？如何解决FOUC
答：Flash of Unstyled Content (FOUC) 文档样式短暂失效
只需要在文档的head元素中添加一个link元素或者添加script元素就可以防止FOUC的发生.
link元素解决方案
My Page
script元素解决方案
My Page
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112086.html
摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
阅读 2453·2021-11-15 11:38
阅读 2836·2021-11-02 14:44
阅读 3816·2021-09-26 10:13
阅读 3056·2021-08-13 15:02
阅读 778·2019-08-30 15:56
阅读 1432·2019-08-30 15:53
阅读 2360·2019-08-30 13:01
阅读 3187·2019-08-29 12:57
