css3新增选择器:
****选择器 | ****例子 | ****例子描述 |
.class | .intro | 选择 class="intro" 的所有元素。 |
#id | #firstname | 选择 id="firstname" 的所有元素。 |
* | * | 选择所有元素。 |
element | p | 选择所有元素 |
element,element | div,p | 选择元素 |
element element | div p | 选择后代元素 |
element>element | div>p | 选择子元素 |
element+element | div+p | 选择相邻兄弟。 |
[attribute] | [target] | 选择带有 target 属性所有元素。 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 (class=”flower red”) (title= ”flower red”) 不能使用了 |
[attribute|=value] | [class|=box] | 选择 class 属性值以 “box” 开头(后面如果有字符,必须为-)的所有元素。 |
:link (:开头--伪类选择器) | a:link | 选择所有未被访问的链接。 |
:visited | a:visited | 选择所有已被访问的链接。 |
:active | a:active | 选择活动链接。 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 |
:focus | input:focus | 选择获得焦点的 input 元素。(IE8及以上才支持) |
:first-letter | p:first-letter | 选择每个元素的首字母。 |
:first-line | p:first-line | 选择每个元素的首行。(加边框不行,字号可以) |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个元素。 |
:before (伪元素) | p:before | 在每个元素的内容之前插入内容。 |
:after(伪元素) | p:after | 在每个元素的内容之后插入内容。 |
选择器 | 例子 | 例子描述 |
element1~element2 | p~ul | 选择前面有元素(同胞,可以不相邻)的每个 |
[attribute^=value] | a[href^="https"] | 选择其 href属性值以 "https" 开头的每个 元素。 |
[attribute$=value] | img[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素。 |
[attribute*=value] | img[src *="abc"]img[src *="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素。 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个元素的每个元素。 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后元素的每个元素。 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的元素的每个元素。 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个元素。 |
:nth-child(n) | p:nth-child(2n+1) | 选择属于其父元素的第二个子元素的每个元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个元素的每个元素。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个元素。 |
背景操作:
1.线性渐变:
语法:background: linear-gradient(direction[方向] / angle[角度], color-stop1[颜色], color-stop2[颜色], ...);
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。
效果一:添加默认渐变(默认情况下从上往下渐变)
<style>
div{
width: 300px;
height: 100px;
}
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /*Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /*标准的语法 */
}
</style>
<div id='grad'></div>
效果二:从左到右渐变 to right 表示向哪个方向渐变 left 表示从左边开始渐变
<style>
div{
width: 300px;
height: 100px;
}
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /*Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /*Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /*标准的语法 */
}
</style>
<div id='grad'></div>
效果三:对角渐变效果
<style>
div{
width: 300px;
height: 100px;
}
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /*Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /*Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /*标准的语法 */
}
</style>
<div id='grad'></div>
效果四:使用角度渐变 角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变
<style>
div{
width: 300px;
height: 100px;
}
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /*Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /*Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /*标准的语法 */
}
</style>
<div id='grad'></div>
效果五:重复渐变
repeating-linear-gradient() 函数用于重复线性渐变:
<style>
#grad {
width: 200px;
height: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/*Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/*Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/*标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>
<div id='grad'></div>
flex弹性盒子
容器: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器
项目 容器的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目“
容器属性(6 个): | 项目属性(6个) |
flex-direction 主轴方向 | order |
flex-wrap 主轴换行方式 | flex-grow |
flex-flow 符合形式 | flex-shrink |
justify-content 主轴对齐方式 | flex-basis |
align-items 交叉轴对齐方式 | flex |
align-content 多根主轴对齐方式 | align-self |
display:flex 表示给当前元素添加弹性盒子
flex-direction 决定主轴方向(即项目排列方向)
属性值: row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap 设置项目换行方式[使用的多]
语法:flex-warp:warp nowrap (默认):不换行,都在一行或者一列中显示 wrap:换行,第一行在上方。 wrap-reverse:伸缩项目无法容纳时,自动换行,方向和wrap相反,这个效果和使用float的效果是一样的。
flex-flow 主轴方向和换行方式的简写
语法:flex-flow:row nowarp 默认值:row nowrap
justify-content 定义项目在主轴上的对齐方式【使用的多】
语法:justify-content:center
属性值: 语法:justify-content:center
属性值: flex-start(默认值):flex-start(默认值): 主轴起点对齐 主轴起点对齐 flex-end:flex-end: 主轴终点对齐 主轴终点对齐 center:center: 居中 居中 space-between:space-between: 两端对齐,项目之间的间隔都相等。 两端对齐,项目之间的间隔都相等。
space-around:space-around: 每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍。 每个项目两侧的间隔相等。所以,项目之间间隔比项目与边框间隔大一倍
space-evenly: 可以使每个元素之间和元素距离边距的距离都相等,但是兼容性比较差。
align-content属性起作用的条件【针对多行主轴】
对父元素设置自由盒属性display:flex;
并且设置排列方式为横向排列flex-direction:row;
(默认值)
设置换行,flex-wrap:wrap;
align-items 项目在交叉轴上对齐方式【针对单个主轴】
语法:align-items:flex-end 属性值:
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为 auto,项目将占满整个容器的高度。
flex-grow 放大比例 / flex-shrink 缩小比例
定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大。
flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;),子容器才能根据自身的属性来布局,简单的说,就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境,那么子容器就无法使用flex的规则来划分父容器的空间。
:flex:0 1 auto 是什么意思
flex:是flex-grow,flex-shrink和flex-basis的简写 flex-grow:定义项目的的放大比例; flex-shrink:定义项目的缩小比例; flex-basis: 定义在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间,