「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
1. line-height 如何继承
1.1 题目
<!-- 如下代码：p标签的行高是多少 -->
<style>
body {
font-size: 20px;
line-height: 200%;
}
p {
font-size: 16px;
}
</style>
<body>
<p>Hello world</p>
</body>
1.2 答案
40px
1.3 解题
- 写具体数据，如30px,则继承该值
- 写比例，如2/1.5，则继承改比例
- 写百分比，如200%，则继承计算出来的值
2. rem/em/rem 是什么？
rem 是一个长度单位
- px, 绝对长度单位，最常用
- em,相对长度单位，相对于父元素，不常用
- rem,相对长度单位，相对于根元素，常用于响应式布局
width: 1rem;
background-color: #ccc;
2.1 rem 的弊端：阶梯性
3. 响应式布局的常见方案
3.1 media-query,根据不同的屏幕宽度设置根font-size
@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;
}
}
4. vw、vh
4.1 网页视口尺寸
- window.screen.height // 屏幕高度
- window.innerHeight // 网页视口高度
- document.body.clientHeight // body高度
4.2 在手机上的尺寸
- 屏幕高度667px,网页适口高度 553px
4.3 vh vw vman vmin
- 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>
5. 盒模型宽度计算
- offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距
- 因此答案是
122px
如何让offsetWidth 等于 100px, 该如何做？
添加 box-sizing: border-box;
6. margin 纵向重叠问题
如下代码 AAA 和 BBB 之前的间距是多少
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
6.1 答案：
15px
6.2 解题
- 相邻元素的margin-top 和 margin-bottom 会发生重叠
- 空白内容的
<p></p>也会重叠
7. margin 负值的问题
- margin-top 和 margin-left 负值，元素向上、向左移动
8. BFC理解和应用
- Block format context, 块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
- float 不是none
- position 是 absolute 或 fixed
- overflow 不是 visible
- display 是 flex inline-block
- 清除浮动
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.bfc {
overflow: hidden; /* 触发元素 BFC */
}
</style>
<div class="container bfc">
<img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg" class="left" style="magin-right: 10px;"/>
<p class="bfc">某一段文字……</p>
</div>
9. 手写清除浮动
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE低版本 */
}
10. float 布局
圣杯布局 和 双飞翼布局的技术总结
- 使用float 布局
- 两侧使用margin 负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个中padding 一个用margin
11. flex布局
11.1 常用语法回顾
- flex-direction // 横向还是纵向布局
- justify-content // 对齐方式
- align-items // 开始对齐 结束对齐 居中对齐
- flex-wrap // 是否换行
- align-self // 子元素在交叉轴的重载对齐方式：开始对齐 结束对齐 居中对齐
11.2 flex 实现一个三色 色子
<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>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
