HTML5新特性
新增标签 语义化标签header footer section article nav aside + 多媒体标签 audio video
标签语义化的好处：
- HTML结构清晰 代码可读性好
- 便于搜索引擎优化SEO
- 便于无障碍阅读
CSS3新特性
。。todo
css优先级和权重
！important > 行内样式 > id > class/伪类 > 标签/伪元素 > *通配符/继承
从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
1px问题 && 如何画0.5px的线？
DPR(devicePixelRatio) 设备像素比，设备的物理像素和css像素的比值。 就是要画更细的线 比如0.5px的
（以横线为例） 1.transform做
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
如果是画边框的话 要配合伪元素 不然整个dom都缩小了
.border-1px{
position: relative;
&::before {
content:"";
display:block;
position:absolute;
left:0;
top:0;
width:200%;
height:200%;
border:1px solid red;
transform:scale(0.5,0.5)
transform-origin:0 0 ;
box-sizing:border-box;
}
}
box-sizing:border-box;
transform变形：不引起回流和重绘
包括 translate scale skew rotate matrix
transform-origin：（x，y）变形的基点
默认是中心点 50% 50%
2.线性渐变linear-gradient
创建一个线性渐变的图片 默认从上到下渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000); //从下到上从白渐变到黑
}
3.box-shadow(部分支持)
box-shadow: offset-x offset-y blur spread color position;
.hr.boxshadow {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
伪元素和伪类选择器
伪元素新增了一个真实的DOM元素 如:after :hover 伪元素可以用::来表示也可以用:表示
伪类是选择DOM的一种状态 如:hover :active
px rem em vm vh %
px 像素 固定单位 由分辨率决定 比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点
rem 相对于根元素html的font-size的倍数 1rem=根元素的字体大小
em 相对于父元素font-size大小的倍数
vm 相对于可视窗口的宽度 1vm是可视窗口的宽度的1%
vh 相对于可视窗口的高度 1vh是可视窗口的高度的1%
% 是相对于父元素的大小设定的比率，position:absolute;的元素是相对于已经定位的父元素，position：fixed；的元素是相对可视窗口
rem适配方案 淘宝的flexible.js
核心代码：
var docEl = document.documentElement; // 根元素，即<html></html>
function setRemUnit () {
var rem = docEl.clientWidth / 10;
// 设置根元素的font-size，也就是1rem的大小（设置为1/10视图宽度）
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
bug是宽度太大的设备 字体会放的太大
改进一下 readingApp的适配是
document.addEventListener('DOMContentLoaded',()=>{
const html = document.documentElement
let rem = (window.innerWidth / 10) > 50 ? 50 : window.innerWidth / 10 //最大是50
html.style.fontSize = rem + 'px'
})
补充:document.documentElement.clientWidth和window.innerWidth是相等的 都是目前视口的宽度 reseize的时候改变
BFC + 边距塌陷问题
边距塌陷：
1、父子元素 2、相邻兄弟元素 3、没有padding和border的空元素
解决方法：给重叠元素创建BFC
1、父子给父添加overflow hidden 2、给相邻兄弟包一个div添加overflowhidden
Block Formatting Context 块级格式化上下文 一块独立的渲染区域，BFC的子元素与世隔绝，不会影响到外部其他元素。
给父级元素添加以下任意样式触发BFC
overflow: hidden;
display: flex;
display: inline-block;
position: absolute或fixed
解决的问题：
1.清除浮动
2.垂直方向的margin重叠
清除浮动
浮动导致的问题是 子元素浮动脱标 父元素的塌陷
1.用伪类 父元素设置:before :after 伪类元素
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
2.给父元素overflow:hidden来触发BFC
两种盒子模型
content-box 内容盒模型（标椎盒子模型）
width = content宽度
border-box 边框盒模型（IE怪异盒模型）
width =content+padding+border
块级盒子水平居中
1.子绝父相+margin
父设relative子设absolute， top left设50%，margin-top和margin-left设自身的一半的负
2.子绝父相+transform
父设relative子设absolute， top left设50%，子的transform属性设为translate（-50%，-50%）
3.弹性布局
display:flex;
justify-content:center;
align-items:center;
雪碧图/精灵图
减少发请求次数 把小的背景图片整合到一张大图里
通过控制background-position x y（一般都是往上往左移动 所以取负值）
/*测量盒子大小*/
width: 100px;
height: 112px;
/*测量盒子位置*/
backgroud: url(images/index.png) no-repeat -327px -142px;
定位和浮动
定位：position
static
relative 不脱离文档流（标准流） 保留原位置
absolute 脱离文档流 相对最近的有定位的父级元素定位
fixed 脱离文档流 看做特殊的absolute 相对可视窗口定位
sticky 不脱离文档流 必须有top、left、right、bottom任一才有效 fixed+relative 一般配合页面滚动使用 默认情况下它表现就和relative定位一样，但是当页面滚动区域大于你的目标区域（即sticky对应的元素区域）时，它的表现和fixed定位一样。（top等设的是阈值）
浮动：float
float和position区别 都脱离标准流
绝对和固定定位的元素会压住后面标准流的元素 但浮动元素后面的标准流中的元素会围绕浮动元素
浮动要搭配父元素 父元素控制文档流上下排列 浮动控制内部子元素左右 （定位和浮动后 行内元素可以设宽高）
圣杯双飞翼
中间内容最先加载，左右栏固定宽，中间自适应
三个div main left right外面包个div父元素
给父设displayflex
flex-direction默认是row justify-content默认是flex-start不用设
然后给main设order -1 排列到最左边
left和right 设 flex 0 0 固定宽度
main设flex 1
弹性布局实现
www.ruanyifeng.com/blog/2015/0…
父的属性 flex-direction column/row（default）/reverse
flex-wrap no-wrap wrap reverse
flex-flow flex-direction和flex-wrap的合写
justify-content flex-start(default)/end/center/spacearound spacebetween
align-items flex-start flex-end center stretch(default) baseline
align-content 换行的时候 有多根主轴 怎么对齐
子的属性 order 越小的排列越靠前
flex: flex-grow flex-shrink flex-basis (default 0 1 auto)
直接写flex 1 或者flex 0 0 固定值
align-self 默认继承父元素的align-items属性 可以自己设置
