一、响应式网页布局：
效果：随着屏幕尺寸变化，CSS样式也跟着变化【PC端与移动端同一套代码结构】
- ①网页越复杂，内容越多，越无法做响应式布局【PC端与移动端分开做】
- ②响应式布局：网页内容简洁，两侧留白多
自适应效果：随着屏幕尺寸的变化，网页元素尺寸也作相应的变化。【设置相对单位】
（1）媒体查询
- 根据设备【宽度】的变化，设置差异化样式
- ①1个小括号里只能写1个媒体特性
- ②min-width:实心，<= 没有显示对应样式，受分辨率影响
- ③多个媒体特性时， and 前后有空格
这种写法，需要同时写 【下限和上限】
完整写法：
关键词：and only not
媒体类型：区分设备类型
媒体特性：描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏
- 宽/高 >1 横屏
- 宽/高 <1 竖屏
外链式CSS引入
（2）BootStrap
1、UI框架：将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
- 作用 ➢ 基于框架开发，效率高，稳定性高。
了解BootStrap
一个做网页的框架（目前最流行的WEB前端框架），作用：用它提供的样式和组件快速写网站【引用】
- 使用【 BootStrap框架】快速开发【响应式网页】 步骤：
- ①下载bootstrap文件
- ②引入
- ③选择需要的框架效果 分类 1、只使用全局Css样式，无需再引入 js文件 【常见：栅格系统、按钮、表单、图片及辅助类、响应式工具类、字体图标、路径导航】
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
2、引入组件
步骤：
（3）布局容器
栅格系统 【原理：浮动】
- ①Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- ②栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
相邻兄弟选择器 +
p+div 只能是p标签下面相邻的div盒子（且相邻的一个，相邻弟弟）p标签不做任何改变
p~div p标签下面相邻的div盒子（所有下面相邻）p标签不做任何改变
