布局类型
- 💚自适应布局
- 百分比布局
- 弹性布局 - Flex布局
- rem 布局
- vw、vh 布局
- 💚响应式布局
- 媒体查询 - Html-媒体查询布局
静态布局(固定布局)
- 流式布局(Flow) — 默认网页模型 — CSS 盒布局模型
- 块级元素自上而下垂直分布，默认状态下，块级元素的宽度为 100%，占整行
- 内联元素会在所处的最近父级容器元素内从左到右水平分布
- 浮动布局(Float) — CSS 盒布局模型 - Html-浮动布局(Float)
- Layer 布局(定位) — CSS 盒布局模型
自适应和响应式
自适应
- 特点：不管屏幕大小(分辨率)怎么变化，页面的元素的位置会变化而大小不会变化。
- 方法：
- 使用 flex 布局
- 使用百分比
- 避免写死宽高
- 使用 rem
响应式
- 特点：在同一套项目中做兼容(设计多个方案和不同方案对应的样式)
- 方法：使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局
- 优点：面对不同的分辨率设备灵活性强，适合中小型网站
- 缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐
自适应与响应式的区别
- 响应式是先@media 确定设备，再有需要的地方，css 用上%或者 vw，vh 等
- 自适应是属于 pc、手机等设备都做一套设计
百分比布局
- 视窗变化时，height、width、padding、margin、border 都是依托父组件的宽高，并且单位为%
- 子元素的 margin、padding 为百分比参照父级容器的宽度
- border-radius 为百分比，则是相对于自身的宽度
- 子元素的 top、bottom|(right、left)为百分比则相对于非 static 定位的父元素的高度|(宽度)。
- 缺点：计算困难
rem 布局
- 本质是等比缩放，依赖于整体的html根标签，通常用来适配移动端布局，字体，图片高度
- 缺点：
- 数据量大：所有图片，盒子都需要给一个准确的值，才能保证不同机型的适配
- 在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小，即 css 样式和 js 代码有一定的耦合性，且必须将改变 font-size 的代码放在 css 样式之前
- 解决：使用 flexible.js 插件
vw、vh 布局
- 1vw(vh) = (视窗宽度(高度) / 100)px
静态布局 — 定宽
- 特点：常规 pc 网站都是静态布局，即就是设置了 min-width,小于宽度出滚动条，大于内容居中加背景。
- 方法：
- PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
- 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如 wap.或 m.。
- 在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？)
- 在 viewport meta 标签上设置 width=320，页面的各个元素也采用 px 作为单位。通过用 JS 动态修改标签的 initial-scale 使得页面等比缩放，从而刚好占满整个屏幕。
- 在 viewport meta 标签上设置 content=”width=640,user-scalable=no”，页面的各个元素也采用 px 作为单位。由于 640px 超出了手机宽度，浏览器会自动缩小页面至刚好全屏。
- 缺点：不能根据用户的屏幕尺寸做出不同的表现。
定位（Layer 布局 — 层级布局模型）
相对定位（relative）
- 该属性本身不做任何事，但可以用 top、left 来操作它的位置
- 相对于元素自身在文档流中的位置进行定位
- 相对定位的元素不会脱离文档流>，定位元素的性质不会改变，块还是块，内联还是内联
- 如果不设置偏移量，元素不会发生任何的变化
- 会提升元素的层级
绝对定位（absolute）
- 将元素移除正常布局，屏幕滚动时也会跟着滚动。
- 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
- 开启绝对定位后，元素脱离文档流中
- 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于包含块进行定位的，使用 left、right、top、bottom 操作
- 包含块(containing block)
- 正常情况下，包含块就是离当前元素最近的祖先块元素
- 绝对定位的包含块:
- 包含块就是离它最近的开启了定位的祖先元素，
- 如果所有的祖先元素都没有开启定位则根元素就是它的包含块
- html（根元素、初始包含块）
固定定位（fixed）
- 固定定位也是一种绝对定位，和绝对定位是大致相同的
- 不同的是：
- fixed 永远相对于浏览器窗口进行定位
- fixed 会固定在浏览器的指定的位置，不会随页面一起滚动
粘滞定位（sticky）
- 粘滞定位和相对定位的特点基本一致
- 不同的是粘滞定位可以在元素到达某个位置时将其固定
- 理解：在页面中的某个位置设置后，当滚动到顶部时，层级最高,固定在顶部，滚回来后回到原来的位置
偏移量（offset）
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置
top：相对于定位位置的顶部的偏移量bottom：相对于定位位置的底部的偏移量- 定位元素垂直方向的位置由 top 和 bottom 两个属性来控制
left：相对于定位位置的左侧的偏移量right：相对于定位位置的右侧的偏移量- 定位元素水平方向的位置由 left 和 right 两个属性来控制
- 一般只需要使用两个值即可给元素进行定位
- top left
- top right
- bottom left
- bottom right
- 偏移量也可以指定一个负值，如果是负值则元素会向相反的方向移动
层级（z-index: number;）
- 需要一个正整数作为参数，值越大层级越高，层级越高越优先显示
- 如果层级一样，则后边的会盖住前边的，父元素永远都不会盖住子元素。
文档流 < 浮动 < 定位
元素的透明
- 使用
opacity来设置元素的透明度- 需要一个 0-1 之间的值
- 0 表示完全透明
- 1 表示完全不透明
- IE8 及以下的浏览器不支持该样式，需要使用如下方式来设置
filter:alpha(opacity=透明度);- 需要一个 0-100 之间的值
- 0 表示完全透明
- 100 表示完全不透明
