尚硅谷CSS基础 笔记

---

CSS基础

---

1、选择器

---

2、继承

• 样式的继承，我们为一个元素设置样式同时也会应用到它的后代元素上。
• 并不是所有样式都会被继承，背景、布局等相关样式不会被继承。

---

3、选择器权重

3.1、内联样式

• 权重：1000

3.2、id 选择器

• 权重：100

3.3、类或伪类选择器

• 权重：10

3.4、元素或伪元素选择器

• 权重：1

---

4、长度单位

4.1、像素

• 单位 px
• 屏幕上的小点即像素，不同屏幕显示效果不同，像素点越小效果越清晰

4.2、百分比

• 在子元素中设置可以使子元素随着父元素的改变而改变

4.3、em

• 相对于元素字体大小来计算的，会根据字体的大小改变而改变
• 浏览器默认字体大小 16px，即：1em = 160px = 10 * 16px

4.4、rem

• 是相对于根元素 HTML 的字体大小来计算
  • 如果 CSS 里面没有设定 HTML 的 font-size，则默认浏览器以1 rem = 16 px 来换算
• 常用于适配

---

5、颜色单位

5.1、RGB

• 格式：RGB(红, 绿, 蓝)

5.2、RGBA

• 格式：RGBA(红, 绿, 蓝, 透明度)
• 透明度：1 不透明 0 透明 .5 半透明

5.3、十六进制 rgb

• #ff0000 前两位是红，后两位绿，最后两位蓝
• 如果 RGB 三种颜色两个位数都重复值可简写 #ff0000 -> #f00

5.4、HSL

• 格式：HLS(色相, 饱和度, 亮度)
• 色相：0~360
• 饱和度：0%~100%
• 亮度：0%~100%

---

6、文档流

6.1、定义

• 网页是多层次的，用户只能看到最上面的一层，最底下的一层是文档流

6.2、状态：

• 在文档流中(默认)
• 脱离文档流

6.3、块元素和行内元素

• 是元素在文档流中的两种状态，脱离的文档流便不在区分块元素和行内元素
• 块元素
  • 独占一行
  • 默认宽度是父元素的全部
  • 默认高度是子元素的全部
  • p 元素内不能放块元素
• 行内元素
  • 不独占一行
  • 默认宽度是子元素全部，满了会自动换行
  • 默认高度是子元素全部

---

7、盒子模型

7.1、盒子模型水平方向布局

• 在文档流中必须满足等式：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 盒子模型水平宽度
• 如果七个值中没有 auto 则自动调整 margin-right
• 如果七个值中有一个 auto 则自动调整 auto 值
• 如果七个值中有多个 auto ，其中宽度 auto ，则自动调整宽度为最大值其它为0
• 如果七个值中margin-left margin-right 为 auto，且宽度固定，则margin-left 和 margin-right 平分，即居中

7.2、盒子模型垂直方向布局

• 默认情况下父元素内容被子元素内容撑开，如果子元素内容超出父元素高度则出现溢出现象，但不影响布局
• 垂直方向等式不要求必须满足

7.3、盒子模型外边距重合现象

• 兄弟元素：取较大值，若一正一负则相加
• 父子元素（影响布局）：
  • 开启BFC
  • 使用伪元素

.box1::before {
    content: '';
    display: table;
}

7.4、行内元素盒子模型

• 不支持设置宽高
• 可以设置 padding，但垂直方向不影响布局
• 可以设置 margin，但垂直方向不影响布局
• 可以设置 border，但垂直方向不影响布局

7.5、盒子大小

• box-sizing 用来设置盒子尺寸的计算方式
  • content-box：默认值，宽度和高度设置内容区大小
  • border-box：宽度和高度设置整个盒子大小

7.6、border outline 边框

• 指定四个方向的边框宽度
• 格式
  • 四个值：上、右、下、左
  • 三个值：上、右/左、下
  • 两个值：上/下、右/左
  • 一个值：上/下/右/左
• 也可以单独指定 border-top-weight 或border-weight 以及其他样式
• border 和 outline 区别
  • border 影响布局
  • outline 不影响布局
• border-spacing 指定边框之间的距离
• border-collapse 边框合并

7.7、内边距

• 指定四个方向的内边距
• 格式
  • 四个值：上、右、下、左
  • 三个值：上、右/左、下
  • 两个值：上/下、右/左
  • 一个值：上/下/右/左

7.8、外边距

• 指定四个方向的外边距

7.9、溢出

• overflow

7.10、visibility 和 display

• visibility：设置元素显示状态，隐藏但占据页面位置
• display：设置元素显示状态，隐藏但不占据页面位置
  • inline
  • inline-block 行内块，可以设置宽高，但不推荐
  • table
  • none

7.11、box-shadow 阴影

• 阴影，不影响布局
• 格式：box-shadow(水平阴影, 垂直阴影, 模糊半径, 颜色(RGB))
• 半径越大，模糊越大

7.12、border-radius

• 格式
  • 四个值：上、右、下、左
  • 三个值：上、右/左、下
  • 两个值：上/下、右/左
  • 一个值：上/下/右/左
• border-radius: 50%; 圆

---

8、float 浮动

8.1、特点

• 脱离文档流
• 在文档流之上，不会盖住其他浮动元素
• 水平布局等式不再成立
• 不会从父元素中移出
• 不会超过兄弟元素

8.2、高度塌陷问题

• 原因：浮动后，子元素脱离文档流，导致父元素高度丢失。
• 解决方案：
  • 开启BFC
  • 使用伪元素

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

8.3、BFC 块级格式化环境

• 什么是 BFC
  • 块级格式化环境
  • 是CSS隐含属性
  • 一个独立布局区域
• 特点
  • 不会被浮动元素覆盖
  • 子元素和父元素的外边距不会重叠
  • 可以包含浮动子元素
• 开启方式
  • 设置元素浮动（不推荐）
  • 设置元素为行内块元素（注意：行内块不适合外部布局，不推荐）
  • 设置 overflow 除 visible 值以外的值（推荐）

---

9、clear 清除浮动

• 消除浮动元素对当前元素的影响
• 可选值
  • clear: left; 消除左侧浮动影响
  • clear: left; 消除左侧浮动影响
  • clear: both; 消除最大左侧或右侧浮动影响
• 原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素影响

---

10、position 定位

10.1、默认定位 static

• 默认值, 元素是静止的没有开启定位

10.2、relative 相对定位

• 特点
  • 不脱离文档流
  • 不会改变元素性质
  • 原点是元素在文档流中的位置
  • 设置偏移量元素会发生变化
    • 偏移量：left right top bottom
  • 层级提高，会覆盖其他元素

10.3、absolute 绝对定位

• 特点
  • 脱离文档流
  • 改变元素的性质，块元素变为行内元素
  • 原点是相对于其包含块定位
    • 包含块：
      • 离当前元素最近的开启定位的（非 static）祖先块元素
      • 如果都没有开启定位，则根据根元素定位
  • 设置偏移量元素的位置会发生变化
  • 层级提升
  • 当开启绝对定位后水平居中等式：left + margin-left + border-left + padding-left + weight + padding-right + border-right + margin-right + right = 包含块内容区宽度
    • left right 默认值 auto
    • 没有 auto 则自动调整 right
    • 有一个 auto 则自动调整 auuto 值
    • 多个 auto 则自动调整 right
    • 特殊：left right 为0，weight固定值，则自动调整 margin-left margin-right，即水平居中，注意：宽度是固定值！
  • 当开启绝对定位后垂直居中等式（必须满足）：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块内容区高度
    • top bottom 默认值 auto
    • 没有 auto 则自动调整 bottom
    • 有一个 auto 则自动调整 auto 值
    • 多个auto 则自动调整 bottom
    • 特殊：top bottom 为0，height固定值，则自动调整 margin-top margin-bottom，即垂直居中，注意：高度是固定值！

10.4、fixed 固定定位

• 特点
  • 脱离文档流
  • 改变元素性质
  • 原点是相对于浏览器窗口定位
  • 设置偏移量元素的位置会发生变化
  • 层级提升

10.5、sticky 粘滞定位

• 脱离文档流
• 改变元素性质
• 远点相对于包含块定位
• 设置偏移量元素的位置会发生变化
• 层级提升
• 兼容性不好

---

11、元素层级 z-index

• 祖先元素和后代元素开启定位后，祖先元素的层级再高也无法覆盖住后代元素，使用 z-index 指定元素层级

---

12、字体 font

12.1、常用属性

• font-size 字体大小
• color 字体颜色
• font-family 字体族（字体的格式）
  • 可选值
    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
  • 格式 font-family: 'ziti1', cursive, monospace;
  • 同时指定多个字体，多个字体用,隔开，优先级从前往后排列
• @font-face 将服务器中的字体直接提供给用户去使用
  • 注意：加载速度、版权问题

@font-face {
    font-family: 'myfontfamily';
    src: url("font/DejaVuSansMono_0.ttf");
}
p {
    font-family: myfontfamily;
}

12.2、简写

• 语法：font: font-weight font-style font-size/line-height font-family
  • 注意：值都有默认值，为空取默认值
• font-weight：字体的宽度
  • normal 默认值 不加粗
  • bold 加粗
• font-style: 字体风格
  • normal 默认值 正常
  • italic 斜体

---

13、图标字体 iconfont

13.1、fontawesome 源码

• 推荐 fontawesome 图标字体库，使用时需要将 css文件夹 和 webfonts 同时引入同一级目录下

/** `fontawesome` 源码分析 
通过 `@font-face` 引入图标字体 */ 
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }

13.2、fontawesome 使用方式

• link 方式
• 伪元素方式
• 实体方式

<link rel="stylesheet" href="fontawesome/css/all.css">
<i class="fas fa-camera" style="font-size: 26px; color: #c81623"></i>

li {
    list-style: none;
}
li::before {
    content: '\f1b0';
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    color: red;
    margin-right: 10px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

<link rel="stylesheet" href="fontawesome/css/all.css">
<span class="fas">&#xf0f3;</span>

13.3、iconfont使用

• 与 fontawesome相同

---

14、行高 line-height

• 文字占有的实际高度
• 单位
  • px
  • em
  • 整数：字体的指定倍数
• 行间距 = line-height - font-size
• 行高在 font-size 上下平均分配

---

15、文本水平垂直对齐

15.1、text-align 文本水平对齐

• 可选值
  • left 左对齐
  • right 右对齐
  • center 居中对齐
  • justify 两端对齐

15.2、vertical-align 文本垂直对齐

• 子父元素中出现文本无法对齐或不同元素之间文本无法对齐
• 注意：图片 <img> 也适用于此
• 可选值
  • baseline 默认值，基线对齐
  • top 顶部对齐
  • bottom 底部对齐
  • middle 居中对齐(基线高度加上 x 高度的一半的值)

15.3、text-decoration 设置文本修饰

• 可选值
  • none 无效果
  • underline 下划线
  • line-through 删除线
  • overline 上划线
• 格式: text-decoration: underline red;
  • 注意 IE不支持颜色，仅支持样式

15.4、white-space 设置网页如何处理空白

• 可选值
  • normal 正常
  • nowrap 不换行
  • pre 保留空白

15.5、文本溢出格式 text-overflow

• 可选值
  • elipsis 省略号

/* 设置文本溢出时添加省略号 */
p {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

---

16、背景

16.1、background-color 设置背景颜色

16.2、background-image 设置背景图片

• 同时设置背景图片和背景颜色，颜色作为图片的背景色
• 背景图片小于元素，平铺显示
• 背景图片大于元素，超出部分不显示
• 背景图片等于元素，正常显示

16.3、background-repeat 设置背景重复方式

• 可选值
  • repeat 平铺(默认)
  • repeat-x
  • repeat-y
  • no-repeat

16.4、background-size 设置背景图片大小

• 格式：background-size: 宽度 高度;
• 只填写一个值另一个值为 auto
• 可选值
  • conver 图片比例不变，元素铺满，若宽度大于元素宽度超出部分不显示
  • contain 图片比例不变，将图片在元素中完整显示

16.5、background-clip 边框裁剪

• 可选值
  • boder-box 从边框开始，含边框（默认）
  • padding-box 从内边距开始，含内边距
  • content-box 从内容区开始

16.6、background-origin 背景图片偏移量计算的原点

• 可选值
  • padding-box 从内边距开始计算，含内边距（默认）
  • content-box 从内容区开始计算
  • border-box 从边框开始计算，含边框

16.7、background-position 设置背景图片位置

• 可选值：top right bottom left center
• 格式：background-position: 水平方向 垂直方向;
  • 参数为定位或偏移量，若只写一个定位,则第二个定位为 center

16.8、background-attachment 背景图片能否跟随元素移动

• 可选值
  • scroll 背景图片跟随元素移动
  • fixed 背景图片固定
• 注意：不支持 IE8

16.9、简写 background

• 格式没有顺序要求没有必填属性
• 注意：
  • 必须 background-position 在先，background-size在后，需要 / 间隔，即：background-position/background-size;
  • 必须 background-origin在先，background-clip 在后，即 background-origin background-clip;

16.10、雪碧图 CSS-Sprite

• 解决图片闪烁问题
  • 将多个小图片保存到一个大图片中，然后通过调整 background-position 来显示
• 使用步骤
  • 确定使用的图标
  • 测量图标大小
  • 根据测量结果创建元素
  • 将雪碧图设置为背景图片
  • 设置偏移量显示图片
• 特点
  • 一次性加载多个图片，降低加载次数，加快访问速度，提升用户体验

17、线性渐变和径向渐变

17.1、linear-gradient 非平铺线性渐变

• IE8兼容性不好
• 颜色按一条直线发生变化
• 格式：background-image: linear-gradient(方向, 开始颜色 颜色起始位置, 颜色2 颜色起始位置, 结束颜色 颜色起始位置);
  • 方向：
    • to left
    • to right
    • to top
    • to bottom
    • xxx deg 旋转度数
    • xxx turn (旋转圈数)
• 举例： background-image: linear-gradient(to right, red 50px, yellow 100px); 从左往右渐变
• 渐变可以多个颜色，默认是平均分配

17.2、repeating-linear-gradient 平铺线性渐变

• IE8兼容性不好
• 格式：background-image: linear-gradient(red 50px, yellow 100px);
• 注意：background-repeat 失效

17.3、radial-gradient 非平铺径向渐变

• 径向渐变的形状根据元素形状计算
  • 正方形：圆形
  • 长方形：椭圆形
• 格式：background-image: radial-gradient(径向渐变大小 at 原点位置, 内圈颜色, 外圈颜色);
  • 径向渐变大小可选值：
    • circle 圆形
    • ellipse 椭圆
    • 自定义值
    • closest-side 渐变位置到最近的两边
    • closest-corner 渐变位置到最近的两角
    • farthest-side 渐变位置到最远的两边
    • farthest-conrner 渐变位置到最远两角
  • at 可选值：
    • 数字
    • 定位：
      • center
      • left
      • right
      • bottom
      • top
      • center center 居中显示
  • 位置大小可以省略
• 举例：background-image: radial-gradient(100px 100px at 0 0, red, yellow);

17.4、repeating-radial-gradient 平铺径向渐变

---

18、表格

18.1、单元格合并

• colspan 横向合并
• rowspan 纵向合并

18.2、表格结构

• 优点：结构清晰
• 结构：table thead th tbody td tfoot
• table 属于块元素，但是不是传统块元素，宽度是由内容撑开
• tbody 如果表格中没有使用，则创建一个并将tr全部放入其中
• td 默认情况下其中的元素垂直居中，通过 vertical-align text-align 属性改变
• 注意：可以通过td的特性来进行居中操作

/* 居中妙用 */
.div1 {
width: 100px;
height: 100px;
background-color: orange;
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center;
}
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto; /* 水平居中 */
}

<div class="div1">
    <div class="div2"></div>
</div>

---

19、表单常用属性

• 会存在一些默认样式
• readonly 只读会提交
• disabled 禁用，数据不会提交
• autocomplete = off 关闭自动补全
• autofocus 自动获取焦点

---

20、过渡 transition

20.1、transition-property 过渡属性

• 多个属性用 , 隔开
• 所有属性 all
• 仅支持有效值过渡，auto 不支持

20.2、transition-duration 过渡持续时间

• 可以分别指定时间，用 , 号隔开

20.3、transition-timing-function 过渡效果

• 指定过渡的的执行方式
• 可选值：
  • ease 默认值，慢速开始，先加速，后减速
  • linear 匀速运动
  • ease-in 加速运动
  • ease-out 减速运动
  • ease-in-out 先加速后减速
  • cublic-bezier() 指定时许函数
  • step(步数, 执行时间) 分步执行
    • 执行时间：
      • start 时间开始时执行
      • end 时间结束时执行，默认值

20.4、transition-delay 过渡等待时间

20.5、简写

• 注意：
  • 无先后顺序
  • 如果存在过渡效果等待时间和延迟时间两种时间，第一个是持续时间，第二个是等待时间
• 举例：transition: 2s margin-left 1s;

---

21、动画

• 动画和过渡最大的区别是能否自动触发

21.1、关键帧

• 设定动画效果，必须先设置关键帧
• 格式：

@keyframes 关键帧名称 {
/* 表示动画开始位置 from可以用 0% 代替 */ 
from {
 margin-left:0;
}
/* 表示动画结束位置 to可以用 100% 代替*/
to {
margin-left: 700px;
}
}

21.2、animation-name 动画名称

• 要对当前元素生效的关键帧名称

21.3、animation-duration 动画持续时间

21.4、animation-timing-function 动画效果

21.5、animation-delay 动画等待时间

21.6、animation-iteration-count 动画执行次数

• 可选值
  • 数字
  • infinite 无限次

21.7、animation-direction 动画执行方向

• 可选值
  • normal 从 from 到 to 执行
  • reverse 从 to 到 from 执行
  • alternate 从 from 到 to 到 from 执行
  • alternate-reverse 从 to 到 from 到 to 执行

21.8、animation-play-state 动画播放状态

• 可选值：
  • running 默认值，运行
  • paused 动画暂停

21.9、animation-fill-mode 动画填充模式

• 可选值：
  • none 默认值，动画执行完后回到原来位置
  • forwards 动画执行完后停留在最后位置
  • backwards 动画等待时，元素就处于 from 状态，结束时返回原来位置，与 animation-delay 连用
  • both 动画等待时，元素处于from状态，结束时停留在最后位置

21.10、简写

• 没有顺序要求，注意 animation-duration 写在 animation-delay 之前

---

22、transform 变形平移

• 改变元素形状或位置，不会影响页面布局

22.1、平移

• translateX() 延 X 轴平移
• translateY() 延 Y 轴平移
• translateZ() 延 Z 轴平移
• 在平移元素时，百分比是相对于自身计算
• 水平垂直居中：
  • position: absolute; 法，仅适用于高度宽度固定的情况
  • translateX() 法，优点宽度高度不用固定，无论内容多少都居中

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

22.2、translateZ() Z轴平移

• 用于立体效果
• 默认情况下网页不支持透视，如果需要看见效果，必须预先设置网页的视距, 即 在 <html>标签中设置属性 perspective 800 px ~ 1200 px 之间
• 调整元素和人眼之间的距离，距离越大，离人越近，距离越小，离人越远

22.3、旋转

• 默认情况下网页不支持透视，如果需要看见效果，必须预先设置网页的视距, 即 在 <html>标签中设置属性 perspective 800 px ~ 1200 px 之间
• rotateX()
• rotateY()
• rotateZ()
  • 单位
    • deg 角度
    • turn 圈数
• 与 translate 连用，先后位置影响视觉效果

22.4、backface-visibility 是否显示元素背面

22.5、transform-style 变形平移风格

• preserve-3d 3d 效果

22.6、放大缩小

• scaleX() 水平缩放
• scaleY() 垂直缩放
• scale() 双向缩放

22.7、transform-origin 变形原点

• 默认 center

---

23、less

23.1、CSS 设置变量、计算函数

• less 中的所有数字都可以直接进行运算
• 兼容性不好

/* CSS　*/
html {
    --color: #bfa;
    --length: 100px;
}
.box1 {
    background-color: var(--color);
    width: var(--length);
}

23.2、注释

• // 单行注释，编译完后不会出现在 CSS 文件中
• /** / 多行注释，编译完后会出现在 CSS 文件中

23.3、变量

• 格式：@变量名/类名
  • width:@a;
  • .@{a}{...}
• 可以声明提前
• 重复时，就近原则

23.3、$ 引用

• 格式：$属性名

23.4、& 选择外层父元素

• 格式：&父类名称

23.5、extend() 对当前选择器扩展指定选择器

• 举例：当前选择器.extend(指定选择器) 对当前选择器扩展指定选择器
• .类名() 直接对指定样式进行引用复制
  • 举例：.p1 { .p2() }

23.6、混合函数

• 混合函数作用是被引用，减少重复性代码，引用无参混合函数时括号可以省略
• 创建混合函数，编译后 CSS 不显示

/** 创建混合函数时，定义默认值 */
.p1(@w: 100px, @h: 200px) {
    width: @w;
    height: @h;
} 

div {
 .p1(200px, 100px);
 .p1(@w: 200px, @h: 100px);
}

23.7、average() 平均 darken() 变深

• 举例
  • 红蓝之间：average(red, blue);
  • 比蓝色深10%的颜色：darken(blue, 10%);

23.8、import 引入

• import "style.less";

---

24、flex 弹性(伸缩)盒子

24.1、弹性盒、弹性容器和弹性元素

• 弹性盒
  • 布局手段，代替浮动布局，可以跟随页面大小的改变而改变
• 弹性容器
  • 使用弹性盒的必要条件是创建弹性容器
  • display: flex; 设置块级弹性容器
  • display: inline-flex 设置行内弹性容器
• 弹性元素（弹性项）
  • 弹性容器的子元素是弹性元素，不包含后代元素
  • 一个元素可以是弹性盒同时也是弹性元素

24.2、弹性元素排列方式 flex-direction （弹性容器样式）

• 可选值
  • row 默认值，弹性元素在弹性容器中水平排列（从左到右）
    • 主轴 ：从左向右
  • row-reserve 反向水平排列（从右到左）
    • 主轴 ：从右向左
  • colum 垂直排列（从上到下）
  • colum-reserve 反向垂直排列（从下到上）

24.3、主轴、侧轴

• 主轴：弹性元素的排列方向
• 侧轴：与主轴垂直方向

24.4、flex-grow 弹性元素伸展系数（弹性元素样式）

• 当父元素有多余空间时，按比例分配
• flex-grow 默认是 0

24.5、flex-shrink 弹性元素的收缩系数（弹性元素样式）

• 当父元素中的空间不足时，按比例分配
• 默认值是 1，会自动收缩，0则不收缩
• 根据缩减系数和元素大小计算的，元素越大，缩减系数越大，缩放越大

24.6、flex-warp 弹性元素是否在弹性容器中自动换行（弹性容器样式）

• 可选值
  • nowrap 默认值，不自动换行
  • warp 延辅轴方向自动换行
  • warp-reverse 元素沿辅轴反方向换行

24.7、flex-flow 简写（弹性容器样式）

• flex-direction 和 flex-warp 的合起来的简写

24.8、justify-content 分配主轴上的空白空间（弹性容器样式）

• 如何分配主轴上的空白空间（主轴元素如何排列）
• 可选值
  • flex-start 元素沿主轴起边排列
  • flex-end 元素沿主轴结束边排列
  • center 元素居中排列（两头空白平分，中间相连）
  • space-around 空白分布到元素两侧（两元素中间的空白区域大于两头的空白区域）
  • space-evenly 空白分布到元素的单侧（两头以及元素中间的空白区域平均分配）
  • space-between 空白平均分配到元素间（两头无空白，元素中间空白平均分配）

24.9、align-items 元素在辅轴上如何对齐（弹性容器样式）

• 元素之间的关系
• 可选值
  • stretch 默认值，将元素的长度设置为相同的值
  • flex-start 元素不会拉伸，沿着辅轴起边对齐
  • flex-end 元素不会拉伸，沿着辅轴终边对齐
  • center 居中对齐
  • baseline 基线对齐

24.10、align-content 辅轴上空白空间的分配（弹性容器样式）

• 可选值
  • flex-start 沿辅轴起边排列
  • flex-end 沿辅轴终边排列
  • center 元素居中排列
  • space-around 空白分布到元素两侧
  • space-evenly 空白分部到元素单侧
  • space-between 空白分布到元素中间

24.11、align-self 覆盖当前元素上的align-items（弹性容器样式）

24.12、align-basis 元素基础长度 （弹性元素样式）

• 元素在主轴上的基础长度
  • 主轴是横向的，则指定的是元素的宽度
  • 主轴是纵向的，则指定的是元素的高度
  • 使 width heigth 值失效
• 默认值 auto 参考元素自身的高度或宽度，如果传递了具体数值，则以该值为准

24.13、flex 简写

• 格式：有顺序要求 flex: 增长 缩减 基础;
• 可选值
  • inital flex: 0 1 auto;
  • auto flex: 1 1 auto;
  • none flex: 0 0 none; 弹性元素没有弹性

24.14、order 弹性元素排列顺序（弹性元素样式）

---

25、像素和视口

25.1、物理像素

• 屏幕分辨率就是物理像素

25.2、CSS 像素

• F12后的显示即CSS像素，网页编写的是 CSS 像素

25.3、物理像素和 CSS 像素的关系

• 一个 CSS 像素由几个物理像素显示由浏览器决定

25.4、视口

• 通过缩放放大或拖拉网页更改视口大小
• 显示网页的区域，F12点击 HTML 标签查看视口大小
• 通过查看视口大小观察 CSS 像素和物理像素的比值
  • 视口宽度是 CSS像素，屏幕分辨率宽度是物理像素
  • 一个CSS像素由几个物理像素显示（像素比） = 视口像素（CSS 像素） / 物理像素
  • 比值越小图像越小，比值越大图像越大

25.5、手机像素

• 默认情况下移动端视口宽度为980像素(CSS 像素)，如果网页宽超出移动端浏览器会自动缩放以完整显示网页
• 苹果6手机物理像素是750像素，而视口大小是980像素，图像过小用户体验差

25.6、完美视口

• 通过调整视口大小，更改像素比大小

/* initial-sacle=1.0 初始化缩放1倍，防止极端情况下出现问题，横竖屏切换 */
<meta name="viewport" content="width=device-width, initial-sacle=1.0" >   

25.7、vw 单位

• vw 表示是视口的宽度，相对于视口宽度计算
• 1 vw = 1% 视口宽度
• 100 vw = 一个视口宽度
• 举例：一个 48 * 35 像素的图片
  • 100 vw = 750 px （设计图宽度像素），0.13333 vw = 1 px
  • 0.13333 vw * 48 = 6.4 vw

25.8、vw 适配

• 网页中字体最小是12 px，12 px 之下只有0其余值不生效
• 使用 rem 适配的时候要大于12 px

---

26、响应式布局

26.1、定义

• 网页根据不同的设备或窗口大小呈现出不同效果，使用响应式布局，可以使一个网页适用所有设备
• 响应式布局的关键是媒体查询

26.2、媒体查询

• 格式

  • @media 查询规则 {...}

• 媒体类型

  • all 所有设备
  • print 打印设备
  • screen 带屏幕设备
  • speech 屏幕阅读器
  • 使用 , 连接多个媒体类型
  • 使用 only 媒体类型 ,only 主要是为了兼容老版本浏览器

• 新特性

  • width 视口宽度
  • height 视口高度
  • min-width 视口最小宽度
  • max-width 视口最大宽度
  • 格式
    • media (min-width: 500px), (max-width: 700px) {....}
    • media only screen and (min-width: 500px) and (max-width: 700px) {....}
    • , 表示 或
    • and 表示 之间
    • not 非，除了

• 断点

  • 样式切换的分界点
  • 常用断点
    • 小于768 超小屏幕
    • 大于768 小屏幕
    • 大于992 中型屏幕
    • 大于1200 大屏幕

---