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

2024-01-01 13:18:17

CSS 部分问题

  1. 问题:CSS属性是否区分大小写?

    ul {
        MaRGin: 10px;
    }
    

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

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

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

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

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

  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;}
    

    答案:浏览器视窗。

文章来源:https://blog.csdn.net/shrfgbfg/article/details/135306375
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。