知识点整理：css,html

图片的特性：宽度自适应 高度自动的自适应

无固定宽高的盒子上下左右居中

1. - 定位：上下左右均为0，那样宽高就和父元素一样
2. - display两种

`第一种：`子元素和父元素一样大
父元素：{display：table}
子元素：{display：table-cell}

`第二种：`
父元素：{
    display：flex；
    justify-content:center;
    align-items:center;
}

响应式布局，弹性布局，百分比布局，流式布局这四种布局的区别

	响应式布局	弹性布局（rem/em布局）	自适应布局	流式布局(百分比布局)
页面对应分辨率的方式	一个页面对应多种分辨率	一个页面对应多种分辨率	一个页面对应一种分辨率	一个页面对应多种分辨率
特点：	元素位置和大小都会改变。		元素位置会变化 大小不会变化。	大小会变化 布局不变
使用	流式布局和自适应布局一起使用+媒体查询，网格系统grid	文字采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位	使用@media媒体查询给不同分辨率切换不同的样式	使用百分数（搭配min-、max-属性使用），宽度使用百分数，高度使用px
适用	PC，移动端	PC，移动端	PC，移动端	PC

flex布局和grid布局的区别

1. flex布局：基于一维。display:flex，弹性布局
2. grid布局：基于二维。display:grid，响应式布局

css动画

1. transform：https://www.webhek.com/post/css-animation-using-css-transforms.html
2. animation：https://www.cnblogs.com/xiaohuochai/p/5391663.html

Animate.css动画库的使用

例子：https://codepen.io/oltika/pen/WGLkyb?editors=1111

div+css布局：平常使用的div标签+css样式，展示出来的页面

重构：无非是为了项目更好的维护和使用

1. 前端的框架和模版
2. 第三方库，组件，插件
3. 开发规范统一
4. 技术选型，前后端分离，前后端不分离
5. css编译语言，less，sass，css的使用
6. 性能的优化，公共组件的封装，模块化，组件化
7. 数据的存取
8. 安全性能

html的语义化

优点：

1. 有利于SEO，和搜索引擎建立良好沟通，
2. 利于团队开发和维护，语义化更具可读性
3. 尽可能少的使用无语义的标签div和span

css3,html5新增的特性

1. HTML5：aside，article，details，dialog，footer，header，progress，section，time，canvas，audio，video，input的类型，localStorage，sessionStorage，webSocket
2. CSS3：rem，id选择器，class选择器，：link，：active，：before，：after，：focus，：hover，：visited，border，background-clip，background-origin，background-size，text-overflow，text-shadow，transform，transition，css动画animation，box-sizing，弹性flex盒模型，媒体查询@media

media媒体查询：

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

详情：https://www.runoob.com/cssref/css3-pr-mediaquery.html

px,rpx,rem,em区别

	px	rem	em	rpx
定义	相对单位；相对于分辨率而言	相对单位，相对HML根元素	相对单位；相对于当前对象内自提的字体尺寸	微信小程序自适应屏幕尺寸的尺寸单位，微信小程序规定屏幕的宽度为750px
特点	px的大小是死值，不会变动	根据HTML元素的基准值变化	em的值不是固定的 会继承父级元素的字体大小	1rpx = 0.5px 1rem = (750/20)rpx = 37.5 rpx

 

rem的使用

1.        rem布局  高宽自适应 按比例适配 
2.        例如：320px 设置 header尺寸（320*50） 字体20px 行高50px  
3.         那么：640px 设置 header尺寸（640*100）字体40px 行高100px  
4.         rem是个单位,把页面所有固定像素的尺寸换成rem
5.         rem默认的基准值（html字体大小）16px,换算成rem不方便
6.         假设现在的设计稿是640px,你测量到了一个100px*100px的容器，假设rem的基准值100px , 1rem*1rem 
7.         达到适配只需要在不同的设备设置不同的rem基准值即可