表现CSS

动态伪类（锚点伪类、用户行为伪类）：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

UL元素状态伪类： IE9 以上才兼容

css3结构类

否定选择器:not(Element/Selecter)选择器匹配非指定元素/选择器的每个元素

::first-line 对元素的第一行文本进行格式化 ，只对块级元素起作用

::first-letter 向文本的首字母设置特殊样式，只能用于块级元素

::before 在元素的内容前面插入新内容，常用“content”配合使用

::after

在元素的 内容后面插入新的内容，必须搭配 content 使用。 

ELement：：selection

概念

用于设置在浏览器中选中文本后的背景与前景色

1.选择所有带有attribute属性元素

element[attribute]

2.选择所有使用attribute="value"的元素

element[attribute="value"]

3.选择attribute属性包含单词“value”的元素

element[attribute~="value"]（一般用于class类选择器 常用）

4.选择attribute属性值以“value”开头的所有元素

element[attribute^="value"]

5.选择attribute属性值以“value”结尾的所有元素

element[attribute$="value"]

6.选择attribute属性值包含"value"的所有元素

element[attribute*="value"]

（常用，只要包含"value"的都可以，例如<p class="twos"></p>，p[class*=s]{}也可以指定"twos"，这里是"value"=s，"value"不再是单词，可以是单词里面的一个字母）

7.选择attribute属性值为“value”或以“value-”开头的元素

element[attribute|="value"] （常用于js中id选择器）

border-box:背景被裁减到边框盒

padding-box:背景被裁剪到内边距框

content-box:背景被裁剪到内容框

transparent,透明

background-origin：content-box；背景图像相对于内容框来定位。

background-origin：padding-box；背景图片相对于内边距啦定位。

background-origin：border-box；背景图片相对于边框来定位。

cover：即将背景图片等比缩放以填满整个容器，做到不留白

contain：即将背景图片等比缩放至某一边紧贴容器边缘为止，要么宽度100%，要么高度100%,取决于图片大小

语法：

background：

1、color 颜色

2、position 位置

3、size 大小

4、repeat 重复与否

5、origin 定位

6、clip 区域

7、attachment 状态是否滚屏

8、image url

线性渐变-从上到下（默认）

background: linear-gradient(color-stop1,color-stop2,...);

.线性渐变-从左到右（direction方向：left/right）：

background: -webkit-linear-gradient(begin-direction,color-stop1,color-stop2,...);

background: -moz-linear-gradient(end-direction,color-stop1,color-stop2,...);

background: -o-linear-gradient(end-direction,color-stop1,color-stop2,...);

标准写法background: linear-gradient(to end-direction,color-stop1,color-stop2,...);

.线性渐变-对角（level 水平方向：left/right，vertical竖直方向：top/bottom）：

background: -webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...);

background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);

background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...);

标准写法background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,...);

线性渐变-使用角度（angle角度：left/right）：

background: linear-gradient(angle,color-stop1,color-stop2,...);

角度说明：0deg将创建一个从上到下的渐变，90deg将创建一个从左到右的渐变。

-颜色结点

语法

background：linear-gradient（color1 length percentage，color2 length percentage，...）;

用百分比控制颜色的结点

1.最后一个不写，默认100%；

2.第一个不写，默认0%；

重复线性渐变 repeating-linear-gradient(color length/percent,color)。就是不要写满100%

径向渐变-设置形状

background:radial-gradient(shape,color-stop1,color-stop2,...);

形状：circle,ellipse(,默认椭圆)

径向渐变-尺寸大小关键字

background:radial-gradient(size,color-stop1,color-stop2,...);

形状和尺寸不用逗号“，”隔开

关键字说明：

closest-side:最近边

farthest-side:最远边

closest-corner:最近角

farthest-corner:最远角

CSS 径向渐变--重复渐变（不要写满100%）

语法：

background：repeating-radial-gradient(color1 length | percentage,

color2 length | percentage,

---- IE浏览器渐变（IE6-IE8） ----

语法：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='startColor'，endColorstr='endColor'，GradientType=0)；

*startColor和endColor必须为十六进制

*GradientType为渐变类型，可以是0、1、2三种渐变

语法：

text-sgadow：h-shadow v-shadow blur color；

h-shadow：第一个属性值，表示水平阴影的位置，可以是负值

v-shadow：第二个属性值，表示垂直阴影的位置，可以是负值

blur：第三个属性值，表示模糊的距离，设置为负值时，没有模糊的效果

color：第四个属性值，表示阴影的颜色，也可以用rgba设置为透明颜色

word-break属性

规定自动换行的处理方法

word-break：normal  |  break-all  |  keep-all

word-wrap属性

text-align-last属性

规定如何对齐文本的最后一行

text-align-last：auto |   left | right | center | justify | start | end | initial | inherit

前提！！！text-overflow属性起作用需设置overflow：hidden

text-overflow属性

规定当文本溢出包含元素时发生时的事情

text-overflow：clip（溢出裁剪）|ellipsis（溢出显示省略号）|string（可自行设置显示效果，只有火狐兼容）；

@font-face的语法规则

网页嵌入特殊字体，网页加载的同时，也加载字体样式。

@font-face｛

font-family:<字体名称>

src：<字体路径>（可添加多个）

font-weight<字体粗细>(可选填)

font-style<字体样式>（可选填）

｝

css3 @font-face字体通用模板：

@font-face {

font-family: 'YourWebFontName';/* 给字体起的名字 */

src: url("YourWebFontName.eot");/* 兼容IE9以上的浏览器 */

src: url("YourWebFontName.eot?#iefix")format("embedded-opentype"),/* 兼容IE6-IE8浏览器 */

url("YourWebFontName.ttf")format("truetype"),/* 兼容手机端,Safari,Android,iOS*/

url("YourWebFontName.woff")format("woff"),/* 兼容所有浏览器 */

url("YourWebFontName.svg#YourWebFontName")format("svg");;/* 针对IOS开发 */

}

CSS3 Transform

CSS3 Transform

其实就是更改transform的中心点

矩阵书写：matrix() 是元素2D平面的移动变换，2D变换矩阵为3*3

matrix3d()是元素3D的移动变换，3D变换则是4*4的矩阵

transform：matrix（a,b,c,d,tx,ty); 注意书写方向是竖直方向

transform：matrix3d(sx,sy,sz,)等同于scale3d中的sx,sy,sz,其他没任何区别~~~~~

transform-style属性：

指定嵌套元素是怎样在三维空间中呈现。

perspective：number

观察视角与z平面的距离,透视效果

perspective：origin属性

默认值：perspective-origin :50% 50%;

观察的位置，类似主视图俯视图左视图切换视角

若值为bottom，表示从下往上看

center表示平视

若值为top，表示从上往下看

backface-visibility ： visible / hidden

指定元素背面面向客户时内容是否可见，默认为可见

语法

transition-property：none | all | property（具体名称）

参数说明：

none （没有属性改变）

all（所有属性改变），默认值

property（元素属性名）

--- CSS3过渡（transition）属性 ----（必须有的！过渡动画不可缺少的属性）

transition-duration（过渡时间）

属性：检索或设置对象过渡的持续时间。

语法：transition-duration: time;

参数说明：

time----->规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值是0s。

transition-timing-function属性

— 检索或设置对象中过渡额动画类型。

语法：

transition-timing-function：ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps-(<integer>[,[start | end ] ] >) | cubic-bezier（<number>,<number>,<number>,<number>）;

只能使用一个属性。

transition-delay（延迟）属性
属性：检索或设置对象延迟过渡的时间。

语法：transition-delay: time;

参数说明：

指定秒或毫秒数之前要等待切换开始，单位为秒（s）,默认值为0 

--- CSS3过渡（transition）属性简写 ----

transition属性：复合属性，检索或设置对象变换时的过渡。

语法：transition: property duration timing-function delay;

*语法顺序不能错

animation-name属性：检索或设置对象所应用的动画名称

语法：

animation-name：keyframename | none（默认）；

animation-duration

属性：检索或设置对象动画的持续时间。

语法：animation-duration: time;

参数说明：

time----->指定动画播放完成花费的时间。默认值为0，意味着没有动画效果。

animation-timing-function 动画过渡属性参数

1. linear 线性过渡

2. ease 平滑过渡

3. ease-in 由慢到快

4. ease-out 由快到慢

5. ease-in-out 由慢到快，再慢。

animation-delay

属性：检索或设置对象动画的延迟时间。

语法：animation-delay: time;

参数说明：

可选。定义动画开始前等待的时间，以秒或毫秒计算。默认值为0。

CSS3 动画循环次数

animation-iteration-count : infinite（无限）/ number ( 默认为1 )。

例子中动画10s后接着运行，而非每个循环完毕后，停顿两秒。

animation-direction属性

检索或设置动画在循环中是否反向运动。

语法：

animation-direction：normal | reverse | alternate | alternate-reverse | initial | inherit； 

animation-fill-mode属性

规定当动画不播放时（当动画完成或当动画有延迟为开始播放时），要应用到元素的样式。

语法：

animation-fill-mode：none | forwards | backwards | both | initial | inherit；

animation-play-state

属性：指定动画是否正在运行或已暂停。

语法：animation-play-state: paused丨running;

animation 整合写法 ：

1. 动画名称(name),

2. 持续时间(duration),

3.过渡方式(timing-function)

4. 动画延时(delay)

6. 动画反向运动(iteration-count )

7. 动画不播放时应用到的样式(direction )

8.动画 运行 或 暂停(fill-mode play-staye );

备注：name和duration必须有，如果里面有两个时间，第一个时间默认为duration，除name为第一个，其余属性不要求顺序

--- CSS3动画（will-change）原理 ----

怎么样让动画显示的更流畅：

1、position-fixed 代替 background-attachment

2、带图片的元素放在伪元素中

3、巧用will-change

-------------------------------------------------

目标：增强页面渲染性能

--- CSS3动画（will-change）应用 ----

will-change：

属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。

语法：will-chang: auto | scroll-position | contents | <custom-ident> | <animateable-feature>；

baseline （基线对齐）默认值

middle（中线对齐）

sub（上标）

super（下标）

top（行元素顶端对齐）

bottom（行元素底端对齐）

text-top（文字顶端对齐）

text-bottom（文字底端对齐）

长度 | 百分比 （+上移 -下移）

word-spacing：设置元素内单词之间间距，单词的判断以空格为准

letter-spacing：设置元素内字母之间间距

text-transform设置英文大小写。属性capitalize首字母大写，lowercase小写，uppercase大写，none无效果

text-decoration设置删除线。属性underline上划线 | overline下划线 | line-though贯穿线 | blink闪烁效果 none没有任何效果|

段落首行缩进：text-indent:，单位1em为1字符

font-size字体大小，一般最小为12px，默认为16px。1.5em就是父元素的1.5倍，larger就是比父元素大

font-family，字体类型，多个字体则用逗号隔开

font-weight，控制加粗的，norml和bold 和bolder和lighter更细，数值可以100-1000，400是normal。700是bold

font-style,italic倾斜，oblique倾斜，normal不倾斜

font-variant(字体变形):

normal;(默认)

small-caps;(将小写英文字母转换为小型的大写字母)

none不展示

display：block块元素，宽高有效

display：inline行内元素，宽高无效

display：inline-block行内块元素，宽高有效

：link未访问的链接

：hover鼠标悬停的时候

：active鼠标点击的时候

：visited访问过的链接

:link > :visited > :hover > :active

说明：

1.a:hover 必须置于 a:link和a:visited之后，才有效

2.a:active必须置于a:hover之后，才有效

3.伪类名称对大小写不敏感

多边定义

单边定义

设置元素边框颜色

border-color：颜色 | transparent

border-style：none｜solid实线｜dashed虚线｜dotted点状｜double双边｜等等

可以四个不同方面来表示（上、下、左、右）

表示：

1) border-[left | right | top | bottom]-width

2)border-[left | right | top | bottom]-color

3)border-[left | right | top | bottom]-style

宽度

width：长度值｜百分比｜auto

最大宽度

max-width：长度值｜百分比｜auto

最小宽度

min-width：长度值｜百分比｜auto

height：长度值｜百分比｜auto

max-height：长度值｜百分比｜auto

min-height：长度值｜百分比｜auto

1、块级元素

2.替换元素

浏览器根据其标签的元素与属性来判断显示的具体内容

<img>、<input>、<textarea>等

padding填充属性（内边距）

设置元素的内容与边框之间的距离（内边距或填充），分四个方向（上，右，下，左）

1.padding-top：长度值 | 百分比

2.padding-right：长度值 | 百分比

3.padding-bottom：长度值 | 百分比

4.padding-left：长度值 | 百分比

内边距属性缩写

1.padding：值1；

2.padding：值1 值2；（上下=值1，左右=值2）

3.padding：值1 值2 值3 （上=值1 左右=值2 下=值3）

4.padding：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4

设置元素与元素之间的距离（外边距），四个方向（上，右，下，左）

1.margin-top:长度值 | 百分比 | auto

2.margin-right:长度值 | 百分比 | auto

3.margin-botton:长度值 | 百分比 | auto

4.margin-left:长度值 | 百分比 | auto

外边距缩写

1.margin：值1；（四个方向都为值1）

2.margin：值1 值2；（上下=值1，左右=值2）

3.margin：值1 值2 值3 （上=值1 左右=值2 下=值3）

4.margin：值1 值2 值3 值4（上=值1 右=值2 下=值3 左=值4）

！！！！！！垂直方向，两个相邻元素都设置外边距，外边距会发生合并。合并后外边距高度=两个发生合并外边距的高度中最大值

inline

元素将显示为内联元素，元素前后没有换行符

block

元素将显示为块级元素，元素前后会带有换行符

inline-block

行内块元素，元素呈现为inline，具有块级相应特性

none

此元素不会被显示

行内元素之间的缝隙如何解决??????

1）标签之间不添加任何换行或空格

2）给它一个父元素，设置父元素的style：font-size:0px，并给子元素单独设置字体大小

背景图片重复：background-repeat 是设置背景图片的重复方式

repeat是默认的重复，全部重复；

no-repeat是不重复；

repeat-x是水平重复，repeat-y是垂直重复

-----背景图片定位-----

background-position：百分比|值 top|right|bottom|left|center

设置元素的背景图片的显示方式

background-attachment:scroll | fixed

clear:left左侧抗浮动，只影响自身，不影响其他相邻元素

clear:right右侧抗浮动，只影响自身，不影响其他相邻元素

clear:both 左右两侧抗浮动，只影响自身，不影响其他相邻元素

个人理解：用top、bottom、left、right控制它存在于窗口的哪里，父元素有overflow：scroll就会跟着窗口移动，总之就是有一个定位矩形控制它

定位：过元素的位置移动来改变出现在网页的相对位置

元素居中：left:50%; right:50%; margin-left:元素宽的一半(负值);margin-top:元素高的一半(负值);

给header设置了fixed定位以后，header会脱离文档流，banner会自动往上走，这样会导致header会浮在banner上面，覆盖banner的一部分。

这时可以给banner设置padding-top：Xpx（等于header的高度），来撑开父元素，让banner显示的时候看起来在header的下方。

【经典的列布局】1.三列布局固定2.三列布局自适应