1.手写响应式
2.flex布局
3定位（float 面试，相对定位+绝对定位+默认流）
4.响应式网页/自适应布局(Responsive Web Page)，根据浏览器设备的不同(pc、pad、phone、print)而自动改变页面布局，图片文字的效果，不影响用户体验
手写响应式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnPUPiDA-1597931551984)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820213952564.png)]
5.组件
1下拉菜单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDYY6dvM-1597931551985)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214111228.png)]
事件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HAaxDH2f-1597931551990)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214154752.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbnCJsUL-1597931551992)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214215987.png)]
2导航栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSwIacQx-1597931551995)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214439868.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Srs77gt7-1597931551999)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214452405.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPQUDxLl-1597931552001)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214458853.png)]
6.栅格布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4Z5YLQI-1597931552004)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214258748.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eThCzPt9-1597931552005)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214311853.png)]
[外链图片转存中…(img-eThCzPt9-1597931552005)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpUIrejT-1597931552007)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214340374.png)]