8.21笔记

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），浏览器根据此属性计算主轴是否有多余空间，