Html

script标签的引入一般放在body最后，这样避免脚本过大，加载时间长，导致页面长时间空白，这是因为渲染进程与js进程是互斥的，脚本会阻塞页面的渲染，脚本之间的加载是同步进行的，按引入顺序执行，但是以下两个属性会影响脚本执行与页面渲染的顺序
- defer：不会阻塞渲染，这样即使放在header内部，也不会阻塞页面加载，不过js会先于document加载完成，并且也不会影响脚本之间的执行顺序，按照引入顺序执行
- async：与defer一样，都是解决阻塞渲染，但它是在document加载完成后才执行，并且它的执行顺序是按照谁先加载完成执行谁，所以对于文件顺序有要求，存在前后依赖的不要使用它

块级元素：div，h1-h6，p，ul，ol，dl，li，hr，dt，dd，form，table
- 块元素独占一行
- 宽高生效
- 默认宽和父元素一样，内容撑开高度
- margin，padding全部生效
行内元素：em，i，del，small，strong，ins，span，a
- 宽高不生效
- 左右margin生效上下不生效
- 在一行排列
- 大小靠内容撑开
- padding都生效
行内块元素：img，input(表单元素，除去form)
- 在一行排列
- 宽高生效
- margin，padding生效

CSS

border-radius圆角
border-image 边框图片
- border-image: url() top right bottom left
- border-width: top right bottom left
box-shadow盒子阴影: x,y,size,opcity
text-shadow文字阴影
linear-gradient 线性渐变
- background: linear-gradient(to position , color,color,...,color)
radial-gradient 径向渐变
- background: radial-gradient(shap size at position , color,color,...,color)
2D/3D转换 transform：rotate(旋转) scale(缩放) translate(位移)
@media媒体查询，根据屏幕宽度，设置，用来解决移动端适配,根据屏幕大小使相应的css生效
flex布局(弹性盒子)

水平居中
- 行内元素：text-align：center
- 块元素: margin: 0 auto
- position: left: 50%; transform: translate(-50%)
垂直居中
- height = line-height
- verticle-align: middle
- position: top: 50%; transform: translate(0,-50%)

宽高固定 position: top:0,left:0,right:0,bottom:0,margin:auto
宽高固定 position：top: 50%, left: 50%, margin-left: -width/2px,margin-top: -height/2px
dispaly: flex; justify-content: center,align-items: center(极力推荐)
position: left: 50%,top: 50%; transform: translate(-50%,-50%)

.clearfix:after{
 content: '',
 height: 0,
 display: block,
 clear: both,
 visibility: hidden
}
.clearfix{
 *zoom: 1
}

.clearfix:before,
.clearfix::after {
 content: '',
 display: table
}
.clearfix:after:{
 clear: both
}
.clearfix{
 *zoom: 1
}

两个块元素垂直排列给上加下margin，给下加上margin，会产生外边距合并，这时候会取最大的那个显示
嵌套块元素，给子元素设置上margin，父元素会跟着掉下来，这叫外边距塌陷
- 给父盒子设置上边框（不推荐）
- 用overflow：hidden
- 加内边距（不用margin）

id选择器
类选择器
属性选择器
伪类选择器
标签选择器
伪元素选择器
通配符选择器
优先级：内联样式 > ID选择器(100)> 类选择器(10) = 属性选择器 = 伪类选择器 > 元素选择器(1) = 关系选择器 = 伪元素选择器 > 通配符选择器(0)
!important
后代选择器选全部
子代选择器只选亲孩子