前端面试题 - css

2021/11/21 6:09:59

编程Tag： 前端面试题 css 元素 html div 补全 height 100px

本文主要是介绍前端面试题 - css，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

css

选择器

标签、类、ID选择器

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                font-size:20px;
                color:rgb(255, 0, 0);
            }
            .green{
                color:rgb(0, 128, 0);
            }
            #black{
                color:rgb(0, 0, 0);
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

伪类选择器

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            li:nth-child(2n){
                background:rgb(255, 0, 0);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

伪元素

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div::after{
                display:block;
                content:'';
                width:20px;
                height:20px;
                background:rgb(255,0,0)
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

样式设置

按要求写一个圆

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：

圆角属性仅设置一个值
圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                width:100px;
                height:100px;
                border-radius:50px;
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

设置盒子宽高

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            .box{
                width:100px;
                height:100px;
                padding:20px;
                margin:10px;
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

布局

浮动和清除浮动

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div{
                border:1px solid;
            }
            .wrap {
                /*补全代码*/
                overflow:hidden;
            }
            /* .wrap::after {
                content: '';
                display: block;
                clear: both;
            } */
             .left {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
             .right {
                width: 100px;
                height: 100px;
                /*补全代码*/
                float:left;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='left'></div>
            <div class='right'></div>
        </div>
    </body>
</html>

绝对定位

请将html模块类为"btn"的div元素中心定位在类为"wrap"的父级div元素右上顶点处。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                width: 100px;
                height: 100px;
                border: solid 1px black;
                /*补全代码*/
                position:relative;
            }
            .btn {
                width: 20px;
                height: 20px;
                text-align: center;
                background-color: red;
                /*补全代码*/
                position:absolute;
                top:-10px;
                right:-10px;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div class='btn'>X</div>
        </div>
    </body>
</html>

行内元素垂直水平居中

请将html模块中p元素的内容设置为垂直水平居中。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            p {
                width: 800px;
                height: 40px;
                border: solid 1px black;
                /*补全代码*/
                text-align: center;
                line-height:40px;
                /* display:flex;
                justify-content:center;
                align-items:center; */
            }
        </style>
    </head>
    <body>
        <p>牛客网，是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。</p>
    </body>
</html>

单位

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                width:4em;
                height:4em;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                /* rem针对根元素，em针对父元素*/
                height:4rem;
                width:4rem;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

这篇关于前端面试题 - css的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！