03-常见CSS面试题总结
HTML 面试题
Question1: 如何理解HTML语义化
好处：
-
让人更容易读懂（增加代码可读性）
-
让搜索引擎更容易读懂（SEO搜索引擎优化）
Question2: 默认情况下，哪些HTML标签是块级元素，哪些是内联元素
- 块状元素(独占一行)：display:block/table; 有div h1 h2 table ul ol p 等
- 内联元素：displat:inline/inline-block; 有span img input button 等
CSS面试题
知识模块：布局、定位、图文样式、响应式、CSS3
布局：
Question1: 盒子模型宽度如何计算
1.标准模型
知识点！！！：offsetWidth = (内容宽度+内边距+边框)，无外边距
因此，答案就是122px(100+10+10+1+1=122)
补充：如果让offsetWidth=100px，该怎么做？
使用IE模型：box-sizing: border-box
博客参考：https://segmentfault.com/a/1190000013069516
Question2: margin纵向重叠问题
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的也会发生重叠，会被忽略
- 答案：15px
Question3: margin 负值问题
- margin-top 和margin-left 负值，元素向上、向左移动
- margin- right 负值，右侧元素左移，自身不受影响
- margin- bottom负值，下方元素上移，自身不受影响
Question4: BFC理解和应用
什么是BFC？ 如何应用？
- Block format context, 块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
常见形成BFC的条件：
- float不是none
- position是absolute 或者 fixed
- overflow不是visible
- display是flex inline- block等
BFC应用：
- 清除浮动
Question5: float布局的问题，以及clearfix
如何实现圣杯布局和双飞翼布局？
圣杯布局和双飞翼布局：
- 三栏布局，中间一栏最先加载和渲染（内容最重要）
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于pc网页
圣杯布局和双飞翼布局的技术总结：
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，圣杯用padding，双飞翼用margin
圣杯布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
/* 左侧left的width是200px,右侧right的width是150px，所以设置内边距 */
padding-left: 200px;
padding-right: 150px;
}
#container .column {
/*将左中右均设置为左浮动*/
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
/* 相对于自身移动，不会影响任何元素*/
position: relative;
background-color: yellow;
width: 200px;
/* 左窗口相当于在center后面，设置margin-left: -100%后，再往左移200px*/
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
/*可以理解成对于其他外界看来，设置之后自身的框宽度变成0，所以被挤到center后面，不用浮动下来了*/
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
双飞翼布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style type="text/css">
body {
min-width: 550px;
}
.col {
/*使用float进行布局*/
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
/*双飞翼布局通过margin为两边留白*/
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
/*这里和圣杯布局一致，直接设置一个margin-left就能到最左边*/
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
/*这里和圣杯布局不一样，需要使用margin-left来拖拽right框*/
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
- 圣杯布局通过padding为左右两边留白，双飞翼布局通过margin为左右两边留白。
- 圣杯布局左边通过position: relative;以及 margin-left: -100%;实现，双飞翼布局通过 margin-left: -100%;实现
- 圣杯布局右边通过margin-right: -150px;实现，双飞翼布局通过 margin-left: -190px;实现
手写clearfix(清除浮动)
- 原理：通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ，并且设置clear属性清除浮动。
Question6: flex画骰子
-
flex实现一个三点的骰子
常用语法回顾：
- flex-direction: 主轴方向，可以横向也可以纵向
- justify-content： 主轴对齐方式，从开始对齐，从结束对齐，居中对齐，
- align-items： 交叉轴对齐方式
- flex-wrap： 是否换行
- align-self： 子元素在交叉轴的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 画骰子</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2) {
/*交叉轴的居中对齐*/
align-self: center;
}
.item:nth-child(3) {
/* 尾对齐*/
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
定位：
Question1: absolute 和relative分别依据什么定位
- relative 依据自身定位
- absolute依据最近一层的定位元素定位
定位元素：
- absolute relative fixed
- body
Question2: 居中对齐有哪些实现方式
-
水平居中
- inline元素：text-align:center
- block元素：margin:auto
- absolute元素：left:50%+margin-left负值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平对齐</title> <style type="text/css"> .container { border: 1px solid #ccc; margin: 10px; padding: 10px; } .item { background-color: #ccc; } .container-1 { text-align: center; } .container-2 .item { width: 500px; margin: auto; } .container-3 { position: relative; height: 100px; } .container-3 .item { width: 300px; height: 100px; position: absolute; /*往右移整个父元素的50%，左边界正好在父元素的中轴上*/ left: 50%; /*设置宽度的负一半*/ margin-left: -150px; } </style> </head> <body> <div class="container container-1"> <span>一段文字</span> </div> <div class="container container-2"> <div class="item"> this is block item </div> </div> <div class="container container-3"> <div class="item"> this is absolute item </div> </div> </body> </html> -
垂直居中
- inline元素：line-height的值等于height值
- absolute元素：top:50% + margin-top 负值
- absolute元素：transform(-50%, -50%)
- absolute元素：top, left,bottom,right = 0 + margin:auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>垂直对齐</title>
<style type="text/css">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
height: 200px;
}
.item {
background-color: #ccc;
}
/*inline元素：line-height的值等于height值*/
.container-1{
text-align: center;
line-height: 200px;
height: 200px;
}
/*absolute元素：top:50% + margin-top 负值,必须要知道子元素的尺寸*/
.container-2 {
position: relative;
}
.container-2 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
/* absolute元素：transform(-50%, -50%)，CSS3新属性，如果有兼容问题慎用*/
.container-3 {
position: relative;
}
.container-3 .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
/*absolute元素：top, left,bottom,right = 0 + margin:auto*/
/* 相当于上下左右边距都自动填充，浏览器兼容性没有问题*/
.container-4 {
position: relative;
}
.container-4 .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is item
</div>
</div>
<div class="container container-3">
<div class="item">
this is item
</div>
</div>
<div class="container container-4">
<div class="item">
this is item
</div>
</div>
</body>
</html>
图文样式：
Question1: line-height的继承问题
- 写具体数值，如30px，则继承该值（比较好理解）
- 写比例，如2/1.5，则继承该比例（比较好理解）
- 写百分比，如200%，则继承计算出来的值（考点）
20px *200% = 40px
所以答案是40px
先算完再继承
响应式：
Question1: 响应式是什么
-
rem是什么
- rem是一个长度单位
- px是绝对长度单位，最常用
- em,相对长度单位，相对于父元素，不常用
- rem,相对长度单位，相对于根元素，常用于响应式布局
Question2: 如何实现响应式
响应式布局的常见方案？
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem, 基于根元素的相对单位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局</title>
<style type="text/css">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div1">
this is div
</div>
</body>
</html>
响应式：vw/vh
rem的弊端：阶梯性
网页视口尺寸：
- window.screen.height //屏幕高度
- Window.innerHeight //网页视口高度，浏览器可以显示内容部分的高度
- document.body.clientHeight //body高度
如上图所示：667就是屏幕高度，553就是网页视口高度，左边红色的就是body高度
- vh： 网页视口高度的1/100
- vw： 网页视口宽度的1/100
- vmax取两者最大值
- vmin取两者最小值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw vh test</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
background-color: red;
width: 10vw;
height: 10vh;
}
</style>
</head>
<body>
<p>vw vh 测试</p>
<div id="container">
</div>
<script>
// window.innerHeight === 100vh
// window.innerWidth === 100vw
</script>
</body>
</html>
扫一扫
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
