前端面试笔试题目-CSS专项练习(基础)

简介: 前端面试笔试题目-CSS专项练习(基础)

1、标签、类、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{
                color:rgb(255, 0, 0);
                font-size:20px;
            }
            .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>


总结:


  • CSS优先级:!important、内联、ID选择器 、类、标签


2、伪类选择器(li:first-child)


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


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

总结:


1、li样式

image.png

2、伪类


  • 在已有的元素处于莫个状态时,为其添加相对应的样式,这个状态是根据用户的行为而动态变化的,我们称之为伪类


3、伪元素(div:after)


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


<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div:after{
                content:"";/*一定要有content,不然不起作用*/
                width:20px;
                height:20px;
                display:block;/*块级元素*/
                background:rgb(255, 0, 0);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


总结:


伪元素


  • 创建一些不存在文档树中的元素,为其添加相对应的样式,我们称之为伪元素,CSS2中的伪元素用一个冒号:,CSS3中的伪元素用两个冒号::,用来区分伪类和伪元素


3、css画圆(border)


  • 请将html模块的div元素设置为一个半径是50px的圆,且边框为1px的黑色实线
  • 要求:1、圆角属性仅设置一个值 。 2、圆角属性单位请使用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>

总结:



4、盒子模型(padding、margin)


  • 请将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;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>


5、设置文字颜色(嵌入式-四种方法)


  • 请使用嵌入样式将所有p标签设置为红色文字


<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
    p{
        color:red;
    }
        </style>
    </head>
    <body>
        <p>欢迎来到牛客网</p>
    <p>在这里,我们为你提供了IT名企的笔试面试题库</p>
    <p>在这里,我们以题会友</p>
    </body>
</html>


总结:


  • 1、行内样式:使用 HTML 标签的 style 属性定义 CSS 样式;
  • 2、内嵌样式:使用 <style> 标签在 HTML 文档头部(<head><head> 之间)定义 CSS 样式;
  • 3、链接式:使用 <link> 标签引入外部 CSS 样式表文件。
  • 4、导入式:使用 @import 命令导入外部 CSS 样式表文件。


6、浮动和清除浮动


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


<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .wrap {
                /*补全代码*/
                overflow:hidden;/*超出的部分会被隐藏*/
            }
             .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>


总结:


1、为什么要清除浮动?


  • 写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0


2、清除浮动的方法:


  • 1、给父级元素单独定义高度(height)
  • 2、在标签结尾处加空div标签 clear:both
  • 3、父级div定义 伪类:after 和 zoom
  • 4、父级div定义 overflow:hidden
  • 5、父级div定义 overflow:auto


来源:https://www.cnblogs.com/yuer20180726/p/11149620.html


7、固定定位(position)


  • 请将html模块类为"box"的div元素固定在视口的左上角


<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                /*补全代码*/
                position:fixed;
                left:0px;
                top:0px;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>


总结:


position属性:


image.png

7、CSS单位(px、em、rem)


  • 1、请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
                font-size:20px;
                width:4em;
                height:4em;
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>
  • 2、请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            div {
                /*补全代码*/
                width:4rem;
                height:4rem;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

总结:


CSS 常见单位
px 绝对单位,页面按精确像素展示
em 相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算
rem 相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性



相关文章
|
21小时前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
13 1
|
1天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
|
1天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
6 0
|
4天前
|
Web App开发 前端开发 容器
前端秘法进阶----css中那些不能说的秘密
前端秘法进阶----css中那些不能说的秘密
|
4天前
|
前端开发
前端秘法基础式(CSS)(第一卷)
前端秘法基础式(CSS)(第一卷)
|
17天前
|
前端开发 JavaScript API
|
19天前
|
定位技术 调度
【数据结构入门精讲 | 第十九篇】考研408、企业面试图专项练习(二)
【数据结构入门精讲 | 第十九篇】考研408、企业面试图专项练习(二)
18 0
|
19天前
|
存储 算法
【数据结构入门精讲 | 第十八篇】考研408、企业面试图专项练习(一)
【数据结构入门精讲 | 第十八篇】考研408、企业面试图专项练习(一)
15 0
|
19天前
|
存储 算法 索引
【数据结构入门精讲 | 第四篇】考研408、企业面试表专项习题
【数据结构入门精讲 | 第四篇】考研408、企业面试表专项习题
31 0
|
19天前
|
人工智能 算法
【数据结构入门精讲 | 第十三篇】考研408、公司面试树专项练习(二)
【数据结构入门精讲 | 第十三篇】考研408、公司面试树专项练习(二)
22 0

相关产品

  • 云迁移中心