CSS3选择器

文档手册语法：

[] 表示可选项
|| 表示或者
| 表示多选一
？表示0个或者1个
* 表示0个或多个
{} 表示范围

padding: [ || ]

border: | |

box-shadow: none || [,shadow]*

1.1 选择器

1.1.1 属性选择器

E[attr]

查找指定的拥有attr属性的E标签。如查找拥有id属性的p标签

p[id] {
   color: red;
}

<p></p>
<p id=""></p>

E[attr=value]

查找指定的拥有attr属性且值为value的E标签。如查找拥有id属性且值为box的p标签

p[id=box] {
   color: red;
}

<p></p>
<p id="box"></p>

E[attr^=value]

查找指定的拥有attr属性且值以value开头的E标签。

p[class^="test"]{ background: blue;}		//选中第一个p

<p class="testt">1</p>
<p class="ttest">2</p>
<p class="ttestt">3</p>

E[attr$=value]

查找指定的拥有attr属性且值以value结束的E标签。

p[class$="test"]{ background: deeppink;}	//选中第二个p

<p class="testt">1</p>
<p class="ttest">2</p>
<p class="ttestt">3</p>

E[attr*=value]

查找指定的拥有attr属性且值包含value的E标签。

p[class*="test"]{ background: yellow;}	//选中第二个和三个p

<p class="testt">1</p>
<p class="ttest test">2</p>
<p class="ttestt">3</p>

1.1.2 伪类新增

A+B

选中A元素紧邻的B元素。例如，以下代码选中first紧邻的一个li元素

.first+li{
	color: red;
}

<ul>
   <li class="first"></li>
   <li></li>
   <li></li>
</ul>

A~B

获取A相邻的所有相邻元素B。例如，以下代码选中除了first外的所有li元素。

.first~li{
	color: red;
}

<ul>
   <li class="first"></li>
   <li></li>
   <li></li>
</ul>

p:first-of-type

选择p，p必须为他们各自父级元素所有为p的子元素的第一个p，如下，选中p1。

p:nth-of-type(1){
  color: red;
}

<div class="box">
  <div></div>
  <p>我是p1</p>
  <p>我是p2</p>
  <p>我是p3</p>
</div>

p:last-of-type

选择p，p必须为他们各自父级元素所有为p的子元素的最后一个p，如下，选中p3。

p:last-of-type(1){
  color: red;
}

<div class="box">
  <div></div>
  <p>我是p1</p>
  <p>我是p2</p>
  <p>我是p3</p>
  <div></div>
</div>

p:nth-of-type(n)

选择p，p必须为他们各自父级元素所有为p的子元素的序列，如下，选中p2。

p:nth-of-type(2){
  color: red;
}

<div class="box">
  <div></div>
  <p>我是p1</p>
  <p>我是p2</p>
  <p>我是p3</p>
  <div></div>
</div>

p:nth-last-of-type(n)

选择p，p必须为他们各自父级元素所有为p的子元素的倒数序列，如下，选中p3。

p:nth-last-of-type(1){
  color: red;
}

<div class="box">
  <div></div>
  <p>我是p1</p>
  <p>我是p2</p>
  <p>我是p3</p>
  <div></div>
</div>

p:only-child

选择p，p必须为他们各自父级元素唯一一个子元素。

p:only-child{
  color: red;
}

<div class="box">
  <p>我是唯一一个p</p>
</div>

p:last-child

选择p，p必须为他们各自父级元素的最后一个子元素。

p:last-child{
  color: red;
}

<div class="box">
   <div></div>
   <p></p>
</div>

p:nth-child(n)

选择p，p必须为他们各自父级元素的第n个子元素。例如，以下选中p1。

p:nth-child(2){
  color: red;
}

<div class="box">
   <div></div>
   <p>p1</p>
</div>

p:nth-last-child(n)

选择p，p必须为他们各自父级元素的倒数第n个子元素。例如，以下选中p1。

p:nth-last-child(2){
  color: red;
}

<div class="box">
   <div></div>
   <p>p1</p>
   <p>p2</p>
</div>

p:not(element)

选择p，p不能为element，element为类和id选择器。例如，以下选中p1。

p:not(.c1){
  color: red;
}

<div class="box">
   <p class="c1">1</p>
   <p>2</p>
   <p class="b1">3</p>
</div>

p:empty

选择没有内容的p。例如，以下选中第二个p

p:empty{ background: blue; }

<div class="box">
   <p>1</p>
   <p></p>
   <p>3</p>
</div>

p:target

选择当前被锚点激活的p。以下代码，当p锚点被激活时背景变为绿色。

.box p:target{ background: green; }

<div class="box">
   <a href="#tu">点我试试1</a>
   <p id="tu">1</p>
   <a href="#tuu">点我试试2</a>
   <p id="tuu">2</p>
</div>

p::selection

被用户选中p的文本时。以下，当用户选中文本是背景变为粉红色。

p::selection{ background: deeppink; }

p::first-letter

选中p标签中文本的第一个字，可以用来设置首字下层

p::first-letter{
  color: red;
  font-size: 30px;
  float: left; /* 文本环绕 */
}

p::first-line

选中p标签中文本的第一行字。设置了first-letter的首字不会被选中。

p::first-line{
   text-decoration: underline;
}

input:disabled

选择不能被操作的input框

input:enabled

选择能被操作的input框

input:checked

选择被选中的input

1.2 背景属性

1.2.1 hsl 调色板

H：Hue(色调)。取值为：0 – 360；(120绿，240蓝，360或0红)
S：Saturation(饱和度)。取值为：0.0% - 100.0%；
L：Lightness(亮度)。取值为：0.0% - 100.0%。默认50%

hsl( 颜色(0~~360), 饱和度(0~~100%), 亮度(0~100%) )

p{
   width: 100px;
   height: 100px;
   background: hsl(240,50%,50%)
}

a透明度

hsl( 颜色(0~~360), 饱和度(0~~100%), 亮度(0~~100%), 透明度(0~~1) )

p{
   width: 100px;
   height: 100px;
   background: hsla(240,50%,50%, 0.5)
}

1.2.2 线性渐变 linear-gradient()

渐变方向：left、right、top、bottom可单独，也可两两组合，注意，没有center。默认为从上到下。

p{ 
   background: -webkit-linear-gradient(left,deeppink,yellow,#153170);
}

使用百分比的时候表示：从10%以前都是粉红色的没有渐变，而10%-60%就会和黄色搭配产生渐变，60%以后就是黄色域蓝色搭配产生渐变。

p{ 
   background: -webkit-linear-gradient(left,deeppink 10%,yellow 60%,#153170);
}

注意：产生的是图片，所以只能使用background

1.2.3 径向渐变 radial-gradient()

at position(渐变方向)：right、left、top、bottom两两组合，可center，但必须单独使用。
可以使用px值
可以使用角度

p{ 
        background: -webkit-radial-gradient(center,deeppink,yellow,#153170);
        background: -webkit-radial-gradient(50px 50px,deeppink,yellow,#153170);
        background: -webkit-radial-gradient(45deg,deeppink,yellow,#153170);
}

shape(形状)：circle，产生正方形渐变色。ellipse，适配当前形状，如果是正方形容器，两者效果一样。

p{ 
	background: -webkit-radial-gradient(circle,deeppink,yellow,#153170);
}

大小size:
- closest-side: 最近边
- farthest-side: 最远的边
- closest-corner: 最近角
- farthest-corner: 最远角
- 默认，最远角。

p{ 
	background: -webkit-radial-gradient(circle closest-side,deeppink,yellow,#153170);
}

注意：产生的是图片，所以只能使用background

1.2.4 重复渐变

我们在想要做一个两种颜色重复的环形盒子的时候，我们或许可以这样达到效果：

p{
   width: 100px;
   height: 100px;
   background: -webkit-radial-gradient(
     #fff 0%, #000 10%,
     #fff 10%, #000 20%,
     #fff 20%, #000 30%
	)
}

但是，我们可以发现，我们是在做重复的事情，那么，如果我们使用重复渐变的话只需要写一步，后面的让其重复执行就可以了。

p{
   width: 100px;
   height: 100px;
   background: repeating-radial-gradient(#fff 0%, #000 10%);
}

当然，线性渐变也有重复渐变：

background: repeating-linear-gradient(#fff 0%, #000 10%);

1.2.5 background-repeat

background-repeat: round：将图片进行缩放之后进行平铺

background-repeat: space：将图片不会缩放，但是图片之间平铺的间距值是相等的

1.2.6 background-origin

background-origin: content-box 从内容区域开始显示背景
background-origin: padding-box 从padding区域开始显示背景
background-origin: border-box 从border区域开始显示背景

1.2.7 background-clip

background-clip: content-box 从内容区域开始裁剪背景
background-clip: padding-box 从padding区域开始裁剪背景
background-clip: border-box 从边框区域开始裁剪背景

1.3 边框图片

1.3.1 border-image-source

可以指定边框图片的路径

border-image-source: url('images/1.png')

1.3.2 border-image-slice

设置四个方向上的裁切距离。fill: 做内容的内部填充
```
border-image-slice: 27 fill;
```
以上代码，设置每个裁切距离为27，且内容部分填充。

1.3.3 border-image-width

边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。边框图片的本质是背景，并不会影响元素内容的放置，内容只会被元素的border和padding影响。建议：一遍将值设置为原始的边框宽度。

border-image-width: 27px;

1.3.4 border-image-repeat

边框背景的平铺方式
- round: 将图片缩放自适应平铺
- repeat: 直接平铺
- 默认为stretch拉伸
```
border-image-repeat: repeat;
border-image-repeat: round;
```

1.3.5 复合样式

border-image: source slice/width repeat

border-image: url('image/1.png') 27 fill/27px round;

1.3.6 案例

使用border-image常用的实例就是可以让qq和微信的聊天气泡不会随着内容的多少而变形

.box{
  width: 300px;
  border: 20px solid deeppink;
  color: green;
  margin: 100px auto;
  border-image: url("images/qipao.png") 114 fill/20px;
}

<div class="box">
      永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。
     是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。
</div>

1.4 文本属性

1.4.1 文本显示

文本从左向右显示

两属性需要配合使用

p{ 
   direction: rtl; 
   unicode-bidi:bidi-override;  
}

多行文本超出显示

p{
        display: -webkit-box; /*继承block的属性*/
        -webkit-box-orient:vertical;   /*元素垂直显示*/
        -webkit-line-clamp:2;  /*设置文本显示的行数*/
        overflow: hidden; /*（不能使用padding）*/
}

1.4.2 text-shadow

值可多个

text-shadow: [x轴偏移量 y轴偏移模糊半径颜色], [x轴偏移量 y轴偏移模糊半径颜色]...

几种字体阴影效果：

ul li{
  width: 800px;
  height: 150px;
  background: #5d5d5d;
  font: bold 80px/150px '微软雅黑';
  color: #fff;
  text-align: center;
  margin: 20px auto;
}

ul li:nth-child(1){ 
   text-shadow: -3px -3px 10px red;
}

ul li:nth-child(2){ 
   text-shadow: 0 0 50px #fff;
}

ul li:nth-child(3){ 
   text-shadow: 0 1px 0 #fff; 
   color: #000; 
}

ul li:nth-child(4){ 
   text-shadow: -1px -1px 0 #eee,-2px -2px 0 #ddd,-3px -3px 0 #ccc,-4px -4px 0 #bbb; 
}

ul li:nth-child(5){ 
   text-shadow: 0 0 8px deeppink; color: transparent; 
}

1.4.3 resize

resize盒子拖动，同时也可设置文本域防止拖动。

resize: none; 不可以拖动
resize: both; 水平和垂直都可以拖动
resize: vertical; 垂直可以拖动
resize: horizontal; 水平可以拖动

注意：不可拖动比原来的宽高小，必须配合overflow: auto;使用

1.4.4 user-select

user-select 定义文本是否可被选中

text 默认值，可被选中
none 不可被选中
all 成标签域复制给那个标签，点击这个标签就可以选中标签内所有的内容

1.4.5 column 列

column：每列的最小宽度列数
column-gap：列之间的间隔
column-rule: 粗细样式颜色（列之间的边框）

p{  
   columns: 100px 4;  
   column-gap: 50px;  
   column-rule: 5px solid deeppink;  
}

1.5 动画相关

1.5.1 transition过渡

通过过渡transition，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式是为元素添加效果，要实现这一点，必须规定两项内容：
- 规定希望把效果添加到哪一个css属性上
- 规定效果的长，过渡效果完成后默认会以相同的过渡效果还原

属性	描述
transition-property	要过渡的属性名称（如width、height，all 所有属性）
transition-duration	过渡效果持续时间
transition-delay	延迟过渡时间（可选）
transition-timing-function	过渡效果运行曲线( `linear`匀速，`ease`：慢快慢，`ease-in`：匀加速，`ease-out`：匀减速)

复合属性

transition： color  2s   3s   linear;

如果想要加多个

transition： color  2s   3s   linear,width  2s   3s   ease;

为所有属性添加过渡效果
- all 表示为所有属性添加过渡效果
- 效率低下，他会去查询所有添加的样式，建议以后不要这样写
- transition-timing-function: steps(n) : 可以让过渡效果分为指定的n次来完成，注意：不能和linear共用

transition: all 2s steps(4)

以上代码，分四次过渡完成

1.5.2 transform

transform: translate() `位移`

使用transform和translate实现元素的移动

移动是参照元素的左上角

执行完毕之后会恢复到原始状态

如果只有一个参数就代表x方向

如果有两个参数就代表 x/y 方向

也可以设置单独的方向

transform: translate(100px);	/* x轴方向 */
transform: translate(100px, 200px);	/* x轴，y轴方向 */
transform: translateX(100px);	/* x轴方向 */
transform: translateY(100px);	/* Y轴方向 */
transform: translateZ(100px);	/* Z轴方向,需要3D环境 */

3d属性：

transform: translate3d(x,y,z)

transform: scale() `缩放`

大于1表示放大，小于1表示缩小参照元素几何中心

一个值：既代表X轴，也代表Y轴

两个值：第一个代表X轴，第二个代表Y轴，逗号隔开

也可单独设置方向

transform: scale(1.2);	/* 放大 */
transform: scale(0.8);	/* 缩小 */
transform: scale(0.8,1.2);	/* x轴缩小0.8倍，y轴放大1.2倍 */
transform: scaleX(1.2);	/* x轴方向放大1.2倍 */
transform: scaleY(1.2);	/* y轴方向放大1.2倍 */
transform: scaleZ(1.2);	/* Z轴方向放大1.2倍，需要3D环境 */

3d属性：

transform: scale3d(x,y,z)

transform: rotate() `旋转`

单位：

deg 角度（180°）

turn 圈

transform： rotate(180deg);		/*（默认值，绕Z轴转）*/
transform： rotateX(180deg);	/*（绕X轴顺时针转）*/
transform： rotateY(180deg);	/*（绕Y轴逆时针转）*/
transform： rotateZ(180deg);	/*（绕Z轴顺时针转）*/

注意：旋转会使坐标系转动，如果给transform添加多个属性值的时候需要注意一下顺序

3d属性：

x：代表x轴方向上的向量值
y：代表y轴方向上的向量值
z：代表z轴方向上的向量值

transform: rotate3d(1,1,1,300deg)

tranform: skew() `斜切`

如果角度为正，往当前轴的负方向斜切

如果角度为正，往当前轴的正方向斜切

两个值的时候，第一个值是x轴方向的斜切，第二个值是y轴方向的斜切

transform: skew(45deg);
transform: skew(45deg,45deg);

transform-origin

变换的基点（即参考点），默认的基点：绝对中心点，该属性提供两个参数值:

如果设置两个，第一个为X轴，第二个为Y轴（两值以空格隔开）

如果设置一个，该值为X轴，第二个默认Y轴50%（给定值时）

百分比取值：百分比指定坐标值，可以为负值

transform-origin：50% 50%;

px取值：长度指定坐标值，可以为负值。

transform-origin：50px 50px;

transform复合

同时添加多个transform属性使用空格隔开

transform：translate(100px) rotate(45deg)

1.5.3 井深

perspective为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective: none/0时，相当于没有设置。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective<100px，那就相当于在盒子里面看立方体，如果perspective值非常大就是站在非常远的地方看（立方体已经成为了小正方体了），意味着perspective属性制定了观察者与z=0平面的距离，使具有三维位置变换的元素产生。
perspective-origin 属性规定了镜头在平面的位置。默认是放在元素的中心
transform-style 使被转换的子元素保留其3D转换（需要设置在其父元素中）
- flat，默认值。子元素将不保留其3D位置-平面方式
- preserve-3d，子元素保留其3D位置-立体方式

1.5.4 animation动画

创建动画

animationName：自定义动画名称
keyframes-selector：动画时长百分(关键帧)

@-webkit-keyframes  animationName{  
     keyframes-selector{css-style}
}

示例如下：

@-webkit-keyframes move{
    0%{ left: 0; top: 0;} /*动画开始执行时的状态*/
    25%{ left: 300px; top: 0;} /*0-25%这个阶段动画状态*/
    50%{ left: 300px; top: 300px;}
    75%{ left: 0; top: 300px;}
    100%{ left: 0; top: 0;}
}

同时也可以使用form...to，只有开始和结束状态。

from表示0%
to 表示100%

@-webkit-keyframes play{
    from{left: 0; top:0;} 
    to{left: 500px; top:0;} 
}

动画相关属性

animation-name: move;  /*动画名称*/
animation-duration: 4s;	/*动画执行时间*/
animation-timing-function: linear;		/*动画运行曲线*/
animation-iteration-count: infinite;	/*播放次数 infinite无限循环*/
animation-direction: alternate;	/*是否应该轮流反向播放动画 alternate反向轮流*/
animation-play-state: running;	/*停止状态转换为运动状态*/
animation-play-state: paused;/*运动状态转换为停止状态*/
animation-fill-mode: forwords;	/* forwords保留动画结束时状态 */
animation-fill-mode: backwards;	/* backwards 不会保留结束时状态，回到初始状态。默认值为回到初始状态 */
animation-fill-mode: both;	/* 保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态 */

复合属性

animation动画属性：函数名运动时间运动曲线播放次数是否反向播放动画;

animation: move 4s linear infinite alternate;

1.6 Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

1.6.1 Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局"，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start。结束位置叫做main end。交叉轴的开始位置叫做cross start。结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

bg2015071004

1.6.2 容器属性(给父元素)

display: flex

声明弹性盒子模型，父级容器只要添加了这个属性，默认会使所有Flex项目在一行显示。

以下6个属性设置在容器上

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

决定主轴的方向

column: 主轴为垂直方向，起点在上沿。

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

row：从左到右排列（abc）。

row-reverse: 从左到右排列，但元素顺序与row相反（cba）

bg2015071005

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义是否换行。

nowrap：不换行。该情况下flex子项可能会溢出容器（默认值）

wrap：换行，flex-item为多行。该情况下flex子项溢出的部分会被放置到新行。

wrap-reverse: 反转换行排列。（注意：不是倒序）

（1）nowrap（默认）：不换行。

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

（3）wrap-reverse：换行，第一行在下方。

flex-flow

flex-direction和flex-wrap的复合简写形式，默认为row nowrap

flex-flow: flex-direction flex-wrap

justify-content

定义了项目在主轴（通常是x轴）上的对齐方式。

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

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

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

6. 最后一行不between

可以在所有项的后面添加隐藏的li元素，一行本来多少项就添加多少项隐藏元素

<ul class="work">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li style="height: 0px;visibility: hidden;">div.box</li>
    <li style="height: 0px;visibility: hidden;">div.box</li>
    <li style="height: 0px;visibility: hidden;">div.box</li>
    <li style="height: 0px;visibility: hidden;">div.box</li>
</ul>

.work{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

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

center：交叉轴的中点对齐。

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

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

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

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

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

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

1.6.3 项目属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。场景：一些比较复杂的，需要较长时间渲染的dom，在html里面可以放在最后。但是可以通过order显示在前面。

.item {
  order: <integer>;
}

flex-grow

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

.item {
    flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

flex-shrink:定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

1.7 其他的CSS3属性

web字体

开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此字体，从此吧特殊字体处理成图片的时代便成为过去了。它的支持程度比较好，甚至IE低版本浏览器也能支持。

导入字体，其中font-family是对字体的命名，src是字体文件的路径

@font-face {
    font-family: "xiaowei";
    src: url("../font/小微logo体.otf");
}
@font-face {
    font-family: "kuhei";
    src: url("../font/站酷酷黑.ttf");
}

box-shadow阴影

注意：值有顺序关系

边框阴影：box-shadow: h v blur spread color inset

h：水平方向的偏移值
v：垂直方向的偏移值
blur：模糊度--可选，默认0
spread：阴影半径--可选，默认0
color：阴影颜色--可选，默认黑色
inset：内阴影--可选，默认是外阴影

p{
  width: 100px;
  height: 100px;
  background: purple;
  margin: 100px auto;
  box-shadow: 10px 10px 10px 0 #000 inset;
}

值可写多个

p{
  width: 100px;
  height: 100px;
  background: purple;
  margin: 100px auto;
  box-shadow: 10px 10px 10px 0 #000 inset,-10px -10px 10px 0 #000 inset;
}

怪异盒子模型

box-sizing

content-box：你设置的width属性仅仅是内容宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度。默认值
border-box ：你设置的width属性就是盒子最终的宽度，包含了border，padding和内容部分。如果添加了padding和border，那么内容区域就会减小。这就解决了我们平时给padding使我们盒子变大的弊端。

border-radius 圆角

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

设置一个值：四个角的圆角值都一样。如果元素是正方形，值为盒子半径时，盒子为一个正圆。

border-radius: 10px;

设置两个值：第一个值控制 左上/右下，第二个值控制 右上/左下

border-radius: 10px 20px;

设置三个值：第一个值控制 左上，第二分之控制 右上/左下 第三个值控制 右下

border-radius: 10px 20px 30px;

设置四个值：分别代表左上/右上/右下/左下

border-radius: 10px 20px 30px 40px;

添加/是用来设置当前不同方向（x/y轴）半径值。如下为一个宽200px，高100px的元素设置为椭圆。

border-radius: 100px/50px;

四个角不容方向上的不同圆角值，如下，1和10搭配，2和20搭配，以此类推。
border-radius: 水平(左上，右上，右下，左下)/垂直(左上，右上，右下，左下)

border-radius: 1px 2px 3px 4px/10px 20px 30px 40px;

某个角点不同方向圆角值

border-top-left-radius: 100px 50px;		/* 左上角 */
border-top-right-radius: 100px 50px;	/* 右上角 */
border-bottom-left-radius: 100px 50px;	/* 左下角 */
border-bottom-right-radius: 100px 50px;/* 右下角 */

CSS3

CSS3选择器

1.1 选择器

1.1.1 属性选择器

E[attr]

E[attr=value]

E[attr^=value]

E[attr$=value]

E[attr*=value]

1.1.2 伪类新增

A+B

A~B

p:first-of-type

p:last-of-type

p:nth-of-type(n)

p:nth-last-of-type(n)

p:only-child

p:last-child

p:nth-child(n)

p:nth-last-child(n)

p:not(element)

p:empty

p:target

p::selection

p::first-letter

p::first-line

input:disabled

input:enabled

input:checked

1.2 背景属性

1.2.1 hsl 调色板

1.2.2 线性渐变 linear-gradient()

1.2.3 径向渐变 radial-gradient()

1.2.4 重复渐变

1.2.5 background-repeat

1.2.6 background-origin

1.2.7 background-clip

1.3 边框图片

1.3.1 border-image-source

1.3.2 border-image-slice

1.3.3 border-image-width

1.3.4 border-image-repeat

1.3.5 复合样式

1.3.6 案例

1.4 文本属性

1.4.1 文本显示

文本从左向右显示

多行文本超出显示

1.4.2 text-shadow

1.4.3 resize

1.4.4 user-select

1.4.5 column 列

1.5 动画相关

1.5.1 transition过渡

1.5.2 transform

transform: translate() 位移

transform: scale() 缩放

transform: rotate() 旋转

tranform: skew() 斜切

transform-origin

transform复合

1.5.3 井深

1.5.4 animation动画

创建动画

动画相关属性

复合属性

1.6 Flex 布局

1.6.1 Flex 布局是什么？

1.6.2 容器属性(给父元素)

display: flex

flex-direction

flex-wrap

flex-flow

justify-content

6. 最后一行不between

align-items

align-content

1.6.3 项目属性

order属性

flex-grow

transform: translate() `位移`

transform: scale() `缩放`

transform: rotate() `旋转`

tranform: skew() `斜切`