html
块、行内和行内块元素：
- 块级元素：div、h1~h6、p、table、列表
- 行内元素：span、a、文本格式化标签（strong、b、em、i ...）
- 行内块：img、button、input
区别：
- 块级元素独占一行、可设置宽高和内外边距
- 行内元素不独占一行，不可以设置宽高，宽高随内容变化，内外边距仅左右有效
- 行内块不独占一行，元素间有空隙，能设置宽高和内外边距
h5新增语义化标签：
- header、footer、nav、aside、article（内容区域）、section（具体内容）
- 优点：增加代码可读性，便于浏览器进行解析 ，有助于爬虫抓取更多有效信息
替换元素：
- img（src）：根据src显示不同图片
- input（type）：根据type属性值决定显示的表单类型
script 标签中 defer 和 async 的区别：
- script：会阻碍html解析，只有下载并执行完脚本才会继续解析html
- async：解析html同时进行脚本的异步下载，脚本下载完立刻执行，可能会阻碍html解析
- defer：不会阻碍html解析，html解析完才会执行脚本
CSS
css的引入方式： 行内、内部、外部 样式表
css选择器：
- 通配符*、标签、类、id、属性、伪类、伪元素、子元素、后代 选择器
- 优先级： !important > 行内 > id > 类 > 标签
- css三大特性： 层叠性、继承性、优先级
盒模型：
所有html元素可以看做盒子，包含边框、内边距和内容
box-sizing：
- content-box：W3C 标准盒模型，盒子大小为内容区域，添加边框或内边距盒子会向外扩大
- border-box：IE盒模型，盒子大小为内容+边框+内边距，添加边框或内边距盒子会向内挤压内容
margin问题：
- 兄弟元素上下外边距重叠
- 父子元素上下外边距塌陷
- margin负值：元素反方向移动
BFC：
-
块级格式化上下文，一块独立渲染区域，内部元素的渲染不会影响外面的元素，能够避免引起重绘和重排。
-
布局规则：box是CSS布局的对象和基本单位，页面是由若干个box组成的。元素的类型和display属性，决定了这个box的类型，不同类型的box会参与不同的格式化上下文。
BFC条件：
- 浮动
- position 为 absolute 或 fixed
- display 为 flex、inline-block 等
- overflow 不为 visible（hidden、auto、scroll）
BFC应用：
- 清除浮动
- 防止外边距重叠
- 防止浮动元素的覆盖
- 自适应多栏布局
两栏和三栏布局的实现：
- 两栏布局右侧自适应：
- 左侧float，右侧margin-left，
overflow: hidden父元素清除浮动 - flex布局，左侧固定宽度，右侧
flex: 1占满剩余空间
- 三栏布局中间自适应：
- 两侧float或absolute，中间margin-left
- flex布局，左右固定宽度，中间
flex: 1占满剩余空间 - 圣杯布局：float + margin负值，中间宽度100%，两侧位置由padding提供，通过定位将左右移动到两侧
- 双飞翼布局：在圣杯基础上为中间添加容器，通过margin为两侧提供位置，不需要再定位
清除浮动：
给父元素添加 : after 伪元素
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
居中的实现：
- 块级元素：盒子指定宽度，margin 为 auto
- 行内水平居中：
text-align：center - 行内垂直居中：
line-height：父元素高度 - 定位元素：定位+margin负值 或 定位+位移负值
flex弹性布局：
display：flex；
-
设置主轴：
flex-direction：row |column -
设置主轴元素排列方式：
justify-content：space-around | space-between -
flex：0 1 auto的含义：
flex-grow：0：放大比例为0，有足构空间时，显示原有大小，不放大flex-shrink：1：缩小比例为1，空间不足时，允许元素进行缩小flex-basis：auto
响应式的实现：
媒体查询 + rem：
- rem：相对于根元素的相对长度单位
- 媒体查询：针对不同的媒体类型或屏幕尺寸设置不同的样式
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
<link ref="stylesheet" type="text/css" href="xxx.css" media="only screen and(max-device-width: 480px)">
