html+css复习
h5(html5)+css3复习
html
大前端学习路程
网页
html是一种标记语言
web标准的制定
网页的制作
标签：
单标签： <br/>…
双标签:<center></center>…
常用标签
<hx> :标题
<p> ：段落
<br/> ：换行
<hr/>：水平线
| 作用 | 标签 |
|---|---|
| 加粗 | <b> <strong> |
| 强调 | <em> <i> |
| 删除线 | <s> <del> |
| 扩展 | <u> 下划线<sub>上划线<sup>下划线 |
属性
width ==== 宽度
height ==== 高度
align ==== 对齐方式
color ==== 颜色
特殊符号
div和span标签
<div>:没有具体含义，用于划分区域
<span>:没有实际含义，主要运用于文本的独立修饰
列表
<ol>标签中只能嵌套<li>标签，<li>中可以嵌套其他标签
<ul>标签中只能嵌套<li>标签，<li>中可以嵌套其他标签
<ul type="none">取消列表中的黑点
图片标签的属性
<img scr=“位置” alt=“图片加载失败显示” title=“鼠标移上来显示”>
超链接标签
herf="网址"
table表格
<table>
<table>
<tr> }
<td></td> }第一行
<td></td> }
</tr> }
<tr> }
<td></td> }第二行
<td></td> }
</tr> }
</table>
tr属性
tr属性可单独设置
td属性
合并表格
表单标签
<input>:输入框
pleaceholder：用户提示信息
password:隐藏输入信息
信息提交到action指定位置
CSS
css内部样式
CSS外部样式
CSS行内样式
CSS样式表的优先级
行内样式>内部样式>外部样式
可加！important强调
CSS选择器
标签选择器
标签选择器：对某一大类的标签定义样式
类选择器
类选择器：对加入class 标识的标签进行定义
类选择器定义时前方加入.
如.lei1 .top1
ID选择器
id选择器：对id标识的标签进行定义
id选择器定义时前方加入#
如#lei1 #top1
一个标签只能有一个id
通配符
通配符
用*
基本语法* {margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0
群组选择器
群组选择器
用，链接多个标签
后代选择器
后代选择器
只有<div>标签中的<p>标签会被定义
（从右到左）先匹配孩子再匹配父容器
伪类选择器
伪类选择器
超链接
<a>标签上的伪类选择器
鼠标移上就有样式
link：未访问的样式<a>
visited：访问后的样式
hover：鼠标移上时的样式
active：点击时的样式<a>
选择器的权重
选择器的权重
!important>内联>id >class >元素选择器
文本属性
列表属性
背景属性
背景图片的滚动和固定
视差效果
浮动属性
清浮动
盒子模型
margin特性
特性问题:
- 兄弟关系，两个盒子垂直外边距与水平外边距问题
垂直方向，外边距取最大值。水平方向，外边距会进行合并处理.
- 父子关系，给子加外边距，但作用于父身上了，怎么解决？
子 margin-top===> 父的 padding-top, 注意高度计算.
给父盒子设置边框
ps 使用
ps==== 图片处理软件 (美工来做图，前端来测量 吸取颜色 切图)
图片放大和缩小 ctrl++ ctrl± alt + 滚动
图片的移动 按住空格，鼠标变为小手，拖动图片
如何调整出来标尺 ctrl+r 作用：拖动参考线方便测量 视图里面找到标尺，把对勾勾选上
测量图片大小 使用矩形选框工具（左侧竖着第二个）
如何查看数据大小 窗口 信息面板
如何修改测量单位：在标尺上面右键取修改单位
取消选区 ctrl+d
选完后，想调整大小，可以右键 变换选区
吸取颜色 使用吸管工具 吸取颜色完成后 #十六进制的颜色值
截图 使用快捷键截图 每次只能截取一个
使用选框工具框选取截取的区域 ctrl+c ctrl+n 回车 ctrl+v ctrl+s 回车 回车
切片工具 (裁剪工具进行切换) 切片工具框选你要留住的区域，点击文件，存储为 web 所用格式，弹窗里面点击存储 弹窗 格式：仅限图像，切片：所有用户切片
溢出属性
oveflow:visible/hidden (隐藏) scroll/auto (自动)/inherit;
visible: 默认值 溢出内容会显示在元素之外；overflow: visible; 显示溢出
hidden: 溢出内容隐藏；overflow:hidden; 溢出隐藏，文本裁切
scroll: 滚动，溢出内容以滚动方式显示:
auto: 如果有溢出会添加滚动条，没有溢出正常显示；overflow: inherit; 继承父元素的效果
inherit: 规定应该遵从父元素继承 overflow 属性的值。
overflow-x:X 轴溢出；ovrflow-y:Y 轴溢出
white- space: normal/nowrap/pre/pre-wrap/pre-line /inherit 该属性用来设置如何处理元素内的空白；
normal: 默认值，空白会被浏览器忽略，
nowrap: 文本不会换行，文本会在同 - - 行上继续，直到遇到
标签为止；
nowrap : 不换行
pre: 显示空格，回车，不换行 预格式化文本 - 保留空格，tab, 回车
pre-wrap: 显示空格，回车，换行
pre-line: 显示回车，不显示空格，换行
text- overflow:ilpl/llipsis;
clip: 默认值，不显示省略号；
ellipsis: 显示省略标记；
当单行文本溢出显示省略号需要同时设置以下声明:
- 容器宽度: width: 200px;
- 强制文本在 - 行内显示:white- space: nowrap;
- 溢出内容为隐藏: overflow: hidden;
- 溢出文本显示省略号: text-overflow: ellipsis;
元素显示类型
块元素:
A) 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B) 默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。
C) 块状元素都可以定义自己的宽度和高度。
D) 块状元素一般都作为其他元素的容器， 它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
例如:div p ul li ol dl dt dd h1-h6
p 标签放文本可以，不能放块级元素
行内 (内联) 元素:
A) 内联元素的表现形式是始终以行内逐个进行显示；横着排
B) 内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C) 内联元素也会遵循盒模型基本规则，但是对于 margin 和 padding 个别属性值不生效
例如: a b em i span strong
span 行内元素 只能设置边距的左右边距，不能设置上下边距
行内块元素
内联块状元素 (inline-block) 就是同时具备内联元素、块状元素的特点
例如: img input
元素类型的转化:
display: block; 把元索转换成块
display: inline; 把元素转换成行内
display: inline - block; 把元素转换成行内块
display: none; 隐藏
display: list-item 标签默认的 display 属性值
display 的属性值有 18 个属性值，甚至更多，display: table-header-group/table-footer-group/flex inline-flexltable/table-cel/table-captio……
position定位
| 语法 | 说明 | 文档流 偏移位置 |
|---|---|---|
| position：static； | 默认值 默认 | 默认 |
| position：absolute； | 绝对定位 | 脱离 1. 当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏有2. 父元素且父元素有定位，父元素 |
| position：relative； | 相对定位 | 不脱离 自己的初始位置 |
| position：fixed； | 固定定位 | 脱离 浏览器的当前窗口 |
| position: sticky; | 粘性定位 根据正常文档流进行定位 | 可以做吸顶效果，粘性定位是 css3.0 新增加的，兼容不好 |
| z-index 属性是不带单位的，并且可以给负值，没有设置 z-index 时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上； |
float 与 absolute 区别：float: 半脱离，文字环绕 absolute: 全脱离，不会出现文字环绕效果
锚点
锚点作用：页面不同区域的跳转， 使用 a 链接。
<a href="#锚点名字"></a> <div id="锚点名字"></div>
精灵图
将导航背景图片，按钮背景图片等有规则的合并成一张背景图， 即将多张图片合为 - - 张整图，然后用 background-position” 来实现背景图片的定位技术
通过图片整合来减少对服务器的请求次数，从而提高面的加载速度 通过整合图片来减小图片的体积
宽高自适应
自适应：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适
宽度自适应高度自适应：
宽度自适应：元素宽度的默认值为 auto
高度自适应：元素高度的默认值 {height:auto;}
浮动元素的高度自适应:
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
方法 1: 给父元素添加声明 overflow.hidden;(缺点：会隐藏溢出的元素)
方法 2: 在浮动元素下方添加空块元素，并给该元素添加声明: clear:both;height:0;overflow:hidden;
(缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)
方法 3: 万能清除浮动法
选择符 after {content:””;clear:both;display:block:0;visibility:hidden;/overflow:hidden;}
伪元素:
:after (与 content 属性 - 起使用，定义在对象后的内容。)
如: div:after {content:url (logo.jpg);} div:after {content:” 文本内容”;}
:before: 与 content 属性 - 起使用，定义在对象前的内容。
如: div:before {content:” 在其前放内容”;}
: first-letter: 定义对象内第一 个字符的样式。
: first-line: 定义对象内第一行文本的样式
窗口自适应:
盒子根据窗口的大小进行改变 设置方法: html,body {height: 100%;}
calc () 函数的使用:
calc () 函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如: width: calc (100% - 10px);
任何长度值都可以使用 calc () 函数进行计算；
calc () 函数支持”+”, “-“,”*”,”/“运算；
calc () 函数使用标准的数学运算优先级规则；
表单进阶
| 属性 | 描述 |
|---|---|
| name | 字符串，相同 name 的 radio 会成组，选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮 |
| checked | 布尔值，true 表示被选中，false 表示未被选中 |
| defaultChecked | 布尔值，表示默认被选中 |
| id | 字符串，唯一标志，常用来和 label 的 for 搭配使用 |
| value | 字符串，表示选中时向后端传递的值 |
| disabled | 布尔值，是否被禁用 |
| 单选框 type 属性设置为 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单 | |
| label 用来和 radio 配合，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 |
复选框 type 属性设置为 checkbox
上传文件 type 属性设置为 file
图片按钮 - 代替提交按钮 type 属性设置为 image
隐藏按钮 type 属性设置为 hidden
禁用 disabled, 只读 readonly
下拉菜单 select 支持的属性 size , 显示几个 multiple, 选多个，ctril,
option 支持的属性 value , 提供给后端需要用的 value 值 selected, 默认选中
文本域 textarea resize 重新设置大小，vertical, horizontal,both , none placeholder: 提示文字 默认 value: 写在双标签内部，注意空格问题
字段集 fieldset legend 内容
HTML5 新增
内容类型 (ContentType)：HTML5 的文件扩展符与内容类型保持不变，仍然为” .html” 或” .htm”。
DOCTYPE 声明：不区分大小写
指定字符集编码：meta charset=”UTF-8”
可省略标记的元素：
不允许写结束标记的元素: br、col、embed、 hr、img、 input、link、meta
可以省略结束标记的元素: li、 dt、 dd、 p、option、colgroup、thead、tbody.、tfoot、tr、td、th
可以省略全部标记的元素: html、head、body、colgroup、tbody
省略引号：属性值可以使用双引号，也可以使用单引号
语义化标签：
section 元素 表示页面中的一一个内容区块
article 元素 表示一块与上下文无关的独立的内容
aside 元素 在 article 之外的，与 article 内容相关的辅助信息
header 元素 表示页面中一个内容区块或整个页面的标题
footer 元素 表示页面中一个内容区块或整个页面的脚注
nav 元素 表示页面中导航链接部分
figure 元素 表示一段独立的流内容， 使用 figcaption 元素为其添加标题 (第一个或最后一个子元素的位置)
main 元素 表示页面中的主要的内容 (ie 不兼容)
video 和 audio：
video 元素定义视频
<video src=”movie.ogg" controls=”controls" > Video元素</video>
audio 元素定义音频
<audio src="someaduio.wav" > Audio元素</audio>
controls 属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay 属性：如果出现该属性，则视频在就绪后马。上播放。
loop 属性：重复播放属性。
muted 属性：静音属性。
poster 属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。
H5 新增属性：
Type= “color” 生成一个颜色选择的表单
Type= “tel” 唤起拨号盘表单
Type= “search” 产生一个搜索意义的表单
Type= “range” 产生 - 个滑动条表单
Type= “number” 产生一个数值表单
Type= “email” 限制用户必须输入 email 类型
Type=“url”” 限制用户必须输入 url 类型
Type= “date” 限制用户必须输入日期
Type= “month” 限制用户必须输入月类型
Type= “week” 限制用户必须输入周类型
Type= “time” 限制用户必须输入时间类型
Type= “datetime-local” 选取本地时间
选项列表：
Datalist : 选项列表
提示: option 元素永远都要设置 value 属性。
autofocus 属性:
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
required 属性:
验证输入不能为空
Multiple:
可以输入一个或多个值，每个值之间用逗号分开
例:
还可以应用于 file
pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例:
<input pattern= "[0-9][A- Z]{3}" title= "输入内容: 一个数与三个大写字母" placeholder= '输入内容: 一个数与三个大写字母’ >
表单增强
url 地址 (完整地址) : <input type="url">
电话号码: <input type="tel">
滑块效果: <input type="range" name="range" min="100" max="200" value="100" step="10">
数字类型: <input type="number" min="0" max="10" value="4" step="2" name="age">
搜索: <input type="search">
日期选择 :<input type="date">
月份选择 :<input type="month">
周数选择 :<input type="week">
选项列表：
CSS3
渐进增强和优雅降级:
渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation: 一开始就构建完整的功能， 然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从 - 个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级 (功能衰减) 意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
一、层级选择器
E>F 子选择器选择匹配的 F 阮素，匹配的阮素所匹配的玩素的子元素
E+F 相邻兄弟选择器选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素的后面
E~ F 通用选择器选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素
二、属性选择器
1、E [attr]: 只使用属性名，但没有确定任何属性值；[]
2、E [attr=”value”]: 指定属性名，并指定了该属性的属性值；[]
3、E [attr~= “value’”]: 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个 value 词，而且等号前面的 “~” 不能不写 []
扩展知识
4、E [attr^= “value”]: 指定了属性名，并且有属性值，属性值是以 value 开头的；[]
5、E [attr$=”value”]: 指定了属性名，并且有属性值，而且属性值是以 value 结束的 []
6、E [attr*=”value”]: 指定了属性名，并且有属性值，而且属值中包含了 value; []
三、伪类选择器
1、结构性伪类选择器
X:first- child 匹配子集的第一个元素。 IE7 就可以支持
X:last- child 匹配父元素中最后一个 X 元素
X:nth-child (n) 用于匹配索引值为 n 的子元素。索引值从 1 开始
X:only- child 这个伪类 - 般用的比较少，比如上述代码匹配的是 div 下的有且仅有一个的 p, 也就是说，如果 div 内有多个 p，将不匹配。
X:root 匹配文档的根元素。在 HTML (标准通用标记语言下的一个应用) 中，根元素永远是 HTML
X:empty 匹配没有任何子元素 (包括包含文本) 的元素 X
2、目标伪类选择器
E:target 选择匹配 E 的所有元素，匹配元素被相关 URL 指向
3、UI 元素状态伪类选择器
E:enabled 匹配所有用户界面 (form 表单) 中处于可用状态的 E 元素
E:disabled 匹配所有用户界面 (form 表单) 中处于不可用状态的 E 元素
E:checked 匹配所有用户界面 (form 表单) 中处于选中状态的元素 E
E:selection 匹配 E 元素中被用户选中或处于高亮状态的部分
4、否定伪类选择器
E:not (s) (IE6- 8 浏览器不支持:not () 选择器。)
匹配所有不匹配简单选择符 s 的元素 E
5、动态伪类选择器
E:link 链接伪类选择器
选择匹配的 E 元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器
选择匹配的 E 元素，且匹配元索被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器
选择匹配的 E 元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器
选择匹配的 E 元素，且用户鼠标停留在元素 E 上。IE6 及以下浏览器仅支持 a:hover
阴影
文本阴影：
text-shadow：2px 2px 2px red；水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色
盒子阴影：box-shadow
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影 (开始时) 改变阴影内侧阴影
字体引入
字体模块: @font- face
@font-face 是 CSS3 中的一个模块，他主要是把自己定义的 Web 字体嵌入到你的网页中，随着 @font- face 模块的现，我们在 Web 的开发中使用字体不怕只能使用 Web 安全字体 (@font .face 这个功能早在 IE4 就支持)
@font-face 的语法规则:
@font-face {
font- family: ;
sre: [][[]]*;
[font- weight: ];
[font- style:
怪异盒模型
含义：更改原有布局盒子模型的计算方式通过 box-sizing 属性的取值进行更改
属性: box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值: content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
属性值: border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才 能得到内容的宽度和高度。
弹性盒子
弹性盒是一种新的布局方式， 特别适合移动端布局
影响：子元素默认横向排列 行内元素， 变成了块级元素 只有一个元素的时候， margin:auto 自动居中
您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。
阴影
文本阴影：
text-shadow：2px 2px 2px red；水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色
盒子阴影：box-shadow
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影 (开始时) 改变阴影内侧阴影
字体引入
字体模块: @font- face
@font-face 是 CSS3 中的一个模块，他主要是把自己定义的 Web 字体嵌入到你的网页中，随着 @font- face 模块的现，我们在 Web 的开发中使用字体不怕只能使用 Web 安全字体 (@font .face 这个功能早在 IE4 就支持)
@font-face 的语法规则:
@font-face {
font- family: <YourWebFontName>;
sre: <source> [<format>][<source>[<format>]]*;
[font- weight: <weight>];
[font- style: <style>];}
@font-face 语法说明:
YourWebFontName: 此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的 Web 元索中的 font-family。如
”font-family:” YourWebFontName”;”
source: 此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
怪异盒模型
含义：更改原有布局盒子模型的计算方式通过 box-sizing 属性的取值进行更改
属性: box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值: content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
属性值: border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才 能得到内容的宽度和高度。
弹性盒子
弹性盒是一种新的布局方式， 特别适合移动端布局
影响：子元素默认横向排列 行内元素， 变成了块级元素 只有一个元素的时候， margin:auto 自动居中
您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。
| display | 指定 HTML 元素的盒子类型 |
|---|---|
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
flex-direction
flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：
| inherit | 从父元素继承此属性的值 |
|---|---|
| row | 默认值，主轴沿水平方向从左到右 |
| row-reverse | 主轴沿水平方向从右到左 |
| column | 主轴沿垂直方向从上到下 |
| column-reverse | 主轴沿垂直方向从下到上 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承此属性的值 |
flex-wrap
flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：
值 描述
nowrap 默认值，表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行，但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：
flex-flow: flex-direction flex-wrap;
justify-content
justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔是相等的 |
| space-around | 每个项目两侧的间隔相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
align-items
align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
align-content
align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| stretch | 默认值，将项目拉伸以占据剩余空间 |
| center | 项目在容器内居中排布 |
| flex-start | 项目在容器的顶部排列 |
| flex-end | 项目在容器的底部排列 |
| space-between | 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 |
| space-around | 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承该属性的值 |
order
order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，属性的语法格式如下：
order: number;
其中 number 就是项目在容器中的位置，默认值为 0。
align-self
align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：
| 值 | 描述 |
|---|---|
| auto | 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为 “stretch” |
| stretch | 项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 项目与容器的基线对齐 |
| initial | 将此属性设置为属性的默认值 |
| inherit | 从父元素继承属性的值 |
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：
flex: flex-grow flex-shrink flex-basis;
参数说明如下：
flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、”px”、”em” 等单位的形式。
另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）
除了可以使用 flex 属性外，您也可以使用 flex-grow、flex-shrink、flex-basis 几个属性来分别设置项目的增长量、收缩量以及项目长度
多列布局
column-count 属性规定元素应该被分隔的列数
适用于：除 table 外的非替换块级元素，table cells, inline -block 元素
column-gap 属性规定列之间的间隔大小
column-rule 设置或检索对象的列与列之间的边框。复合属性。
column-rule- color 规定列之间规则的颜色。
column- rule -style 规定列之间规则的样式。
column-rule width 规定列之间规则的宽度。
column-fill 设置或检索对象所有列的高度是否统一
auto: 列高度自适应内容 balance: 所有列的高度以其中最高的一列统一
column-span 设置或检索对象元素是否横跨所有列。
none: 不跨列 all: 横跨所有列
column-width 设置或检索对象每列的宽度
响应式布局
常见的布局方案
固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计 - 套尺寸；
可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及 浏览器宽度，并能完美利用有效空间展现最佳效果；
混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。
布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式: pc 优先 (从 pc 端开始向下设计) ; 移动优先 (从移动端向。上设计) ; 呒论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化 (发生布局改变的临界点称之为断点)
响应式布局：模块中内容：挤压 - 拉 (布局不变) 换行 - 平铺 (布局不变) 删减 - 增加 (布局不变) 模块位置变换 (布局改变) 模块展示方式改变：隐藏 - 展开 (布局改变)
响应式布局特点
设计特点：面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题
缺点：兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
媒体查询的含义：媒体查询可以让我们根据设备显示器的特性 (如视口宽度、屏幕比例、设备方向：横向或纵向) 为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width、height 和 color (等) 。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
媒体查询操作方式
实际操作为：对设备提出询问 (称作表达式) 开始，如果表达式结果为真，媒体查询中的 CSS 被应用，如果表达式结果为假，媒体查询内的 CSS 将被忽略。
媒体查询结构
@media all and (min-width:320px) {
body { background-color:blue;}
image-20230104192240678
image-20230104192308976
rem
px ，em , rem 之争
px: 50px
em: 相对单位， 相对于父元素的字体大小。div width:10em;
rem: 相对单位， 相对于根元素（html）字体大小， div width:10rem;
vw 与 vh
vw 单位可以根据窗口的宽度自动改变大小，1vw 是窗口宽度的 1%；
vh 单位可以根据窗口的高度自动改变大小，1vh 是窗口高度的 1%；
vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于 rem，因为完全不用使用额外的计算
vmin：取当前 Vw 和 Vh 中较小的那一个值
vmax：取当前 Vw 和 Vh 中较大的那一个值
CSS3 渐变
CSS3 渐变 (gradient) 可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变 (gradients) 即 CSS 3 渐变 (梯度) 可以让你在两个或多个指定的颜色之间显示平稳的过渡。
线性渐变：
语法:background: linear-gradient (direction, color-stop1, color-stop2, .);
说明:direction: 默认为 to bottom, 即从上向下的渐变；
stop: 颜色的分布位置，默认均匀分布，例如有 3 个颜色，各个颜色的 stop 均为 33.33%。
径向渐变：
径向渐变不同于线性渐变，线性渐变是从” 一个方向” 向” 另一个方向” 的颜色渐变，而径向渐变是从 “一个点” 向四周的颜色渐变
语法:
background: radial-gradient(center, shape, size, start-color, …. last-color);
说明:
center: 渐变起点的位置，可以为百分比，默认是图形的正中心。
shape: 渐变的形状，ellipse 表示椭圆形 ，circle 表示圆形。 默认为 ellipse, 如果元素形状为正方形的元素，则 ellipse 和 circle 显示一样。
size: 渐变的大小，即渐变到哪里停止，它有四个值。closest-side: 最近边；
farthest-side: 最远边；closest-corner: 最近角；farthest-corner: 最远角
过渡
复合属性: transition 取值: all 5s linear 3s
含义: css3 的 transition 允许 css 的属性值在一 定的时间区间内平滑地过渡。 这种效果可以在鼠标单击、获得焦点被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值
all 单一属性: transition-property: 检索或设置对象中的参与过渡的属性
5s 单一属性: transition-duration: 检索或设置对象过渡的持续时间
3s 单一属性: transition-delay: 检索或设置对象延迟过渡的时间
linear 单一属性: transition- timing-function: 检索或设置对象中过渡的动画类型
简写: transition:all / 具体属性值运动时间 s/ms 延迟时间 s/ms 动画类型
image-20230104193331665
2D
1.translate()
将元素向指定的方向移动，类似于 position 中的 relative。
水平移动：向右移动 translate (tx,0) 和向左移动 translate (-tx,0);
垂直移动：向 上移动 translate (0,-ty) 和向下移动 translate (0,ty);
对角移动：右 下角移动 translate (tx,ty)、右上角移动 translate (x,-ty)、左上角移动 translate (-tx, -ty) 和左下角移动 translate (- tx,ty)。
translateX (): 水平方向移动一个对象。对像只向 X 轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。translateY (): 纵轴方向移动一个对象。对象只向 Y 轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。这两个函数和前面介绍的 translate) 函数不同的是每个方法只接受一个值。
所以
transform:translate (-100px,0) 实际上等于 transform:translateX ( -100px);
transform:translate (0,-100px) 实际上等于 transform:translateY (- 100px)；
设置 left 属性会频繁的造成浏览器回流重排，而 transform 和 opacity 属性不会，因为它是作为合
成图层发送到 GPU 上，由显卡执行的渲染，这样做的优化如下
可以通过亚像素精度得到一一个运行在特殊优化过的单位图形任务。上的平滑动画，并且运行非常快。
动画不再绑定到 CPU 重排，而是通过 GPU 合成图像。 即使运行一个非常复杂的 JavaScript
任务，动画仍然会很快运行。
2.scale()
让元素根据中心原点对对象进行缩放。默认的值 1。因此 0.01 到 0.99 之间的任何值，使一个元素缩小；而任何大于或等于 1.01 的值，让元素显得更大。
缩放 scale0) 函数和 translate () 函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。
例如，
scale (1,1) 元素不会有任何变化，而 scale (2,2) 让元素沿 X 轴和 Y 轴放大两倍。
scaleX (): 相当于 scale (sx,1)。 表示元素只在 X 轴 (水平方向) 缩放元素，其默认值是 1。
scaleY (): 相当于 scale (1,sy)。表示元素只在 Y 轴 (纵横方向) 缩放元素，其默认值是 1.
3.rotate()
旋转 rotate () 函数通过指定的角度参数对元素根据对象原点指定一个 2D 旋转。 它主要在二维空间内进行操作，接受一个角度值， 用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
rotateX (方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY () 方法，元素围绕其 Y 轴以给定的度数进行旋转
4.skew()
倾斜 skew) 函数能够让元素倾斜显示。它可以将一个对象以其中心位 置围绕着 X 轴和 Y 轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
5.transform-origin
transform-origin 是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了 transform 属性的时候起作用；
因为我们元素默认基点就是其中心位置，换句话说我们没有使用 transform-origin 改变元素基点位置的情况下，transform 进行的 rotate,translate,scale,skew 等操作都是以元素自 己中心位置进行变化的。
2D 转换元素能够改变元素 x 和 y 轴
关键帧动画
animation 和 transition
相同点：都是随着时间改变元素的属性值。
不同点:transition 需要触发一个事件 (hover 事件或 click 事件等) 才 会随时间改变其 css 属性；而 animation 在不需要触发任何事件的情况 下也可以显式的
随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3 的 animation 就需要明确的动画属性值。
animation:mymove 20s ease -in-out 2s infinite alternate ; 动画名称 动画持续时间 动画的过渡类型 动画的循环次数 动画在循环中是否反向运动 动画延迟的时间
animation
animation 复合属性。检索或设置对象所应用的动画特效。
1.animation-name 检索或设置对象所应用的动画名称
说明：必须与规则 @keyframes 配合使用，eg:@keyframes mymove {} animation-name:mymove
2.animation-duration 检索或设置对象动画的持续时间
说明:animation-duration:3s; 动画完成使用的时间为 3s
3.animation-timing-function 检索或设置对象动画的过渡类型
说明:linear: 线性过渡。等同于贝塞尔曲线 (0.0, 0.0, 1.0, 1.0)
ease: 平滑过渡。等同于贝塞尔曲线 (0.25, 0.1, 0.25, 1.0)
ease-in: 由慢到快。等同于贝塞尔曲线 (0.42, 0, 1.0, 1.0)
ease- out: 由快到慢。等同于贝塞尔曲线 (0, 0, 0.58, 1.0)
ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线 (0.42, 0, 0.58, 1.0)
4.animation-delay 检索或设置对象动画延迟的时间
说明:animation-delay:0.5s; 动画开始前延迟的时间为 0.5s)
5.animation-iteration-count 检索或设置对象动画的循环次数
说明:animation-iteration-count: infinite| number; infinite: 无限循环 number: 循环的次数
6.animation-direction 检索或设置对象动画在循环中是否反向运动
说明:normal: 正常方向 reverse: 反方向运行
alternate: 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse: 动画先反运行再正方向运行，并持续交替运行
7.animation-play-state 检索或设置对象动画的状态
说明:animation-play-state:running | paused; running: 运动 paused: 暂停 animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
3D
CSS3 中的 3D 变换主要包括以下几种功能函数:
3D 位移：CSS3 中的 3D 位移主要包括 translateZ () 和 translate3d () 两个功能函数；
3D 旋转：CSS3 中的 3D 旋转主要包括 rotateX ()、rotateY ()、 rotateZ () 和 rotate3d ()) 四个功能函数；
3D 缩放：CSS3 中的 3D 缩放主要包括 scaleZ () 和 scale3d () 两个功能函数；
景深:
生活中的 3d 区别于 2d 的地方 近大远小 景深
程序中实现的方法 perspective 元素距离视线的距离 (物体和眼睛的距离越小，近大远小的效果越明显)
perspective: 1200px; (在父元素中使用) transform:perspective (1200px) (在子元素中使用)
两个都设置会发生冲突，建议只设置父元素，通常的数值在 900- 1200 之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
perspective-origin;
观察 3d 元素的 (位置) 角度 perspective- origin: center center (中心)
perspective-origin: left top (左 上角)
perspective-origin: 100% 100% (右 下角)
transform-style 属性:
transform-style 属性是 3D 空间一个重要属性，指定嵌套元素如何在 3D 空间中呈现。他主要有两个属性值: flat 和 preserve-3d
其中 flat 值为默认值，表示所有子元素在 2D 平面呈现。preserve-3d 表示所有子元素在 3D 空间中呈现。
也就是说，如果对一个元素设置了 transform-style 的值为 flat, 则该元素的所有子元素都将被平展到该元素的 2D 平面中进行呈现。沿着 X 轴或 Y 轴方向旋转该元素将导致位于正或负 Z 轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了 transform-style 的值为 preserve-3d, 它表示不执行平展操作，他的所有子元素位于 3D 空间中。
3D 位移:
在 CSS3 中 3D 位移主要包括两种函数 translateZ () 和 translate3d)。translate3d () 函数使一 个元素在三维空间移动。
语法: translate3d (tx,ty,tz)
tx: 代表横向坐标位移向量的长度；
ty: 代表纵向坐标位移向量的长度；
tz: 代表 Z 轴位移向量的长度。此值不能是一个百分比值， 如果取值为百分比值，将会认为无效值。
ranslateZ () 函数的功能是让元素在 3D 空间沿 Z 轴进行位移。
语法: translateZ (t) t: 指的是 Z 轴的向量位移长度。
3D 旋转:
在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3 新增三三个旋转函数: rotateX ()、 rotateY0. rotateZ () 和 rotate3d (x,y,z,a)。
rotateX(a)
rotateX () 函数指定一个元素围绕 X 轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕 X 轴顺时针旋转；反之，如果值为负值，元素围绕 X 轴逆时针旋转。
rotateY(a)
rotateY (函数指定一个元素围绕 Y 轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕 Y 轴顺时针旋转；反之，如果值为负值，元素围绕 Y 轴逆时针旋转。
rotateZ(a)
rotateZ () 函数和其他两个函数功能一样的，区别在于 rotateZ () 函数指定一个元素围绕 Z 轴旋转。
rotate3d(x,y,z,a)
x: 是一个 0 到 1 之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值；
y: 是一个 0 到 1 之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值；
z: 是一个 0 到 1 之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值；
a: 是一个角度值，主要用来指定元素在 3D 空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
3D 缩放
CSS3 3D 变形中的缩放主要有 scaleZ () 和 scale3d () 两种函数，当 scale3d (中 X 轴和 Y 轴同时为 1, 即 scale3d (1,1,sz), 其效果等同于 scaleZ (sz)。 通过使用 3D 缩放函数，可以让元素在 Z 轴上按比例缩放。默认值为 1, 当值大于 1 时，元素放大，反之小于 1 大于 0.01 时，元素缩小
scale3d(sx,sy,sz)
sx: 横向缩放比例；
sy: 纵向缩放比例；
sz: Z 轴缩放比例；
scaleZ(s)
s: 指定元素每个点在 Z 轴的比例。
注: scaleZ () 和 scale3d () 函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果
网格布局
一、网格布局的概念，和 flex 布局的区别
含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
区别: Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定” 项目” 针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成行” 和” 列”, 产生单元格，然后指定” 项目所在’的单元格，可以看作是二维布局。
网格布局案例：不规则布局页面 (win 窗口)
容器：一个案例中最大的盒子，可以理解成父元素
项目：一个案例中的，最大盒子里面的内容，可以理解成子元素
行和列：容器里面的水平区域称为” 行”，垂直区域称为” 列”
单元格：行和列的交叉区域，称为” 单元格”
网格线：划分网格的线，称为” 网格线” 水平网格线划分出行，垂直网格线划分出列
Grid 布局容器属性
1.display 属性
display: grid | inline-grid | subgrid
2. 定义列宽和行高
属性 说明
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高
注：可使用以下几种方法
repeat()
简化重复的值
例如：
grid-template-columns: repeat(3, 33.33%);
auto-fill 关键字
表示自动填充
例如：
grid-template-columns: repeat(auto-fill, 100px);
fr 关键字
fraction 的缩写，意为” 片段”
例如：
grid-template-rows: repeat(3,1fr);
minmax()
表示长度就在这个范围之中
例如：
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
表示列宽不小于 100px，不大于 1fr
auto 关键字
表示由浏览器自己决定长度
例如：
grid-template-columns: 100px auto 100px;
左右两个单元格固定宽度 100px，中间为自动剩下的宽度
网格线的名称
可以使用方括号，指定每一根网格线的名字，方便以后的引用
例如：
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
3. 设置间距
属性 说明
grid-gap 合并简写形式 grid-gap: < grid-row-gap> < grid-column-gap>;
grid-row-gap 用于设置行间距
grid-column-gap 用于设置列间距
注：如果 grid-gap 省略了第二个值，浏览器认为第二个值等于第一个值
根据最新标准，上面三个属性名的 grid - 前缀已经删除，grid-column-gap 和 grid-row-gap 写成 column-gap 和 row-gap，grid-gap 写成 gap
4. 定义区域
属性：grid-template-areas
多个单元格合并成一个区域的写法：
5. 容器的子元素顺序
属性 值 说明
row 先行后列
grid-auto-flow column 先列后行
row dense 先行后列，并且尽量填满空格
column dense 先列后行，并且尽量填满空格
6. 设置单元格内容
justify-items 属性设置单元格内容的水平位置（左中右）
属性 值 说明
start 对齐单元格的起始边缘
justify-items end 对齐单元格的结束边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个宽度（默认值）
align-items 属性设置单元格内容的垂直位置（上中下）
属性 值 说明
start 对齐单元格的上边缘
align-items end 对齐单元格的下边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个高度（默认值）
注：place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式
7. 内容区域在容器里面的位置
justify-content 属性是整个内容区域在容器里面的水平位置（左中右）
属性 值 说明
start 对齐容器的起始边框
end 对齐容器的结束边框
center 容器内部居中
justify-content stretch 项目大小没有指定时，拉伸占据整个网格容器
space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍
space-between 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
align-content 属性是整个内容区域的垂直位置（上中下）
属性 值 说明
start 对齐容器的上边框
end 对齐容器的下边框
center 容器内部居中
align-content stretch 项目大小没有指定时，拉伸占据整个网格容器
space-around 每个项目上下的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍
space-between 项目与项目的上下间隔相等，项目与容器边框之间没有间隔
space-evenly 项目与项目的上下间隔相等，项目与容器边框之间也是同样长度的间隔
注：place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式
8. 多余网格的列宽和行高
grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。
它们的写法与 grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
Grid 布局项目属性
1. 指定项目位置
属性 说明
grid-column-start 左边框所在的垂直网格线
grid-column-end 右边框所在的垂直网格线
grid-row-start 上边框所在的水平网格线
grid-row-end 下边框所在的水平网格线
属性 说明
grid-column grid-column-start 和 grid-column-end 的合并简写形式
grid-row grid-row-start 属性和 grid-row-end 的合并简写形式
grid-area 指定项目放在哪一个区域，与容器定义区域配合使用
也可以用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。
2. 设置单元格内容的位置
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
属性 值 说明
start 对齐单元格的起始边缘
justify-self end 对齐单元格的结束边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个宽度（默认值）
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。
属性 值 说明
start 对齐单元格的上边缘
align-self end 对齐单元格的下边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个高度（默认值）
注：place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。
2301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
