标签：面试题 补全 前端 元素 100px height html div 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>
标签：面试题,补全,前端,元素,100px,height,html,div,css 来源： https://www.cnblogs.com/zc-lee/p/15583269.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。