CSS笔记

8.21

1.css的选择器补充

|--------------|---------------------|--------------------------------------------|
| 选择器 | 例子 | 例子描述 |
| [属性^=属性值] | a[href^="https"] | 选择a标签中其 href属性值以 "https" 开头的每个 元素。 |
| [属性=属性值\] | img\[src=".pdf"] | 选择img标签中其 src 属性以 ".pdf" 结尾的所有 元素。 |
| [属性*=属性值] | img[src*="abc"] | 选择img标签中其 src 属性中包含 "abc" 子串的每个 元素。 |
| [属性] | [target] | 选择带有 target 属性所有元素。 |
| [属性=属性值] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
| [属性~=属性值] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 |
| [属性|=属性值] | [class|=box] | 选择 class 属性值以 "box" 开头(后面如果有字符，必须为-)的所有元素。 |

2.css的伪类补充

|----------------------|-----------------------|-----------------------|
| 选择器 | 例子 | 例子描述 |
| :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 | 选择属于其父元素最后一个子元素每个元素。 |

3.背景渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义

内有几个属性值见下：

1.linear-gradient 线性渐变

2.radial-gradient 径向渐变

3.repeating-linear-gradient 重复的线性渐变

4.repeating-radial-gradient 重复的径向渐变

3.1.线性渐变

语法：

background: linear-gradient(direction[方向] / angle[角度], color-stop1[颜色], color-stop2[颜色], ...);

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

线性渐变大概分为五种效果

3.1.1效果一

添加默认渐变(默认情况下从上往下渐变)

<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>

效果展示

3.1.2.效果二

从左到右渐变 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>

效果展示

3.1.3.效果三

对角渐变效果

<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>

效果展示

3.1.4.效果四

使用角度渐变 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

deg参考下图

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

<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>

注意：在标准浏览器和谷歌浏览器下的不同效果 background:-webkit-linear-gradient(30deg,red ,green,blue); 和 background:linear-gradient(30deg,red ,green,blue);的效果是不一样的； 两个效果呈现互余的情况；如果想要两个效果一致，需要给正常浏览器下的效果改为 background:linear-gradient(60deg,red ,green,blue);

-webkit-和正常版本下的角度是互余关系

3.1.4.效果五

重复渐变

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>

3.2.径向渐变

语法格式如下：

background: radial-gradient(center, shape size, start-color, ..., last-color);

<style>
 #grad{
    width: 200px;
    height: 200px;
    background: -webkit-radial-gradient(red, yellow, blue); 
    /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, blue); 
    /*Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, blue); 
    /*Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, blue); 
    /*标准的语法 */
 }
</style>
<div id='grad'></div>

4.弹性盒子

原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式

注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

容器：采用 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 |

4.1.flex-direction

属性值：

1.row（默认值）：主轴为水平方向，起点在左端。

2.row-reverse：主轴为水平方向，起点在右端。

3.column：主轴为垂直方向，起点在上沿。

4.column-reverse：主轴为垂直方向，起点在下沿。

见下图所示：

4.2. flex-wrap

设置项目换行方式

默认情况下，项目都排在一条线(又称"轴线")上。 flex-wrap 属性设置如果一条轴线排不下，项目如何换行。

属性值：

1.warp nowrap （默认）：不换行,都在一行或者一列中显示

2.wrap：换行，第一行在上方。

3.wrap-reverse：伸缩项目无法容纳时，自动换行，方向和wrap相反,这个效果和使用float的效果是一样的。

具体展示如下：

4.3.flex-flow

主轴方向和换行方式的简写

默认值：row nowrap

4.4.justify-content

定义项目在主轴上的对齐方式

属性值:

1.flex-start（默认值）: 主轴起点对齐

2.flex-end：主轴终点对齐

3.center：居中

4.space-between：两端对齐，项目之间的间隔都相等。

5.space-around：每个项目两侧的间隔相等。所以，项目之间间隔比项目与边框间隔大一倍。

6.space-evenly：可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差。

图示如下

4.5.align-content

属性起作用（针对多行主轴）需要的三个条件

1.对父元素设置自由盒属性 display：flex

2.并且设置排列方式为横向排列 flex-direction：row（默认值）

3.设置换行 flex-wrap：warp

有六个属性值效果见下图：

1.stretch

2.flex-start

3.flex-end

4.center

5.space-around

6.space-between

4.6.align-items

项目在交叉轴上对齐方式（针对单个主轴）

1.flex-start：交叉轴的起点对齐。

2.flex-end：交叉轴的终点对齐。

3.center：交叉轴的中点对齐。

4.baseline: 项目的第一行文字的基线对齐。

5.stretch（默认值）：如果项目未设置高度或设为 auto，项目将占满整个容器的高度。

4.7.align-self

align-self 和align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致

4.8.flex

用来控制伸缩容器的比例分配，按比例分配

4.9.order

数值越小，排列越靠进主轴起点，默认为 0。

4.10.flex-grow（ 放大比例）/flex-shrink（缩小比例）

定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大。

flex布局发生在父容器和子容器之间。父容器需要有flex的环境(display:flex;)，子容器才能根据自身的属性来布局，简单的说，就是瓜分父容器的空间。相反就是说如果父容器没有flex的环境，那么子容器就无法使用flex的规则来划分父容器的空间。

示例：

<style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid #f00;
            display: flex;
        }
        .inner:nth-child(1){
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        .inner:nth-child(2){
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .inner:nth-child(3){
            width: 100px;
            height: 100px;
            background-color: blue;
        }
</style>
<div class="box">
        <div class="inner1">1</div>
        <div class="inner2">2</div>
        <div class="inner3">3</div>
</div>

释义

现在大盒子为500，每个inner的宽度为100px，默认情况下，200px的剩余空间是不会被占用的； flex-grow 的作用就是就是用来瓜分剩余空间的 我们假设box的width是500px，现在我们再假设inner1、inner2、inner3的width是100px，那么剩余空间就是500-100*3=200。 知道了剩余空间有什么用呢？这个时候flex-grow就该出场了，假如我们这个时候对inner1设置flex-grow:1，那么我们会发现，inner1把inner2和inner3都挤到右边了，也就是说剩余的200px空间都被inner1占据了，所以此时inner1的width比实际设置的值要大。