px、em、rem、vw、vh区别？
基本概念
px：就是像素pixel的缩写
em：是相对单位，1em等于当前元素的 1font-size 的大小
rem：是CSS3新增的相对单位，1rem等于html的 1font-size 大小
vw和vh：是相对单位，1vw是视口宽度1%，1vh是视口高度的1%
什么是视口？
视口 ≠ 屏幕大小，视口去掉浏览器头尾
演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 14px;
}
div {
width: 80vw;
/* width:5rem;*/
height: 80vh;
/* text-indent: 5em; */
font-size: 20px;
background-color: #ccc;
}
</style>
<body>
<div></div>
</body>
</html>
扩展知识点： vmax 和 vmin
vmax vh和vw中较大的值
vmin vh和vw中较小的值
如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax或vmin
CSS选择器优先级的理解
常用的CSS选择器
id、class、标签、伪类、通配
选择器优先级的计算方式
- important! > 行间样式 > id > class > 标签 > 通配
- 注意：继承的优先级永远没有直接给的优先级高
- 组合起来：ABCD
伪类=class
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
color: red;
}
</style>
<body>
<div id="div1" class="div1">
<p id="p1" class="p1">
<span id="span1" class="span1">@说人话的前端 - bilibili</span>
</p>
</div>
</body>
</html>
总结
该题目如何回答？
1、常用的CSS选择器
2、讲清楚选择器优先级的计算方式
CSS哪些样式是可以继承的
CSS中可继承的样式
如何使用Chrome调试工具验证
line-height
line-height: 200px 直接继承
line-height: 1.5 根据自己的字体大小计算
line-height:200% 根据父级的字体大小计算
演示代码
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
body {
font-size: 20px;
color: red;
font-style: italic;
font-weight: bold;
text-indent: 2em;
text-align: center;
word-spacing: 5px;
letter-spacing: 10px;
line-height: 200%;
}
span {
font-size: 14px;
}
</style>
<body>
<div>
<p>
<span>说人话的前端 - bilibili</span>
</p>
</div>
</body>
</html>
谈谈你对BFC的理解
什么是BFC
BFC 是 Block Formatting Context （块级格式上下文）的缩写
BFC是一个独立的空间，里面子元素的渲染不影响外面的布局
BFC作用
1、解决margin塌陷
2、清除浮动
如何触发BFC
- overflow: hidden
- display: inline-block / table-cell / flex
- position: absolute / fixed
代码演示
解决margin塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 200px;
height: 200px;
background: #ccc;
margin: 50px;
}
.box {
overflow: hidden;
}
</style>
<body>
<div class="box">
<section>section1</section>
</div>
<section>section2</section>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 200px;
height: 200px;
background: #ccc;
margin: 20px;
}
.box {
display: inline-block;
background: black;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
<body>
<div class="box">
<section class="left">left</section>
<section class="right">right</section>
</div>
</body>
</html>
盒子模型
什么是盒子模型
盒子模型就是元素在网页中实际占据的大小
盒子模型的计算方式
盒子模型 = width/height+padding+border 注意：没有margin
box-sizing
当box-sizing的值为 border-box 时，会改变盒子模型的计算方式
盒子模型 = width/height = 内容宽高+border+padding
offsetWidth
JavaScript中获取盒子模型的方式是 obj.offsetWidth / offsetHeight
演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@说人话的前端 - bilibili</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* 盒子模型=200+20+10
*/
div {
width: 500px;
height: 200px;
padding: 10px;
border: 5px solid red;
background-color: #ccc;
box-sizing: content-box;
}
</style>
<body>
<div id="div1">说人话的前端 - bilibili</div>
<script>
let w = document.getElementById("div1").offsetWidth;
console.log(w);
</script>
</body>
</html>
