CSS样式全面解析

background是背景颜色的缩写

如果要加背景图片的大小，方式是：颜色 图片 平铺方式 位置 / 背景图片大小

background-repeat平铺方式有:no-repeat(不平铺),repeat(平铺),repeat-x(X轴平铺),repeat-y(Y轴平铺)

linear-gradient()函数，用于设置背景的线性渐变，该函数的第一个参数值是渐变的方向，后面的参数值是渐变的颜色

background:linear-gradient(to left top,red,blue,green,purple)

radial-gradient()函数，用于设置背景的径向渐变，该函数不需要传渐变方向，直接传渐变的颜色，从中间向外渐变

background:radial-gradient(red,blue,green)

text-shadow文本阴影，属性值分别是：X轴偏移量 Y轴偏移量 阴影的模糊半径 阴影颜色

vertical-align样式，图片的对齐方式，可以设置图片两端文本相对于图片的对齐方式，属性值包括：top bottom middle

border的边框类型：solid(实线),double(双实线),dashed(虚线),dotted(点线)

outline:none;是去掉文本框的轮廓线

list-style:none;是去掉列表符号

text-decoration:none;是去掉下划线

margin:0 auto;是盒子居中显示

display属性：

块级元素：特点是独占一行，可以识别宽高属性。

行级元素：特点是按行显示，一行不够放，会自动换行，不识别宽高属性，它的实际大小还是由内容决定。

inline-block表示行内块元素，既有块级元素可以识别宽高的特点，也有行内元素在一行的特点

box-shadow盒子阴影，属性值分别是：X轴偏移量 Y轴偏移量 模糊半径 阴影颜色，

box-shadow: 10px 10px 5px blue;

第一个属性值设置为inset，表示内阴影

box-shadow: inset 0px 0px 30px blue;

border-radius是圆角边框

overflow属性用于设置溢出处理，属性值包括：visible(溢出部分显示，是默认值),hidden(溢出部分隐藏),scroll(溢出部分，通过滚动条查看),如果内容不溢出，还是会出现滚动条的区域,auto(自动，如果内容溢出，出现滚动条,没有溢出，不会出现滚动条区域)

overflow:hidden; white-space:nowrap; text-overflow:ellipsis;文本的溢出处理,三个缺一不可，overflow溢出部分隐藏，white-space属性设置空白处理，属性值nowrap，表示设置文本不换行，属性值pre,表示保留空格，text-overflow属性设置文本溢出处理，属性值ellipsis表示文本溢出部分显示...

display:-webkit-box;

overflow:hidden;text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;//子元素应该被水平或垂直排列

-webkit-line-clamp:3;//3行后显示省略号

多行文本溢出处理

position定位,static(不定位，是默认值),relative(相对定位),是相对于自己重新定位，通过top, bottom, left,right属性控制定位的偏移量,absolute(绝对定位),绝对定位是根据离它最近的父级定位元素进行定位,fixed(固定定位),就是根据浏览器的视口进行定位,z-index(元素属性定位),默认情况下，后面的元素会盖住前面的元素，通过z-index属性，可以修改定位元素的层叠顺序，值越小越靠下，值越大越靠上，可以为负数，默认值为0

opacity透明度，是设置整个元素的透明度，取值范围是：0-1,0是全透明，1是不透明

结构伪类选择器,:first-child(表示指定标签的一个):last-child(表示指定标签的最后一个):nth-child(n)(表示指定标签的第n个),odd表示所有奇数行,(也可以用2n-1)，even表示所有偶数行，(也可以用2n)

:first-child计算索引时，统计的是所有的子元素，:first-of-type计算索引时，只统计指定的子元素

iframe是内嵌框架，用于当前网页中，嵌入另一个完整的网页，通过src属性设置目标网页的地址，frameborder属性设置边框，属性值包括0和1,scrolling属性设置是否显示滚动条，属性值包括no和yes和auto

video标签用于播放视频，src属性设置视频路径,controls属性设置显示空间的按钮，autoplay属性设置自动播放，loop属性设置循环播放，可以通过source子标签，给video标签添加视频路径，该方式可以同时添加多个视频路径

audio是音频标签

transition过渡属性,css从一种状态变化到另一种状态的过程,transition四个属性(all:表示过渡全部，过度时间，等待时间，动作函数)，如果设置了两个时间，第一个是过渡时间，第二个是过渡等待时间。过渡时间的单位是秒(s)毫秒(ms)

transition-timing-function设置过渡的动作函数：属性值:ease(表示先快速后慢速),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速在减速)

animation动画,属性值没有顺序要求，如果同时设置动画时间和等待时间，第一个是动画时间，第二个是等待时间。animation-iteration-count设置动画的播放次数，infinite表示无限次，属性值也可以给具体的次数。animation-play-state表示播放的状态，默认值running(播放),paused(暂停)，animation-direction动画的方向，normal(正向),reverse(反向),alternate(正反方向重复运动)alternate-reverse(反正方向重复运动)，animation-fill-mode表示填充模式，就是动画结束后，元素回到什么位置，属性值包括：backwards(回到原点位置),forwards(停在结束位置),both(在开始动画出处等待，在动画结束处停止)

transform变形，scale()变形函数，设置元素缩放，translate()变形函数，传一个参数，表示X轴方向平移，传两个参数，第二个参数是Y轴方向平移，rotate()变形函数，设置元素旋转，deg(度数)，也可以是turn(圈)，正数是顺时针，负数是逆时针，skew()变形函数，设置元素倾斜，传一个参数，表示X轴方向倾斜度数，传两个参数，第二个参数是Y轴方向倾斜度数。

perspective，3D变形，属性设置浏览器的视距，就是告诉浏览器平移到眼睛的距离是多少，一般范围会控制在600px-1200px,

transform-style:preserve-3d;

transform:rotateY(45deg) rotateZ(-45deg);

animation:love 4s infinite alternate;

visibility属性设置元素的显示方式，属性值包括：hidden(隐藏),visible(显示)

backface-visibility属性设置元素的背面颜色

backface-visibility:hidden,表示背面隐藏

i 标签，专门用于定义字体标签

display属性，弹性盒子，设置元素的类型：none(不显示),inline(行内元素),block(块级元素),inline-block(行内块元素)

flex-direction属性，设置子元素的排列方式，属性值包括：row(横向),column(纵向),row-reverse(横向方向),column-reverse(纵向方向)

justify-content子元素对齐方式，主轴的排列方式，属性值包括：flex-start(开始处对齐),flex-end(结束处对齐),center(居中对齐),space-between(平均分布，开始和结束处顶格),space-around(平均分布，两边留有一半的间隔空间),space-evenly(平均分布，每个元素两端的间隔相等)

align-items辅轴的排列方式，flex-start(开始处对齐),flex-end(结束处对齐),center(居中对齐),baseline(首行文本的基线对齐),stretch(拉伸对齐)

注意：主轴不一定是横向，排列方式如果是横向，主轴就是横向，排列方式如果是纵向，主轴就是纵向

flex-wrap属性，设置弹性盒子内，子元素换行方式，属性值包括：nowrap(不换行),wrap(换行),wrap-reverse(反向换行)

align-content属性，设置子元素换行后，每行元素在辅轴上的对齐方式，属性值包括：flex-start(开始处对齐),flex-end(结束处对齐),center(居中对齐),space-between(平均分布，开始和结束处顶格),space-around(平均分布，两边留有一半的间隔空间),space-evenly(平均分布，每个元素两端的间隔相等)

总结：不换行，辅轴上的对齐方式用align-items,换行后，辅轴上的对齐方式用align-content,一旦设置了align-content,align-items属性就失效了

order属性，设置子元素的排列顺序，默认值是1，值越小越靠前，值越大越靠后

align-self属性用于设置弹性子元素自身在 辅轴 方向上的对齐方式

flex属性用于指定弹性子元素如何分配空间，.a为flex:5,.b为flex:1,表示剩余的空间，a占5份，b占1份