CSS

作者: Zindex | 来源:发表于2021-10-08 16:28 被阅读0次

简介

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容器内的位置。
属性值可以是：
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项内的内容垂直方向的对齐方式。
属性值：

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	屏幕
print	打印页面
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; }

CSS

简介

CSS书写方式

CSS基本语法

CSS注释

CSS常用单位

CSS选择器 CSS Selector

标签选择器（Tag selector）

类选择器（Class selector）

id选择器（ID selector）

复合选择器

伪类选择器

元素关系选择器

序号选择器

属性选择器

CSS3新增伪类

伪元素

层叠性和选择器权重计算

CSS元素分级：

行元素：

块元素：

行内块元素：

盒模型

content

padding

border

border-radius

border-image

margin

box-sizing属性

box-shadow属性

block属性和inline属性的盒子：

display属性：

浮动与定位与BFC

浮动 float

定位position

static 默认值

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘滞定位

清除浮动 clear

清除浮动方法：

BFC

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

圣杯布局

flex布局 display:flex

flex 构成内容

flex 容器属性

flex-direction 属性

flex-wrap 属性

flex-flow 属性

align-items 属性

justify-content 属性

align-content 属性

flex项 的属性

flex-grow 属性

flex-shrink 属性

flex-basis 属性

flex 属性

order 属性

align-self 属性

grid 布局

grid构成内容

新的单位

grid容器属性

grid-template-rows 和 grid-template-columns

grid-template-areas 属性

grid-template 属性

grid-gap（后已改为gap）

grid-row-gap 和 grid-column-gap

grid-auto-flow 属性

grid-auto-rows 和 grid-auto-columns

grid 属性

align-items 属性

justify-items 属性

place-items 属性

align-content 和 justify-content

place-content 属性

其他知识：grid可用的css函数

flex项的属性

注意从这里开始步入CSS3属性知识