简介

CSS （cascading style sheet）层叠样式表

CSS书写方式

1. 内嵌式：在head标签中书写style标签。
2. 外链式：用link标签引入.ccs文件

<link rel="stylesheet" type="text/css" href=""/>

3. 行内式：直接写在标签的style属性上。
4. 导入式：在style标签内写@import url（）。

<style> 
    @import url(".css"); 
</style>

CSS基本语法

选择器{ 
    键:值; 
}

CSS注释

/*注释内容*/

CSS常用单位

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; 
}

复合选择器

伪类选择器

选择处于特殊状态下的元素，例如超链接a的4个特殊状态

遵从“绿哈”(LVHA)顺序写，否则会有伪类不生效。
link→visited→hover→active

以下为css3选择器，ie可能不兼容

元素关系选择器

序号选择器

: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新增伪类

伪元素

用双冒号书写

层叠性和选择器权重计算

层叠性： 多个选择器可以同时作用于同一个标签，效果叠加活覆盖。
层叠性冲突处理： 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

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属性：

常用值

将元素隐藏还有另一种方法，使用 visibility:hidden; 也可将元素隐藏，但元素不脱离文档流，不放弃自己的位置。

浮动与定位与BFC

开启浮动和绝对定位、固定定位都会使元素脱离文档流，只要脱离文档流的元素，就不分inline和block，脱离文档流的内容一律能设置宽高。脱离文档流后根据z-index属性堆叠排序。
z-index属性：值是一个没有单位的正整数，数字大的可以压盖数值小的。
文档流：html排版流程(flow)

浮动 float

浮动最初的功能：实现文字环绕图片。最本质的功能：实现盒子并排。
浮动使用要点：要浮动，并排的所有元素都要设置浮动，父盒子要有足够宽度，否则盒子会掉下去。
浮动的顺序贴靠特性：子盒子会按照元素书写顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素，有空间就可以钻空子。
如何开启浮动，元素添加：
float:left; 开启左浮动，元素序号从左边开始数。
float:right; 开启右浮动，元素序号从右边开始数。
使用浮动实现网页布局注意事项：

1. 需要垂直排列的盒子，不要设置浮动，只有需要并排显示的盒子才要设置浮动。
2. 一个浮动盒子的内部盒子还可以继续浮动。
3. 要实现复杂浮动就不要节约盒子。

定位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; 分别代表左右两边都不受，左边不受影响、右边不受影响。

清除浮动方法：

1. 给后面的父盒子设置 clear:both;
2. 在两个盒子之间添加一个带 clear:both; 的盒子
3. 使用::after伪元素给盒子添加最后一个子元素，并添加 clear:both;
4. 在浮动元素外套一个父盒子，并且父盒子形成BFC。

BFC

box formatting context ，块级格式化上下文。
开启后此盒子会变成页面上一个独立容器，容器里面的子元素不会影响外面的元素。里面的子元素也不会影响父元素及父元素以外的元素。
比如里面的子元素不能跑出父元素外面。比如解决margin塌陷（仅限父子塌陷）。比如父盒子不会受到子元素浮动造成的父盒子高度塌陷。比如开启BFC可以阻止被其他浮动元素覆盖。

如何开启（形成、创建）BFC

1. 脱离文档流：开启浮动，float值不是none。或者开启position:absolute。
2. display值设为inline-block、flex或者inline-flex或flow-root。
3. 元素设置 overflow:hidden; （overflow:hidden 表示溢出盒子边框部分隐藏，padding溢出部分还在）
4. 添加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项的排列方向）

flex-wrap 属性

• flex-wrap属性定义如果主轴线排不下所有内容如何换行。

flex-flow 属性

• flex-direction 和 flex-wrap 的组合简写属性，默认值 row nowrap

align-items 属性

• 多行或列flex项在副轴上，align-content默认值是stretch，每一个flex项都是在 等分线 上开始的。
• align-items 属性定义多行或列flex项，有等分线存在的情况下，如何进行副轴上的排列

justify-content 属性

• justify-content 属性定义 flex项在主轴上的对齐排列方式

align-content 属性

• align-content 属性定义 flex项在副轴上的对齐方式，默认值是stretch，更改此属性值后将无视副轴等分线，所以只有一行时无法使用此属性的center。

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);

属性值是：

1. 轨道大小track-size：可以使用css长度，百分比，fr单位数值，auto，repeat() 函数等。
2. 网格线名字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区域的垂直方向对齐方式。
属性值：

1. stretch：默认值，内容宽度占满整个网格区域空间。
2. start：上端对齐。
3. center：居中对齐。
4. end：下端对齐。

justify-items 属性

设定 grid项与每个 grid区域的水平方向对齐方式。
属性值：

1. stretch：默认值，内容宽度占满整个网格区域空间。
2. start：左端对齐。
3. center：居中对齐。
4. 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函数

1. repeat(); 函数值1为重复的次数，函数值2为要重复的内容，例如 grid-template-row:repeat(7,1fr)
   函数值1可以为整数，也可以是 auto-fill，auto-fit。auto-fill，auto-fit需配合minmax() 使用。
   设定项与容器的大小可以自动计算 auto-fill 与 auto-fit 的值，两个差别是前者以项为准，后者以容器为准。
2. fit-content(); 将给定大小夹紧为可用大小。
3. 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容器内的位置。

• 属性值可以是：

• 1. 网格线自有的数字编号。
  2. 网格线的名字。
  3. span+数字，意为跨越多少格，通常用start定义开始位置，然后end用span+数字定义跨越多少格。例如 grid-row-start:1; grid-row-end:span 3;
  4. span+线名，意为跨越到名字相匹配的线上。
  5. auto

• 如果 start 和 end 超出设定的 grid-template-rows/colums ，则会创建隐式网格轨道。

• 网格项是可以重叠的，可以通过 z-index 控制堆叠顺序。

grid-area 属性

• 使用网格区域名字划定 grid 项所在的位置，用法 grid-area: 区域名字;这个区域名字不用加引号
• 或者使用四个方向的线段来划定：
  grid-area: 上边开始/左边开始/下边结束/右边结束;

align-self 属性

设定 grid项 内的内容垂直方向的对齐方式。
属性值：

1. stretch：默认值，内容宽度占满整个网格区域空间。
2. start：上端对齐。
3. center：居中对齐。
4. end：下端对齐。

justify-self 属性

1. stretch：默认值，内容宽度占满整个网格区域空间。
2. start：左端对齐。
3. center：居中对齐。
4. end：右端对齐。

place-self 属性

align-self 与 justify-self 的复合简写属性，可以分别写两个值。
如果只写一个值则水平方向和垂直方向都一样。
例如 place-self:center; 即可实现垂直水平都居中。

grid 通常用法

先定模板，再把项放进模板。例如：

1. 先定 grid-template-areas，定好模板名字。
2. 然后 grid-template-rows/columns 定好模板轨道宽高。
3. 再把 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属性

设置文本字重（粗细），常见四种值（值为字体文件自带，如果没有就没有）：

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没有

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属性：

仅裁切，但不改变图片起源坐标，要设置起源用 background-origin 属性改变，值与上面一样，也是border-box、padding-box、context-box。

背景固定

background-attachment 属性：
要开启小盒子滚动和窗口滚动才可察觉。不常用。

背景图片定位

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( ); 函数

函数值：第一个值为径向形状，也可以是两个颜色值。
尺寸：

形状：
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转换。

perspective属性

用来给父盒子定义透视强度，值为距离舞台的距离。

CSS3 动态

过渡 transition属性

当样式发生改变的时候，自动添加补帧动画。
必要值：实现过渡的属性和过渡持续时间，例如：

{transition: width 2s ; }

可以定义多个过渡，用逗号隔开。

四要素（四个小属性）

transition-property

属性值可写all，即所有属性都参与过度

transition-timing-fuction属性

过渡动画速率（缓动参数）

动画 animation

定义关键帧与时长后自动播放的动画，必要值：动画名和动画时间，例如：

{animation: anima 10s ; }

六要素（六个小属性）

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 和 and ，必须同时，例如：

@media {}

媒体查询中的逻辑

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; }