# html-css
**Repository Path**: ma-yingdong/html-css
## Basic Information
- **Project Name**: html-css
- **Description**: 页面布局demo
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-06-08
- **Last Updated**: 2024-06-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# CSS 布局
### 一. UI
1. 设计图源文件格式：Psd，Sketch，Xd
2. 使用 PS、Sketch 等软件对 UI 设计图进行还原
3. UI 设计协作工具：蓝湖、Sketch
4. PS 基本使用
1. 窗口 --> 信息，打开信息面板，设置尺寸单位为像素
2. 使用`矩形选中工具`进行尺寸测量，`shift`+`矩形选中`为添加选中区域，`alt`+`矩形选中`为删除选中区域
3. `ctrl`+`移动工具`点击图标，会显示该图标的尺寸信息，使用`吸管`工具在对面图标上吸取颜色，会显示出对应的颜色
4. 编辑-->首选项-->界面-->增效工具，打开`启动生成器`，文件-->生成，打开`生成资源`，双击图层中对应图标，编辑存储类型，即可完成对图标的快速切图
### 二. 盒模型
1. 标准盒模型
- width、height 默认指的是 盒子内容区的宽、高
- background 属性会平铺到非 margin 的区域（content、padding、border）
- padding 值不能为负值，margin 值可以为负值（通过设置 margin 为负值，可以达到一些特定的效果）
- margin 存在上外边距塌陷、外边距重叠现象，所以尽量少用 margin, 用 padding 代替
2. 自适应盒模型特性
当子盒子设置`width`属性，即确定了子盒子的内容区的宽度，当通过设置`padding`或`border`时，子盒子的实际大小会变大，当大于父盒子的宽度时，会出现溢出现象。
若不设置`width`属性值，`width`值默认为`auto`，这时候再设置`padding`或`border`时，子盒子的内容区的宽度会动态调整，不会出现溢出现象，即为`自适应盒模型`。
```html
```
3. 怪异盒模型
此时的`width`、`height`不再是盒子内容区的宽度和高度，而是包含`padding`和`border`值在一起的总宽度、总高度。
通过设置`box-sizing：border-box`即可将标准盒模型转换成怪异盒模型。
### 三. 浮动
1. 特点
- 只会影响后面的元素
- 文本不会被浮动元素覆盖
- 具备内联盒子特性：宽度由内容决定
- 具备块级盒子特性：支持所有样式
- 浮动放不下，会自动换行
2. 清除浮动
```css
.clearfix::before, .clearfix::after {
content: '',
display: table,
clear: both
}
```
### 四. 定位
1. 相对定位（relative）
- 相对定位的元素是在文档中的正常位置偏移给定的值
- 不影响其他元素布局
- 相对于自身进行偏移
2. 绝对定位（absolute）
- 绝对定位的元素脱离了文档流，不占据空间
- 具备内联盒子特性：宽度由内容决定
- 具备块级盒子特性：支持所有样式
- 绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位
3. 固定定位（fixed）
- 固定定位与绝对定位相似，但是会固定在可视区中
- 具备内联盒子特性：宽度由内容决定
- 具备块级盒子特性：支持所有样式
- 固定定位元素不受祖先元素影响
4. 粘性定位（sticky）
- 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
```html
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
我是粘性定位盒子
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
afa23etwetr23rwt
```
5. z-index 属性
- 通过设置`z-index`属性的数值来调整定位元素的层级关系，数值越大，层级越高
- 当存在嵌套层次的时候，优先比较同级的`z-index`数值，忽略嵌套的定位元素的`z-index`属性值，若一外层没有设置`z-index`属性值，则会与嵌套的定位元素来比较`z-index`值
```html
```
蓝色盒子会压在红色盒子上面
### 五. 弹性布局
1. flex 容器
- flex-direction
- row[默认]
- column
- row-reverse
- column-reverse
- flex-wrap
- no-wrap[默认]
- wrap
- flex-flow
是 flex-direction 和 flex-wrap 的缩写形式，即[flex-direction] [flex-wrap]
- justify-content
主轴对齐方式
- flex-start[默认]
- flex-end
- center
- space-around
- space-between
- space-evenly[平均]
- align-content
交叉轴对齐方式(整体)，当不折行的情况下，align-content是不生效的
- stretch[默认]，拉伸
- flex-start
- flex-end
- center
- space-around
- space-between
- space-evenly
- align-items
交叉轴对齐方式(针对每一行)，不需要折行也可以生效
- stretch[默认]
- flex-start
- flex-end
- center
- baseline
2. flex子项
- flex-grow
扩展比例，默认flex-grow=0
- 只有一项时，flex-grow >=1 会占满剩余所有空间，flex-grow<1 时会按照所占比例对剩余空间进行分配
- 当有多项时，flex-grow = 1 多项对剩余空间进行平均分配，flex-grow不相等时，会根据各项所占的比例对剩余空间进行分配
- flex-shrink
收缩比例，默认flex-shrink=1，表示flex容器空间不足时，元素的收缩比例；自动收缩到与容器大小相同。 当flex-shrink=0，表示当超过flex容器空间时，不进行收缩，即会溢出容器。
- 当flex容器中不同子项的flex-shrink=1时，会根据各子项width所占比例对所需收缩空间进行收缩。如box1: width=400px, box2: width=300px, flex容器宽度为500, 则box1的收缩大小为（700-500）*4/7, box2的收缩大小为（700-500） *3/7
- 当flex容器中不同子项的flex-shrink不同时，会根据各子项width*flex-shrink所占比例对所需收缩空间进行收缩。如flex容器宽度为500, box1: width=400px,flex-shrink=2; box2: width=300px, flex-shrink=1; 则box1的收缩大小为（700 -500） * [400 * 2 /（400 * 2 + 300 * 1）]，box2的收缩大小为（700 -500） * [300 * 2 /（400 * 2 + 300 * 1）]
- flex-basis
默认值是auto，指定了flex元素在主轴方向上的初始大小，可选值有 0%，auto（为内容所占大小）, 固定像素值（如200px）, 100%
- flex
flex属性是flex-grow, flex-shrink, flex-basis的缩写；flex: 1（flex-grow:1，flex-shrink:1，flex-basis: 0），flex: 0 （flex-grow: 0, flex-shrink:1, flex-basis: 0），flex: auto (flex-grow: 1, flex-shrink:1, flex-basis: auto)
- order
默认值为0，改变某一flex子项的排序位置。值越大优先级越大，排在最后
- align-self
控制单独某一个flex子项的垂直对齐方式，默认值为0（与 align-items 值一致）
### 六. 网格布局
1. grid 容器
- grid-template-columns
定义 grid 列，如：grid-template-columns: 100px 200px 300px （定义3列，宽度分别为100、200、300px），值可以为固定值、百分比、fr
- grid-template-rows
定义 grid 行，如：grid-template-rows: 100px 200px 300px （定义3行，宽度分别为100、200、300px），值可以为固定值、百分比、fr
- grid-template-areas
合并网格，自定义变量名，如: grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3"；需要配合子元素中 grid-area 属性一起使用。
```html
```
- grid template
是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写
```html
```
- grid-row-gap、grid-column-gap、grid-gap
用来设置元素行列之间的间隙大小，推荐使用row-gap，column-gap，gap（水平 垂直）
- justify-items、align-items、place-items
用来设置每个单元格子项在各自所属单元格内的对齐方式。justify-items：水平对齐属性，align-items：垂直对齐属性，复合对齐属性（垂直方向 水平方向）
```html
```
- justify-content、align-content、place-content
当网格的大小 大于 所有单元格的大小时，用来设置所有单元格的网格对齐方式。
justify-content：水平对齐属性，align-content：垂直对齐属性，place-content：复合对齐属性（垂直方向，水平方向）
```html
```
2. grid 子项
- grid-column-start、grid-column-end、grid-row-start、grid-row-end 表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向
```html
```
- grid-column、grid-row 是上面的简写方式，以 / 分隔，如 grid-row-start: 1; grid-row-end: 2; 简写成 grid-row: 1 / 2；grid-area：[grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end]，即 grid-area: 2 /2 / 4 / 3
- justify-self，align-self，place-self 是针对单独子项的对齐方式，justify-self：center；align-self：center; 水平垂直居中
3. repeat() 和 minmax()
```html
```
```html
```
### 七、移动端适配布局
1. 逻辑像素
又叫做“设备独立像素”，对于前端来说就是CSS中的像素，如iphone6下的逻辑像素为375px
2. 物理像素
即设备屏幕实际拥有的像素点，一个设备生成出来，他们的物理像素已经确定了，如iphone6下的物理像素为750px
3. 设备像素比（DPI：devicePixelRatio）
物理像素除以逻辑像素的值。可通过window.devicePixelRatio来获取设备像素比，iphone6的DPI=2
4. viewport视口
一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout viewport）,用于解决早期的页面在手机上显示的问题。IOS,Android基本都将这个视口分辨率设置为980px。
上面截图中的粉色方块为100px，但是在iphone6设备的默认视口下显示的非常小，因为默认视口为980px。为了解决这个问题，可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。
``
`width=device-width`表示视口宽度为设备的宽，也就是逻辑像素的大小。`initial-scale=1.0`表示初始缩放比例为1，即正常大小。下面是设置了viewport视口后的样子。
`viewport`可选的值有：
| 属性 | 值 | 描述 |
| ------------- | -------------------- | --------------------------------------- |
| width | 正整数或device-width | 定义视口的宽度，单位为像素 |
| height | 正整数 | 定义视口的高度，单位为像素，不常用 |
| initial-scale | 比例值 | 定义初始缩放值 |
| minimum-scale | 比例值 | 定义缩小最小比例 |
| maximum-scale | 比例值 | 定义放大最大比例 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
5. 750px 的设计稿
通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计，即750px。当然也可以按照逻辑像素进行设计，即375px，但是一般设计师不会这么干，主要为了设计稿更加清晰。
所以，前端在量取尺寸的时候，需要除以2，才能适配页面中的CSS逻辑像素值。
6. 两种常用移动端适配布局方案
- rem布局
1. rem是相对尺寸单位，等于 根元素（html）一个字体的大小（px），即 1rem = 1 font-size (根元素)；而em是等于当前元素或其父级元素的一个字体的大小（px）
2. 通过动态设置 html根元素 font-size的值，来适配不同移动设备上的布局。【以iphone6为例（逻辑像素375px），html：font-size：100px（1rem），即可转换成动态比例：font-size：26.6667vw（100px/375px * 100vw）】
3. 动态设置好根元素的font-size后，在量取尺寸时，若设计稿为750px,需要除以2才能适配逻辑像素的大小，在所有样式都写完后，通过vscode插件`px2rem`一次性全部将px单位转换成px单位。
- vw布局
- vw是可视区的宽度相对单位，将可视区划分为100vw，即100vw = 375px（iphone6）
- vscode提供`px2vw`插件可以一次性将px单位转换成vw单位
### 八、响应式布局
> 指网页能自动识别屏幕宽度、并做出相应调整的网页设计。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
1. 媒体查询
- 媒体类型
媒体类型（Media types）描述设备的一般类别
- all：适用于所有设备
- print：适用于在打印预览模式
- screen：主要用于屏幕
- speech：主要用于语音合成器
- 媒体特性
媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征
- width：viewport的宽度
- height：viewport的高度
- aspect-ratio：viewport的宽高比
- orientation：viewport的旋转方向
- ......
- 逻辑操作符
逻辑操作符（logical operators）not, and 和 only，可用于联合构造复杂的媒体查询
- and：用于将多个媒体查询规则组合成单条媒体查询
- not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false
- only：用于旧版浏览器识别媒体类型使用
- 逗号：用于将多个媒体查询合并为一个规则
- link标签方式
``
``
2. 媒体查询的编写位置及顺序
- 添加到样式表的底部，对CSS进行优先级的覆盖
- 移动端 --> PC 端的适配原则：min-width 从小到大
- PC端 --> 移动端的适配原则：max-width 从大到小
3. 响应断点（阈值）的设定
- Extra small < 576px
- Small >= 576px，-sm
- Medium >= 768px，-md
- Large >= 992px，-lg
- X-Large >= 1200px, -xl
- XX-Large >= 1400px，-xxl
4. 响应式栅格系统
```html
/*在父容器中添加 .row类，成为响应式栅格布局，在子容器中通过添加上面定义的宽度下col-XX-XX的类，可以达到适配不同设备*/
```