前端面试题汇总(全网最全)1

CSS 部分问题

1. 问题：CSS属性是否区分大小写？

   ul {
       MaRGin: 10px;
   }
   

   答案：不区分。HTML和CSS都对大小写不敏感，但为了更好的可读性和团队协作，一般都使用小写。然而，在XHTML中，元素名称和属性必须使用小写。

2. 问题：行内元素（inline）设置margin-top和margin-bottom是否起作用？?答案：不起作用。HTML中的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。替换元素是指用作其他内容占位符的元素，例如img和input等。非替换元素是指内容包含在文档中的元素，例如段落。对于行内元素，虽然规范允许应用外边距，但对行高没有影响，因此对视觉效果没有影响。然而，对于替换元素，设置的外边距会影响行高。示例

3. 问题：对内联元素设置padding-top和padding-bottom是否会增加它的高度？?答案：不会。对于行内元素，设置左右内边距会有影响。而设置上下内边距，虽然可以看到内边距区域有增加，但对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则会撑开父元素。示例

4. 问题：设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？?答案：不会。rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

5. 问题：伪类选择器:checked将作用于input类型为radio或者checkbox，不会作用于option。?答案：不对。伪类选择器:checked可以应用于任何被选中或切换到打开状态的radio、checkbox或option元素。

6. 问题：在HTML文档中，伪类:root总是指向html元素？?答案：不是。:root指向的是创建的根。这个根可能不是html，如果是片段HTML，没有创建根，则为片段的根。示例

7. 问题：translate()方法能否移动一个元素在z轴上的位置？?答案：不能。translate()方法只能改变x轴，y轴上的位移。

8. 问题：以下代码中文本“Sausage”的颜色是什么？

   <ul class="shopping-list" id="awesome">
       <li><span>Milk</span></li>
       <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
   </ul>
   

   ul {color:red;}
   li {color:blue;}
   

   答案：蓝色。

9. 问题：以下代码中文本“Sausage”的颜色是什么？

   <ul class="shopping-list" id="awesome">
       <li><span>Milk</span></li>
       <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
   </ul>
   

   ul {color:red;}
   #must-buy {color:blue;}
   

   答案：蓝色。

10. 问题：以下代码中文本“Sausage”的颜色是什么？

    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    

    .shopping-list .favorite {
        color: red;
    }
    #must-buy {
        color: blue;
    }
    

    答案：蓝色。

11. 问题：以下代码中文本“Sausage”的颜色是什么？

    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    

    ul#awesome {
        color: red;
    }
    ul.shopping-list li.favorite span {
        color: blue;
    }
    

    答案：蓝色。

12. 问题：以下代码中文本“Sausage”的颜色是什么？

    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    

    ul.shopping-list li .highlight {
        color: red;
    }
    ul.shopping-list li .highlight:nth-of-type(odd) {
        color: blue;
    }
    

    答案：蓝色。

13. 问题：以下代码中文本“Sausage”的颜色是什么？

    <ul class="shopping-list" id="awesome">
        <li><span>Milk</span></li>
        <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
    </ul>
    

    #awesome .favorite:not(#awesome) .highlight {
        color: red;
    }
    #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
        color: blue;
    }
    

    答案：蓝色。

14. 问题：#example位置如何变化？

    <p id="example">Hello</p>
    

    #example {margin-bottom: -5px;}
    

    答案：向上移动5px。

15. 问题：#example位置如何变化？

    <p id="example">Hello</p>
    

    #example {margin-left: -5px;}
    

    答案：向左移动5px。

16. 问题：#i-am-useless会被浏览器加载吗？

    <div id="test1">
        <span id="test2"></span>
    </div>
    

    #i-am-useless {background-image: url('mypic.jpg');}
    

    答案：不会。

17. 问题：mypic.jpg会被浏览器加载吗？

    <div id="test1">
        <span id="test2"></span>
    </div>
    

    #test2 {
        background-image: url('mypic.jpg');
        display: none;
    }
    

    答案：会被下载。

18. 问题：mypic.jpg会被浏览器加载吗？

    <div id="test1">
        <span id="test2"></span>
    </div>
    

    #test1 {
        display: none;
    }
    #test2 {
        background-image: url('mypic.jpg');
        visibility: hidden;
    }
    

    答案：不会被下载。

19. 问题：only选择器的作用是什么？

    @media only screen and (max-width: 1024px) {argin: 0;}
    

    答案：停止旧版本浏览器解析选择器的其余部分。only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

20. 问题：overflow:hidden是否形成新的块级格式化上下文？

    <div>
        <p>I am floated</p>
        <p>So am I</p>
    </div>
    

    div {overflow: hidden;}
    p {float: left;}
    

    答案：会形成。会触发BFC的条件有：float的值不为none、overflow的值不为visible、display的值为table-cell, table-caption, inline-block中的任何一个、position的值不为relative和static。

21. 问题：screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

    @media only screen and (max-width: 1024px) {margin: 0;}
    

    答案：浏览器视窗。