如何理解HTML的语义化
1.让人更容易读懂(增加代码可读性) 2.让搜索引擎更容易读懂(SEO)
块状元素&内联元素
区别是否会独占一行
display:block/table; div h1 table ul ol p
display:inline/inline-block; span img input button
盒模型宽度
offsetWidth=(内容宽度+内边距+边框)，无外边距
margin纵向重叠
相邻元素的margin-top和margin-bottom会发现重叠
margin负值
margin-top和margin-left负值，元素会向上/向左移动
margin-right和margin-bottom负值，右侧元素左移/下方元素上移
BFC
block format context, 块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的条件：float不是none/position是absolute或者fixed/overflow不是visible/display是flex inline-block
BFC的应用:清除浮动
圣杯布局和双飞翼布局
两侧内容固定,中间内容随着宽度自适应 使用float布局
1. 圣杯布局是通过padding给左右两边留白的，双飞翼布局是通过margin给左右两边留白的
2. 圣杯布局使用position:relative 和 right 移动left块，双飞翼布局没有用到
3. 圣杯布局的right使用的是margin-right，而双飞翼布局使用的是margin-left
手写clear fix
flex布局
flex最常用的语法： flex-direction:主轴的方向
row 主轴为水平方向，起点在左端 | row-reverse 主轴为水平方向，起点在左端 | column 主轴为垂直方向，起点在上沿| column-reverse 主轴为垂直方向，起点在下沿
justify-content：主轴对齐方式
flex-start（默认值）：左对齐 | flex-end：右对齐 | center： 居中 | space-between：两端对齐，项目之间的间隔都相等 | space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items:交叉轴对齐方式
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 | flex-start：交叉轴的起点对齐 | flex-end：交叉轴的终点对齐 | center：交叉轴的中点对齐 | baseline: 项目的第一行文字的基线对齐
flex-wrap:如何换行
flex-wrap: nowrap 不换行 | wrap：换行，第一行在上方 | wrap-reverse：换行，第一行在下方
align-self：子元素在交叉轴的对齐方式（开始对齐、居中对齐...）
定位
absolute 和 relative 定位
relative 依据自身定位
absolute 依据最近一层的定位元素定位
定位元素：absolute，relative，fixed相对body
水平居中
inline 元素： text-align: center
block 元素： margin：auto
absolute元素：left: 50% + margin-left 负值 (需要知道子元素的宽)
垂直居中
inline 元素：line-height 的值等于height值
absolute 元素：top: 50% + margin-top 负值 (需要知道子元素的高)
absolute 元素：transform(-50%,-50%) (不需要知道子元素的高)
absolute 元素：top left bottom right = 0 + margin: auto (不需要知道子元素的高)
line-height 如何继承
写具体数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例（直接继承与继承本身的font-size相乘的值）
写百分比，如200%，则继承计算出来的值（考点）（先与本身的font-size相乘后，再继承）
响应式
rem 相对长度单位，相对于根元素的font-size值
em 相对长度单位，相对于父元素，不常用
@media-query，根据不同的屏幕宽度设置根元素font-size
@media only screen and（min-width：XXXpx）and （max-width：XXXpx） {
html {
font-size：XXXpx；
}
}
rem的弊端：“阶梯”性 适用于跨度大的
网页视图尺寸
window.screen.height//屏幕高度
window.innerHeight//网页视图高度 浏览器可以显示内容的高度 不含工具条和搜索框
document.body.clientHeight//body高度
vh 网页视口高度的1/100
vw网页视口宽度的1/100
vmax取两者最大值，vmin取两者最小值
JS
常见值类型
let a // undefined
const s = 'abc'
const n = 100
const b = true
const s = Symbol's')
常见引用类型
const obj = { x: 100 }
const arr = ['a', 'b', 'c' ]
const n = null // 特殊引用类型，指针指向的地址是空地址
function fn() {} // 特殊引用类型，但是不用于存储数据，所以没有『拷贝、复制函数』这一说
typeof运算符
识别所有的值类型
识别函数
判断是否是引用类型（不可再细分）
深拷贝
注意判断值类型和引用类型
注意判断是数组还是对象 instanceof判断
递归，深层次拷贝（for in语句，haoOwnProperty）
字符串拼接
const a = 100 + 10 // 110
const b = 100 + '10' // '10010'
const c = true + '10' // 'true10
==运算符
100 == '100' // true
0 == '' // true
0 == false // true
false == '' // true
null == undefined // true
// 判断时，除了 == null 之外，其它一律用 ===
const obj = { x: 100 }
if (obj.a == null) {}
判断if
if语句和逻辑判断
◆truly变量：两步非运算之后===true的变量。!!a === true
◆falsely变量：两部非运算之后===false的变量。!!b===false
//以下是falsely 变量。除此之外都是truly 变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false
if语句、逻辑判断（&& || ！）就是判断truely、falsely变量
