px,em,rem.vw,vh有什么区别?
基本概念
- px:就是像素pixel的缩写
- em:是相对单位，1em等于当前元素的1font-size的大小
- rem:是CSS3新增的相对单位，1rem等于html的1font-size 大小
- vw和vh:是相对单位，1vw是视口宽度1%,1vh是视口高度的1%
扩展知识点：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>
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的作用
- 解决margin 塌陷
- 清楚浮动
如何触发 BFC
- overflow:hidden
- display:inline-block/table-cell/flex
- position:absolute/fixed
代码演示
<!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>
你对盒子模型了解多少
什么时是盒子模型
- 盒子模型就是元素在网页中实际占据的大小
盒子模型的计算方式
- 盒子模型=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("d
</body>
iv1").offsetWidth;
console.log(w);
</script>
</body>
</html>
