CSSF复习总结（2）

目录

一，定位

1，相对定位（relative）

2，绝对定位（absoult）

3，固定定位（fiexed）

4，粘性定位（sticky）

二，HTML5新增标签

三，CSS3新增选择器

1，css3属性选择器

2.css3结构伪类选择器

四，过渡

1，简介：CSS 过渡允许您在给定的时间内平滑地改变属性值。

2，属性 

---

一，定位

1，相对定位（relative）

1. 占空间、不脱离文档流的布局
2.  如果不设置定位坐标，则就在原来的位置；
3.  如果结合定位坐标，则是相对自身的距离；

2，绝对定位（absoult）

1. 占空间、不脱离文档流的布局
2. 当某个absolute定位元素的父元素具有position: relative/absolute/fixed时，定位元素都会依据父元素定位，而父元素没有position属性或者设置了默认属性（static）,那么会根据body来定位

3，固定定位（fiexed）

1. 不占空间、不随滚动条移动,相对于浏览器窗口进行定位，不占空间;
2. 如果不设置定位坐标，则就在原来的位置；如果结合定位坐标，就是相对于目标位置的距离；
3. 设置固定定位后，就一定是块元素

4，粘性定位（sticky）

是relative和fixed的混合，在屏幕范围内时，没有影响（relative），当要移除屏幕范围时，会变成fixed

1. 不脱离文档流，仍然保留元素原本在文档流中的位置，即在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效）；
2. 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可，必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素不能overflow:hidden或者overflow:auto属性。
4. 父元素的高度不能低于sticky元素的高度，sticky元素仅在其父元素内生效

二，HTML5新增标签

1、video，表示一段视频并提供播放的用户界面；

2、audio，表示音频；

3、canvas，表示位图区域；

4、source，表示为video和audio提供数据源；

5、svg，用于定义矢量图等等。

三，CSS3新增选择器

1，css3属性选择器

选择器	功能描述
E[attribute]	选取带有指定属性的元素
E[attribute=value]	选取带有指定属性和值的元素
E[attr^=“val”]	匹配属性attr的值以指定值"val"开头的每个元素
E[attr$=“val”]	匹配属性attr的值以指定值"val"结尾的元素
E[attr*=“val”]	匹配属性attr的值包含字符串"val"元素

2.css3结构伪类选择器

1、伪类选择器：CSS中已经定义好的选择器,不能随便取名           

      常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active

2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器

      CSS中有如下四种伪元素选择器：

1. first-line:为某个元素的第一行文字使用样式；
2. first-letter:为某个元素中的文字的首字母或第一个字使用样式；
3. before:在某个元素之前插入一些内容；
4. after: 在某个元素之后插入一些内容；

:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

四，过渡

1，简介：CSS 过渡允许您在给定的时间内平滑地改变属性值。

2，属性 

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。