CSS
简介
CSS （cascading style sheet）层叠样式表
CSS书写方式
- 内嵌式：在head标签中书写style标签。
- 外链式：用link标签引入.ccs文件
<link rel="stylesheet" type="text/css" href=""/>
- 行内式：直接写在标签的style属性上。
- 导入式：在style标签内写@import url（）。
<style>
@import url(".css");
</style>
CSS基本语法
选择器{
键:值;
}
CSS注释
/*注释内容*/
CSS常用单位
| 符号 | 意义 |
|---|---|
| px 和 % | px 代表 pixel 像素，百分号是窗口的百分之几 |
| em | font size of the element ，相对于元素的字体大小，如果元素没有px，则会继承父元素px |
| rem | font size of the root element，相对于根元素的字体大小 |
| vw | viewport width，1vw 等于视口*宽度的1% |
| vh | viewport height，1vh 等于视口*高度的1% |
CSS选择器 CSS Selector
标签选择器（Tag selector）
直接写标签名即可
div{
width:100px;
height:100px;
}
类选择器（Class selector）
用点（句号，full stop）来进行选择，点类名
.class{
background-color:red;
}
同一类名键值冲突，将使用css书写上后写的
id选择器（ID selector）
用井号 # 来进行选择，井号id
#id{
font-size:14px;
}
复合选择器
| 选择器名称： | 用法 |
|---|---|
| 后代选择器： | 用空格表示后代 |
| 交集选择器： | 哦那个长用在标签的某一类，例如div.1 |
| 并集选择器： | 用逗号隔开，一起选中 |
伪类选择器
选择处于特殊状态下的元素，例如超链接a的4个特殊状态
| a:link | 没有被访问过的超链接 |
| a:visited | 已被访问过的a |
| a:hover | 鼠标悬停下的a |
| a:active | 正在激活的a |
遵从“绿哈”(LVHA)顺序写，否则会有伪类不生效。
link→visited→hover→active
以下为css3选择器，ie可能不兼容
元素关系选择器
| 子选择器 | >大于号 | 两元素必须是父子关系，选中父元素的直接子元素 |
| 相邻兄弟选择器 | + 加号 | A和B都是同一个父亲，A+B选中B |
| 通配兄弟选择器 | ~ 波浪号 | A和B同级，A~B选中A后所有的同级B |
序号选择器
:first-child
:last-child
:nth-child(n)/(an+b)/2n+1 odd/2n even
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
除了type都不可跨越种类
属性选择器
| 标签[属性] | 选择带有方括号里属性的标签 |
| 标签[属性="值"] | 选择属性与值相同的带有此属性标签 |
| 标签[属性^="值"] | 尖括号，以值开头的带有此属性标签 |
| 标签[属性$="值"] | 美元号，以值结尾的带有此属性标签 |
| 标签[属性*="值"] | 星号，选择含有该值属性的标签 |
| 标签[属性~="值"] | 波浪号，以值空格分开 |
| 标签[属性丨="值"] | 竖号，以值开头的 |
CSS3新增伪类
| :empty | 选择空标签 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或多选按钮 |
| :root | 选择根元素，即<html>标签 |
伪元素
用双冒号书写
| ::before | 匹配选中的元素的第一个子元素，必须设置content属性 |
| ::after | 匹配选中的最后一个子元素，必须设置content属性 |
| ::selection | 文档中被用户选中高亮的部分 |
| ::first-letter | 块级元素第一行的第一个字母/文字 |
| ::first-line | 块级元素第一行文字 |
层叠性和选择器权重计算
层叠性： 多个选择器可以同时作用于同一个标签，效果叠加活覆盖。
层叠性冲突处理： id权重>class权重>标签权重
复杂选择器权重计算：id个数，class个数，标签个数（x，y，z）
!important提升权重
CSS元素分级：
行元素（display带inline的元素）和块元素（display为block的元素）
行元素：
不独占一行（能并排显示），设置宽高无效（能写值但不表现），width和height写多少，浏览器盒子模型就有多少，但没任何效果
常见inline元素：span、a、strong。
块元素：
独占一行（不能并排显示），能设置宽高等所有盒模型属性，如果不设置width默认100%。
常见block元素：div、p、ul ol li、h1-h6
行内块元素：
能并排显示，能设置宽高。如果不设置，宽和高都由子元素撑起。
如果不在标签内写文本，直接写在body上，会被识别成一段叫#text里写的字符串。同样是行内元素。
盒模型
盒模型4大元素：由内到外依次为 content 、pading 、border 、margin。
content：内容区 。
padding：内边距，content与border之间的距离。
border：边框。
margin：盒子与盒子之间的距离。
[图片上传失败...(image-7397d6-1649463813126)]
W3C标准盒模型如上图所示，同时也是浏览器显示的盒模型。
⚠但是注意，盒子(box)与盒模型(box model)不是一个东西。
content
内容区，可以定义width和height，一般情况下写width和height指的就是content的宽高。
padding
是盒子的内边距，padding是四个方向的，只能设置数值。
可以分别用小属性进行设置：padding-top、padding-right、padding-bottom、padding-left 。
四数值写法：用四个数值以空格隔开进行设置，分别代表上右下左（从上开始顺时针四个方向）。
三数值写法：上 右 下 （左=右）
二数值写法：上 右 （下=上、左=右）
一数值写法：上 （右=上、下=上、左=右）
padding部分会强制继承content部分的background，如果不想继承只能采用 backgroud-clip:content-box; 取消。
border
border是盒子边框，可以设置线宽，线形、线色，也是四个方向的。
border-width：线宽，可以设置数值；
border-style：线形，常见四种：solid 实线、dashed 虚 、dotted 点、double 双；
border-color：线色。
也有四个方向小属性：border-top 、border-right 、 border-bottom 、border-right ；也可以用多数值写法，值法规则与padding一样。
同时四个方向小属性每个小属性还能分出四个方向的线宽，线形，线色，
例如 border-top-width 、border-top-style 、 border-top-color。
无边框：border值设为none。
如何利用边框制作三角形：把颜色值设为 transparent 透明色。先设置四边框透明色，content不设内容（宽高设为0），然后单独设置一边边框颜色即可。
border-radius
border-radius属性，圆角边框，只能设置数值。单位通常为像素，值代表圆的半径；单位也可以取百分值，只有百分值才能设置长方盒子为椭圆。当圆角直径等于方盒子边长一半，方盒子就会变为圆。
也有四个方向小属性（从上开始顺时针四个方向）：上左，上右，下右，下左：
border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius
四值写法：顺时针由上到下。
三值写法：顺时针由上到下，左上和右上和右下（左下=右上）
二值写法：对角线由上到下，左上和右上（右下=左上、左下=右上）
border-image
| 属性 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径 |
| border-image-slice | 图片边框向内偏移。（裁剪的尺寸，一定不家单位，上右下左顺序） |
| border-image-width | 图片边框的宽度（需要加单位） |
| border-image-repeat | 图像边框是否平铺repeat、铺满round或拉伸stretch |
margin
margin是盒子外边距，即盒子与盒子之间的距离。margin也有四个方向。
margin重叠（塌陷、大吞小）：竖直方向的magin会发生重叠现象，小的会塌陷到大的margin中。父子元素也有margin塌陷问题。
块元素水平居中：将左右margin值设为auto即可，例如： margin: 0 auto;
垂直居中需要使用绝对定位技术。盒子居中是相对于父盒子居中，文字居中是相对于父标签居中，概念不一样。
box-sizing属性
默认值content-box，size属性是用来设置宽高的，当设置：box-sizing:border-box; 后，width和heigh表示整个盒子大小，即根据border来计算width和height。
box-shadow属性
写法： box-shadow: X偏移量 Y偏移量；例如：box-shadow: 1px 3px ;
可选值：模糊度、阴影大小、颜色、内阴影inset。例如：
box-shadow:1px 1px 10px 3px black inset;
表示x轴偏移量1像素，y轴偏移量1像素，阴影大小为10，黑色的内阴影。
可添加多个阴影，用逗号隔开。
内阴影可以做内发光。
block属性和inline属性的盒子：
margin设定对inline元素的左右生效，对上下无效。padding对左右生效，对上下仅样式生效，距离无效。
display属性：
常用值
| display:block; | 转为块级元素 |
| display:inline-block; | 转为行内块元素 |
| display:inline | 转为行内元素 |
| display:none | 将元素转为不可见，在文档流中不占位置 |
| display:float-root | 元素开启bfc |
将元素隐藏还有另一种方法，使用 visibility:hidden; 也可将元素隐藏，但元素不脱离文档流，不放弃自己的位置。
浮动与定位与BFC
开启浮动和绝对定位、固定定位都会使元素脱离文档流，只要脱离文档流的元素，就不分inline和block，脱离文档流的内容一律能设置宽高。脱离文档流后根据z-index属性堆叠排序。
z-index属性：值是一个没有单位的正整数，数字大的可以压盖数值小的。
文档流：html排版流程(flow)
浮动 float
浮动最初的功能：实现文字环绕图片。最本质的功能：实现盒子并排。
浮动使用要点：要浮动，并排的所有元素都要设置浮动，父盒子要有足够宽度，否则盒子会掉下去。
浮动的顺序贴靠特性：子盒子会按照元素书写顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素，有空间就可以钻空子。
如何开启浮动，元素添加：
float:left; 开启左浮动，元素序号从左边开始数。
float:right; 开启右浮动，元素序号从右边开始数。
使用浮动实现网页布局注意事项：
- 需要垂直排列的盒子，不要设置浮动，只有需要并排显示的盒子才要设置浮动。
- 一个浮动盒子的内部盒子还可以继续浮动。
- 要实现复杂浮动就不要节约盒子。
定位position
position定位，常见值：relative，absolute，fixed，sticky，static（默认）
static 默认值
默认值，静态的，定位跟随文档流排列的。可以认为是不开启定位。
relative 相对定位
position:relative;
开启后盒子相对自己原来的位置进行定位，开启后根据位置属性（left，right，top，bottom）偏移量进行位置调整，不脱离文档流，会在老家留坑。
absolute 绝对定位
position:absolute;
开启后，盒子会根据离自己最近的一个 开启定位的祖先元素 进行定位，开启后根据位置属性（left，right，top，bottom）偏移量调整位置，会脱离文档流，释放位置。
利用绝对定位实现盒子垂直居中：
div{
position:absolute;
top:50%;
left:50%;
margin-top: -自己高度的一半;
margin-left: -自己宽度的一半;
}
绝对定位用途：用来制作“压盖”、“遮罩”效果；用来结合css sprites实现精灵图使用；用来结合js实现动画（例如轮播图）
fixed 固定定位
position:fixed;
开启后，盒子会根据视口进行定位，不管页面如何滚动，它永远固定在那里（只有设定值才生效）。脱离文档流。
sticky 粘滞定位
position:sticky;
开启后，设定top,left等值，当盒子到达视口viewport那个位置后会随着视口移动。
清除浮动 clear
元素浮动后会脱离文档流，如果不清除浮动将会对布局产生影响。
clear属性：规定元素的哪一侧不受其他浮动元素影响，只有块元素能使用。
clear:both/left/right; 分别代表左右两边都不受，左边不受影响、右边不受影响。
清除浮动方法：
- 给后面的父盒子设置 clear:both;
- 在两个盒子之间添加一个带 clear:both; 的盒子
- 使用::after伪元素给盒子添加最后一个子元素，并添加 clear:both;
- 在浮动元素外套一个父盒子，并且父盒子形成BFC。
BFC
box formatting context ，块级格式化上下文。
开启后此盒子会变成页面上一个独立容器，容器里面的子元素不会影响外面的元素。里面的子元素也不会影响父元素及父元素以外的元素。
比如里面的子元素不能跑出父元素外面。比如解决margin塌陷（仅限父子塌陷）。比如父盒子不会受到子元素浮动造成的父盒子高度塌陷。比如开启BFC可以阻止被其他浮动元素覆盖。
如何开启（形成、创建）BFC
- 脱离文档流：开启浮动，float值不是none。或者开启position:absolute。
- display值设为inline-block、flex或者inline-flex或flow-root。
- 元素设置 overflow:hidden; （overflow:hidden 表示溢出盒子边框部分隐藏，padding溢出部分还在）
- 添加clearfix：
.clearfix::before,.clearfix::after{
content:'';
display:table;
clear:both;
}
可同时解决高度塌陷和父子外边距重叠。
圣杯布局
结构需要是：先center
<div class="contain">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
要点：给contain的三个元素开启float，然后footer开启clear。
contain开左右padding。
然后给center width100% ,开padding使得左右空出一段距离。
然后给left开启 margin-left:-100%; 利用的是“盒子width、height、margin、padding的百分数是按父盒子的content width百分比来算的”
然后在给left做position:relative,right:自身宽度使得往左移就完成了left的设置。
再给right做margin-right为负自己的长度，这个时候right就相当于放弃了自己的长度，且会往上移。
flex布局 display:flex
- 在flex诞生之前，一开始用的是table布局，后被淘汰，后使用 float 和 position 的搭配实现布局，但这两个属性并不是为布局而生的。flex是第一个真正意义上为布局而诞生的一套属性。
- flexible box ， 意为“灵活的、弹性的盒子”，所以flex布局一般也叫做“弹性布局”。
- 通过
display:flex;或display: inline-flex;开启弹性布局。
display: flex;
//或
display: inline-flex;
- flex 是设置盒子为块元素弹性盒（独占一行）， inline-flex 是设置盒子为行内块元素弹性盒（宽高由内容撑开）
- 开启 flex 后所有 直接子元素（flex项）强制变为行内块元素，所有属性自动带上 inline ，就算是 flex 也是。
flex 构成内容
- flex 由 flex容器（flex container） 和 flex项（flex item）构成。
flex容器：开启了弹性布局的元素。
flex项：flex容器内所有直接子元素自动成为 flex 项。
- 默认横向是主轴main axis，竖向是交叉轴cross axis（副轴）。
- flex 项默认会自动按主轴方向排列。
flex 容器属性
flex-direction 属性
- flex-direction 属性设定主轴的方向（即flex项的排列方向）
| 属性值 | 意义 |
|---|---|
| row | 默认值，主轴为横向，方向从左往右 |
| row-reverse | 主轴为横向，方向从右往左 |
| column | 主轴为竖向，方向从上往下 |
| column-reverse | 主轴为竖向，方向从下往上 |
flex-wrap 属性
- flex-wrap属性定义如果主轴线排不下所有内容如何换行。
| 属性值 | 意义 |
|---|---|
| nowrap | 默认值，不换行，如果flex项总长度比flex容器大，flex项的主轴方向长度不生效，强制收缩 |
| wrap | 换行，如果flex项总长度比flex容器大，flex项主轴长度属性不受任何影响 |
| wrap-reverse | 换行，第一行在最下方，flex项排列方向同主轴向 |
flex-flow 属性
- flex-direction 和 flex-wrap 的组合简写属性，默认值 row nowrap
align-items 属性
- 多行或列flex项在副轴上，align-content默认值是stretch，每一个flex项都是在 等分线 上开始的。
- align-items 属性定义多行或列flex项，有等分线存在的情况下，如何进行副轴上的排列
| 属性值 | 意义 |
|---|---|
| stretch | 默认值，意为有弹性的，如果flex项未设置在副轴上的长度，则自动拉伸占满整个容器的副轴长度 |
| flex-start | 按副轴等分线开始端对齐 |
| flex-end | 按副轴等分线结束端对齐 |
| center | 副轴上等分线与等分线之间居中对齐 |
justify-content 属性
- justify-content 属性定义 flex项在主轴上的对齐排列方式
| 属性值 | 意义 |
|---|---|
| flex-start | 默认值，按主轴开始端对齐 |
| flex-end | 按主轴结束端对齐 |
| center | 主轴上居中对齐 |
| space-between | 两端对齐，flex项之间的space都相等，start和end 与项之间无space |
| space-around | 每个项与正轴平分线两侧的间隔相等 |
| space-evenly | 所有space平均分，start与项，项与项，项与end之间的space都相等 |
align-content 属性
- align-content 属性定义 flex项在副轴上的对齐方式，默认值是stretch，更改此属性值后将无视副轴等分线，所以只有一行时无法使用此属性的center。
| 属性值 | 意义 |
|---|---|
| stretch | 如果flex项未设置在副轴方向上的长度，则自动拉伸占满容器的副轴长度 |
| flex-start | 按副轴开始端对齐 |
| flex-end | 按副轴结束端对齐 |
| center | 副轴上多行项无视副轴等分线然后一起居中对齐 |
| space-between | 两端对齐，flex项之间的space都相等，start和end 与项之间无space |
| space-around | 每个项两侧的间隔相等 |
| space-evenly | 所有space平均分，start与项，项与项，项与end之间的space都相等 |
flex项 的属性
- 改变了默认值即为开启某项属性
flex-grow 属性
- 默认值为0，可设定为其他正整数。
- 开启此属性的 flex项 会按设定的数值比例占据 space 。只开启部分，没开启的则不占space。
- 例如：如果所有 flex项的 flex-grow 都为1，着他们将会等分剩余space。如果只开启一个项的 flex-grow，则这个项不论设为多少都独占所有space。
- 开启此属性后将无视flex项在正轴方向上的长度以及 flex-basis
flex-shrink 属性
- 默认值为1，可设定为其他正整数。
- 开启此属性的 flex项 会按设定的数值比例占据超出的 space；默认值为1即如果flex容器空间不足，所有同级flex项默认一起等比缩小。
- 如果设置为0，则不缩小，负值无效。通常就是用来设为0。
flex-basis 属性
- 默认值为auto，可设定为其他长度，例如像素长度或百分长度。
- 开启此属性的 flex项 即定义在分配 space 之前，flex项占据的主轴方向上的长度。
- 当一个元素同时设置了 flex-basis 和主轴方向上的宽或高，flex-basis 优先级更高。
flex 属性
是 flex-grow，flex-shrink，flex-basis的复合简写，默认值 0 1 auto
order 属性
定义flex项在flex容器中排列的序号，默认值为0，数值越小，排列越靠前。
align-self 属性
允许开启了此属性的 flex项与其他项有不一样的对齐方式，会覆盖align-item属性。
默认值为auto，表示继承父元素的align-items属性值，如果没有父元素，则等同于stretch。
grid 布局
- grid意为网格、方格的意思，所以grid布局一般称为“网格布局”
- 通过
display: grid;或display: inline-grid;可以开启网格布局。 - 成为了grid容器的盒子，column、float、clear、vertical-align 属性无效，且容器内的直接子元素强制成为 grid 项。
grid构成内容
- grid容器（grid container）、grid项（grid item）、grid line 网格线，grid track 网格轨道、grid cell 网格单元、grid area 网格区域。
新的单位
fr单位：fraction的缩写，意为“片段”，剩余空间的分配数。
gr单位：网格数（没有被w3c采纳）
grid容器属性
grid-template-rows 和 grid-template-columns
- grid-template-rows 是设定每个rows轨道的大小以及网格线名字。
- grid-template-columns 是设定每个columns轨道的大小以及网格线名字。
grid-template-rows: [first] 100px [line2] 200px [line3];
grid-template-columns: repeat(5,1fr);
属性值是：
- 轨道大小track-size：可以使用css长度，百分比，fr单位数值，auto，repeat() 函数等。
- 网格线名字line-name：网格线名字可以用中括号里写名字为网格项命名，一条线可以写多个名字，用空格隔开，如果没命名，系统会默认加上数字以及 区域-star，区域-end 的命名。
- 如果grid-template-columns只有一个值，那就只有一列，这列的宽度就是这个值，这列就只有一个grid项，其余grid项会根据grid-auto-flow的默认值强制多行排布。
- 如果grid-template-rows只有一个值，那就只设置第一行的轨道大小，其余都是auto。
grid-template-areas 属性
- 设定网格区域命名，如果不为区域命名，可以用none。
- 每一行的区域命名，用算双引号引起来。每一行的区域数都要一样，否则该属性不生效。
- 可以用点 . 代表未命名的区域。
- 每个区域必须是矩形，不可十字形，Z字型等。
grid-template 属性
template 是 模板、样板 的意思。
grid-template 是 grid-template-rows 和 grid-template-columns 和grid-template-areas 的复合简写属性。
不推荐使用，可读性差，难维护。
grid-gap（后已改为gap）
gap: 10px 20px;
- 该属性是 grid-row-gap 和 grid-column-gap 的复合简写属性。
- 第一个值是 grid-row-gap 第二个值是 grid-column-gap。
- 如果只写一个值，这这个值同时代表 grid-row-gap 和 grid-column-gap。
grid-row-gap 和 grid-column-gap
grid-row-gap: 10px ;
- gap 是空隙的意思，这两个属性可以设定网格与网格之间间隙的大小。
- 属性值为长度，例如10px。
- 只能设定一个值，该grid容器内这个方向所有的gap都是这个值。
grid-auto-flow 属性
设定如果grid项超出设定的column或row的轨道数，这些超出的grid项如何排布填充放置。
默认值为 row，还有 column、dense（不推荐使用）
grid-auto-rows 和 grid-auto-columns
设置 rows 和 columns 的隐式网格轨道大小。
grid 属性
是 grid-template 和 grid-auto-flow 和 grid-auto-rows 和 grid-auto-columns 的复合简写属性。
align-items 属性
设定 grid 项与每个grid区域的垂直方向对齐方式。
属性值：
- stretch：默认值，内容宽度占满整个网格区域空间。
- start：上端对齐。
- center：居中对齐。
- end：下端对齐。
justify-items 属性
设定 grid项与每个 grid区域的水平方向对齐方式。
属性值：
- stretch：默认值，内容宽度占满整个网格区域空间。
- start：左端对齐。
- center：居中对齐。
- end：右端对齐。
place-items 属性
align-items 与 justify-items 的复合简写属性，可以分别写两个只。
如果只写一个值则水平方向和垂直方向都一样。
例如 place-items:center; 即可实现垂直水平都居中。
align-content 和 justify-content
grid 也可以使用 align-content 和 justify-content 。items是内容与容器的对齐方式，content 是容器与父容器的对齐方式。
place-content 属性
place-content 属性是 align-content 和 justify-content 的复合简写属性。
align-content 默认值是 stretch，justify-content是 start。
其他知识：grid可用的css函数
- repeat(); 函数值1为重复的次数，函数值2为要重复的内容，例如
grid-template-row:repeat(7,1fr)
函数值1可以为整数，也可以是 auto-fill，auto-fit。auto-fill，auto-fit需配合minmax() 使用。
设定项与容器的大小可以自动计算 auto-fill 与 auto-fit 的值，两个差别是前者以项为准，后者以容器为准。 - fit-content(); 将给定大小夹紧为可用大小。
- minmax(); 定义了一个长度范围的闭区间，用法 minmax(最小值，最大值)。最小值最大值可以是长度，百分数，fr单位数，或者max-content、min-content、auto。
grid 项属性
grid-row 和 grid-column
- grid-row 是 grid-row-start 和 grid-row-end 的复合简写。
- grid-column 是 grid-column-start 和 grid-column-end 的复合简写。
- 属性值 start/end 用斜杠隔开。
grid-row: first / span 7 ;
grid-column: 1 / 5 ; //不推荐用数字，因为less等预处理会进行运算
grid-row-start 和 grid-row-end、grid-column-start 和 grid-column-end
-
grid-row-start 和 grid-row-end 使用上下网格线划定开始位置和结束位置以确定grid项在grid容器内的位置。
-
grid-column-start 和 grid-column-end 使用左右网格线划定开始位置和结束位置以确定grid项在grid容器内的位置。
-
属性值可以是：
- 网格线自有的数字编号。
- 网格线的名字。
- span+数字，意为跨越多少格，通常用start定义开始位置，然后end用span+数字定义跨越多少格。例如
grid-row-start:1; grid-row-end:span 3; - span+线名，意为跨越到名字相匹配的线上。
- auto
-
如果 start 和 end 超出设定的 grid-template-rows/colums ，则会创建隐式网格轨道。
-
网格项是可以重叠的，可以通过 z-index 控制堆叠顺序。
grid-area 属性
- 使用网格区域名字划定 grid 项所在的位置，用法
grid-area: 区域名字;这个区域名字不用加引号 - 或者使用四个方向的线段来划定：
grid-area: 上边开始/左边开始/下边结束/右边结束;
align-self 属性
设定 grid项 内的内容垂直方向的对齐方式。
属性值：
- stretch：默认值，内容宽度占满整个网格区域空间。
- start：上端对齐。
- center：居中对齐。
- end：下端对齐。
justify-self 属性
- stretch：默认值，内容宽度占满整个网格区域空间。
- start：左端对齐。
- center：居中对齐。
- end：右端对齐。
place-self 属性
align-self 与 justify-self 的复合简写属性，可以分别写两个值。
如果只写一个值则水平方向和垂直方向都一样。
例如 place-self:center; 即可实现垂直水平都居中。
grid 通常用法
先定模板，再把项放进模板。例如：
- 先定 grid-template-areas，定好模板名字。
- 然后 grid-template-rows/columns 定好模板轨道宽高。
- 再把 grid项 用 grid-area 划分区域名字。
CSS其他属性
常用文本样式：
color属性
设置文本内容前景色，值可以用单词、十六进制表示法、rgb表示法，rgba表示法
color: #fff;
color: red;
color: rgb(0,0,0);
color: rgba(0,0,0,.5);
font-size属性
设置文本字号，单位为px，em，rem
font-weight属性
设置文本字重（粗细），常见四种值（值为字体文件自带，如果没有就没有）：
| normal | 正常，与400等值 |
| bold | 加粗，与700等值 |
| light | 细体 |
| bolder | 更粗 |
font-style属性
设置字体斜体italic、倾斜oblique，默认值normal正常
font-family属性
用于设置字体，可以一次放几个，用逗号隔开。
拥有字体文件后，可以用@font-face定义字体，如下：
@font-face {
font-family:;
src: url();
}
font属性合写
font-style（和、或）font-weight + font-size/line-height + font-family;
text-decoration属性
设置文本下划线、删除线、顶线，默认值none没有
| underline | 下划线 |
| line-through | 删除线 |
| overline | 顶线 |
text-indent属性
定义首航文本内容缩进量，单位通常是em（字符宽度）
text-align属性
元素添加 text-align:center; 可实现元素内的#text文本水平居中
text-shadow属性
给#text文本添加文字阴影，属性值同box-shadow
line-height属性
用于定义行高，单位通常是px，也可以不写单位。不写单位表示字号的n倍，也可以写百分数。
单行高等于盒子高度，即可实现#text文本在盒子内垂直居中。
如果不考虑居中，从设计角度来看，文字行高定义150%-170%是最好的阅读体验。
letter-spacing 属性
字符间距
writing-mode 属性
文本方向，值vertical-rl：从右向左阅读；配合text-orientation:mixed; 属性，可以让文本保持竖直或倾斜。
list-style属性
list-style：<' list-style-type '> || <' list-style-position '> || <' list-style-image '>
可设置在文字内还是文字外 outside | inside 。可以放图片，设置url即可。
overflow属性
可分别设置overflowX和overflowY，默认值visible，hidden隐藏，scroll、auto滚动条
其他文本知识：
继承性：
文本相关属性普遍具有继承性，给祖先设置，后代会继承生效。
比如：font-开头的、text-开头的、line-开头的、color、list-开头的。
在继承情况下，选择器权重计算失效，采用“就近原则”。除非选中的是同一个标签再比权重
单行文本溢出容器用...代替写法：
.text-ellipsis{
white-space:no-wrap; //溢出不换行
overflow:hidden; //溢出隐藏
text-overflow:ellipsis; //...替代显示
}
单行文本溢出不能和flex布局搭配使用，解决方法是形成多层嵌套。
多行文本溢出用...代替写法
.multiline-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orent: vertical;
white-space: normal !important;
word-wrap: break-word;
}
仅webkit内核浏览器可用，-webkit-line-clamp是控制在多少行结尾用...代替。
使用多行文本溢出的容器不要设置高度。
其他盒子属性
outline属性
outline 为外边框线，外轮廓，该属性不影响盒子布局
属性值为：粗细，边框样式，颜色。
还有个 outline-offset 为以盒子中心为点的边框偏移量，负值就会变成内边框线。
可以使用修改 outline 属性修改input获取焦点时的外发光
column属性
column 多列排布，
属性值1列宽，属性值2多少列。如果只写属性值1，则铺满盒子宽度。
背景 background
背景颜色
background-color 属性：
属性值可用英文，十六进制，rgb（），rgba（），HSL（），HSLA（）。
padding区域是强制继承 content 区颜色的。
背景图片
background-image 属性：
属性值是路径url方式，可插入多张，用逗号隔开。
外联样式表找路径从css文件出发，内联样式表从html出发。
图片比盒子小会自动重复平铺，用 background-repeat 属性可设置平铺方式。
值no-repeat不平铺；repeat-x X轴平铺；repeat-y Y轴平铺；repeat 默认值，x、y都平铺。
背景尺寸
background-size属性：
值为宽度和高度，单位可以是数值，也可以是百分比，也可以auto，例如
div{
background-size: 100px 100% ; //宽度100px，高度100%
}
值为cover表示将背景图片智能改变尺寸撑满盒子。
值为contain表示将背景图片尺寸智能改变以容纳到盒子。
{background-size: cover ;}
常用，强制一图等比撑满无空隙，从左上角开始计算，溢出部分隐藏。
{ background-size: contain ; }
图片撑开，直至撑满最短边，空隙用重复填充，可用no-repeat。
背景裁切
background-clip属性：
| 值 | 意义 |
|---|---|
| border-box | 延伸至边框（默认值） |
| padding-box | 延申到内边距，配合border为dotted，dashed等可察觉 |
| context-box | 裁切至内容区 |
仅裁切，但不改变图片起源坐标，要设置起源用 background-origin 属性改变，值与上面一样，也是border-box、padding-box、context-box。
背景固定
background-attachment 属性：
要开启小盒子滚动和窗口滚动才可察觉。不常用。
| 值 | 效果 |
|---|---|
| fixed | 不滚，窗口滚动背景也不滚 |
| local | |
| scroll | 默认 |
背景图片定位
background-position 属性：
值可以为偏移量left、top、right、bottom 以及 center ；
实现背景居中满铺盒子，可用：
background-position: center center ;
background-size: cover ;
配合i、u、b标签开启position和background position可实现css sprite（css精灵图）
background 复合属性
值可以填写颜色 图片url 重复repeat 位置position 尺寸宽高；
背景覆盖性 ：
background > background-image > background-color
⚠从以上层级来看，渐变色不是 background-color 能用的，background能用，但不方便理解，套渐变尽量用background。
注意 从这里开始步入CSS3属性知识
注： 像渐变等这种CSS3新特性，旧浏览器需要添加私有性前缀，例如：
-webkit-、-moz-、-ms-、-o-
渐变
线性渐变值：linear-gradient( ); 函数
函数值：
第一个：方向，可 to x 或者 角度 45deg 。例如：
{ background: linear-gradient( to right ); }
或者
{ background: linear-gradient( 45deg ); }
第二个：开始色，第n个：结束、过渡色。例如：
{ background: linear-gradient( to right , red , blue , yellow); }
在颜色中间可用空格隔开写每个颜色的开始位置，例如：
{ background: linear-gradient( to right , red , blue 30% , yellow 70% ，green ); }
径向渐变（辐射渐变）：radial-gradient( ); 函数
函数值：第一个值为径向形状，也可以是两个颜色值。
尺寸：
| closest-side | 径向形状与盒子最近边相切 |
| farthest-side | 径向形状与盒子最远边相切 |
| closest-corner | 径向形状与盒子最近角相切 |
| farthest-corner | 径向形状与盒子最远角相切 |
形状：
circle 圆 ， ellipse 椭圆
高级CSS3
变形：transform 属性
附加属性：transform-origin 属性：改变变形原点位置。
transform属性只能设置一次，一次写多个值，多写后面的会把前面的覆盖。
斜切变形
属性值为 skew( ) 函数时，会进行斜切变形，参数为角度，例如：
{transform: skew( 10deg ,20deg );}
缩放变形
属性值为 scale( ) 、scaleX( ) 、scaleY( )函数时，会进行放大缩小变形。参数为数字，大于1放大，小于1缩放。可传入多个值，例如：
{transform: scale( .1 ，3);}
旋转变形
属性值为 rotate( ) 函数时。（默认z轴，也有 rotateX 和 rotateY ）参数为角度，单位为deg，角度为正数时，顺时针方向，负数逆时针，例如。
{transform: rotate(45deg) ;}
位移变形
属性值为 translate( ) 函数时，进行旋转变形，还有translateX( )，和translateY( ) ，参数为位移距离，与relative相似，transform-origin改变不了，位移变形同样可以应用与盒子垂直居中。
3D变形
rotateX 和 rotateY 函数。
3D旋转后可进行3D空间移动。例如：
{
transform: rotateX(50) translateX(100px) translateY(100px) ;
}
transform-style 属性
父元素进行3D转换时，子元素是否保留已经进行的3D转换。
| 值 | 说明 |
|---|---|
| preserve-3d | 开启保留 |
| flat | 默认值，不开启 |
perspective属性
用来给父盒子定义透视强度，值为距离舞台的距离。
CSS3 动态
过渡 transition属性
当样式发生改变的时候，自动添加补帧动画。
必要值：实现过渡的属性和过渡持续时间，例如：
{transition: width 2s ; }
可以定义多个过渡，用逗号隔开。
四要素（四个小属性）
| 属性名 | 说明 |
|---|---|
| transition-property | 哪些属性要过渡 |
| transition-duration | 过渡持续时间 |
| transition-timing-function | 过渡速率曲线 |
| transition-delay | 开始延迟时间 |
transition-property
属性值可写all，即所有属性都参与过度
transition-timing-fuction属性
过渡动画速率（缓动参数）
| 常见值 | 意义 |
|---|---|
| linear | 匀速 |
| ease | 缓动 |
| ease-in | 缓进 |
| ease-out | 缓出 |
| ease-in-out | 缓进出 |
| cubic-bezier( ) | 贝塞尔曲线函数 |
动画 animation
定义关键帧与时长后自动播放的动画，必要值：动画名和动画时间，例如：
{animation: anima 10s ; }
六要素（六个小属性）
| 属性名 | 意义 |
|---|---|
| animation-name | 动画的名字 |
| animation-duration | 动画时长 |
| animation-timing-function | 动画速率曲线 |
| animation-delay | 动画播放延迟 |
| animation-iteration-count | 动画循环次数 |
| animation-direction | 第2n次播放是否倒放 |
| animation-fill-mode | 当动画结束后元素保持什么状态 |
animation-name:
如何定义动画以及给动画命名，格式：
@keyframes 动画名字{
开始状态{ }
过渡状态{ }
结束状态{ }
}
也可以直接定义2帧（开始帧和结束帧），例如：
@keyframes animaName{
from{ }
to{ }
}
或者
@keyframes animaName{
0%{ }
100%{ }
}
也可以定义多帧动画，用百分数定义不同阶段的关键帧，例如：
@keyframes animaName{
0%{ }
10%{ }
35%{ }
90%{ }
100%{ }
}
animation-fill-mode
当值为none时
none为默认值，在动画执行前和动画执行后，对元素的样式不会产生影响。
从上图可以看到，值为none时，动画执行前和执行后的状态和无动画的状态是一致的，动画执行前和执行后对元素没有产生任何样式影响。动画执行后跳到无动画状态。
当值为forwards时
forwards当使用这个值时，告诉浏览器：动画结束后，元素的样式将设置为动画的最后一帧的样式。
从上图可以看出，值为forwards时，动画执行前的状态和无动画状态一致，但是动画执行后状态却不一样，查看动画效果，你会发现他的状态和动画最后一帧的状态相同。
当值为backwards时
从CSS样式可以看到，动画我们有设置延迟1s,为了便于观察动画执行前的状态。
backwards当使用这个值时，告诉浏览器：动画开始前，元素的样式将设置为动画的第一帧的样式。
从上图可以看出，值为backwards时，动画执行前的状态和无动画状态 不一致，可以看出，它的状态和动画第一帧相同，但是动画执行后状态却和无动画时的状态相同。
当值为both时
both当使用这个值时，告诉浏览器：同时使用forwards和backwards两个属性值的效果。
从上图可以看出，动画执行前是动画第一帧的效果，动画执行后是动画最后一帧的效果。
滤镜属性
- filter属性可以接滤镜函数
-
filter: blur();模糊，参数为像素单位的数值，数值越大越模糊 - 还有 contrast,grayscale,hue-rotatr,drop-shadow
calc() 函数
calc() 函数可以再声明属性值时执行一些计算，函数执行后返回计算后的值。，例如
width: calc(100%-77px);
可以进行加减乘除运算，且运算符号的两边必须加上空格
媒体查询 media query
@media screen and (min-width:1200px){}
//中括号里面的内容只对1200宽以上的窗口起作用
为什么需要媒体查询
一套样式不可能适应各种大小的屏幕，媒体查询可设定条件使得内容只在满足条件的情况下呈现内容。
常见媒体类型
| 名称 | 意义 |
|---|---|
| all | 默认值，所有媒体类型 |
| screen | 屏幕 |
| 打印页面 | |
| speech | 朗读器 |
如果使用默认值，可以同时省略 all 和 and ，必须同时，例如：
@media {}
媒体查询中的逻辑
| 呈现方式 | 意义 |
|---|---|
| and | 与 |
| , | 或 |
| not | 非 |
| only |
and 串联，not 取反，,或拆成并联，例如：
@media all and (min-width:900px) and (max-width:1920px){}
@media screen and (min-width:500px) , speech and (min-width:1000px){}
媒体属性
- 例如：min-width / max-width / width orientation:landscape/portrait
- 多数情况下使用带有 “min-”和“max-”前缀的，用于表达最小是多少最大是多少，避免了css的 < 和 > 符号冲突。
- 策略：从小大大用min，从大到小用max
移动端其他知识
nomrmalize.css
更好用的重置css默认样式方法，官网地址：
http://necolas.github.io/normalize.css/
点击一些标签高亮背景取消
-webkit-tap-highlight-color: transparent;
给按钮和输入框自定义样式
需要关掉apppearance。
-webkit-appearance: none;
禁用长安页面时的弹出菜单
img,a { -webkit-touch-callout: none; }
