📒 HTML
🏷 如何理解 HTML 语义化
语义化的优点：
1、让人更容易读懂代码（增强代码可读性）
2、让搜索引擎更容易读懂（SEO）
🏷 块级元素？内联元素？
display: block; / display: table;
<div>
<h1>...
<table>
<ul>
<ol>
<p> 等
display: inline; / display: inline-block;
<span>
<i>
<img>
<input>
<button> 等
📒 CSS
📃 CSS 布局
🏷 盒模型宽度的计算
❓ ****❓ div1 的 offsetWidth 是多大？
offsetwidth 的定义=（内容宽度 + 内边距 + 边框），不包含外边距
答案：
122px
❓ 如果要让 offsetWidth = 100px ,怎么处理
box-shzing: border-box;
🏷 margin 纵向重叠的问题
❓ ****❓ ****❓ AAA 和 BBB 之间的距离是多少？
1、相邻元素的 margin-top和 margin-bottom会发生重叠
2、空内容的 <p></p>margin 也会重叠
答案：
15px
因为中间三个空元素 margin 被重叠了，注意，是重叠而不是不生效
因为如果空元素<p></p>的margin很大，也是可以看出的。
🏷 margin 负值的问题
❓ 对 margin 的 top \ left \ right \ bottom 设置城负值，有什么效果？
答案：
1、margin-top 和 margin-left 为负值的时候，元素会向上、向左移动
2、margin-right 是负值，右侧的元素会往左移动，自身不受影响
3、margin-top 是负值的时候，底部的元素会往上移动，自身不受影响
🏷 BFC 的理解和应用
❓ 什么是BFC？
答案：
Block format context 块级格式化上下文
一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素
形成BFC 的常见条件
1、float不是 none
2、position是 absolute或者 fixed
3、overflow 不是 visible，是auto或者hidden
4、display是 flex``inline-block等
❓ 如何应用 BFC？ 或者说 BFC 的作用是什么？
答案：
可以用来清除浮动
<div class="box">
<!-- 图片浮动，撑不开盒子了 -->
<img style="float: left;"/>
</div>
只需要把盒子 .box 变成 BFC 元素，图片就会撑开盒子
比如 :
.box {
overflow: hidden;
}
🏷 float 布局
❓ 手写 clearfix
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容IE低版本 */
}
/* 子元素浮动，这个 class 加到父元素上 */
🏷 flex 布局
❓ flex 实现一个三点的骰子
常用语法回顾
/* 主轴的方向 */
flex-direction
/* 主轴对齐方式 */
justify-content
/* 交叉轴对齐方式 */
align-items
/* 是否换行 */
flex-wrap
/* [子元素]在交叉轴的对齐方式 */
align-self
图示：先分散，在控制子元素在垂直轴的对齐方式
<div class="wraper">
<span></span>
<span></span>
<span></span>
</div>
<style>
.wraper {
width: 300px;
height: 300px;
border: 1px solid #000;
/* [1] 父元素 flex 布局，两侧对齐 */
display: flex;
justify-content: space-between;
}
.wraper span {
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
/* [2] 第二个元素，交叉轴方向居中 */
.wraper span:nth-child(2) {
align-self: center;
}
/* [3] 第三个元素，交叉轴方向靠在最后 */
.wraper span:nth-child(3) {
align-self: flex-end;
}
</style>
📃 CSS 定位
🏷 absolute 和 relative 分别依据什么来定位？
答案：
absolute：依据最近的一层定位元素来定位，没有的话依据body定位
relative：依据自身定位
🏷 居中对齐的实现方式
❓ 水平居中
1、inline 元素
text-align: center;
2、block 元素
margin: auto;
3、absolute 元素
width: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
❓ 垂直居中
1、inline 元素
height: 40px;
line-height: 40px;
2、absolute 元素
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
📃 CSS 图文样式
🏷 inline-height 如何继承
- 写具体数值，比如 36px 会直接继承（很好理解）
- 写比例，比如 2 / 1.5 ,会继承这个比例（很好理解）
- 写百分比，则继承计算出来的值（考点）
.wraper {
font-size: 20px;
line-height: 200%;
}
.wraper p {
font-size: 16px;
}
/* p 的 line-height 相当于是 40px */
📃 CSS 响应式
🏷 rem 是什么
px：是一个绝对长度单位
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局
定义rem的大小
html {
font-size: 100px; /* 1rem = 100px */
}
使用
p {
font-size: 0.16rem; /* font-size:16px; */
width: 2rem; /* width: 200px */
}
🏷 响应式布局的常见方案（原生）
通过媒体查询，设置好根元素的 font-size 然后通过 rem 使用
但是有个问题，并不实际
拿到的移动端设计图，整体宽度一般是 750px
我只需要把屏幕等分成 750份，写出来的样式就不会有问题
案例的局限性在于：
1、手机宽度 375px，设置 font-size: 100px，则1rem =100px
2、这样页面的整体宽度是 3.75rem
3、我设计图是 750px，我测量出一个按钮的宽度是 100px，我还得计算出是多少 rem 来，太不方便
4、vue项目中也不适用
响应式布局方案
1、媒体查询，实现pc端各个分辨率的展示，包括移动端
2、rem 单位
3、uni-app 开发
4、vue 单独开发的 h5 项目中，可以使用这两个依赖 postcss-pxtorem & amfe-flexible，具体步骤见下边的文档
此处为语雀内容卡片，点击链接查看：www.yuque.com/undefined-h…
🏷 vw & vh
❓ 网页视口尺寸
- window.screen.height:：屏幕高度
- window.innerHeight：网页视口高度
- document.body.clientHeight：body高度
vh / vw 就是网页视口的宽高
