2019-07-22

前端

16 分钟读完 (大约 2433 个字) 0次访问

CSS3笔记

一、CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

二、使用手册

学会使用工具，可以让我们事半功倍。

[] 表示全部可选项

|| 表示或者

| 表示多选一

？表示0个或者1个

* 表示0个或者多个

{} 表示范围

三、选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

3.1 属性选择器

1、E[attr] 表示存在attr属性即可；
2、E[attr=val] 表示属性值完全等于val
3、E[attr ~= val] 表示的一个单独的属性值这个属性值是以空格分隔的
4、E[attr |= val] 表示的要么一个单独的属性值要么这个属性值是以“-”分隔的
5、E[attr *= val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr ^= val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr $= val] 表示的属性值里包含val字符并且在“结束”位置

3.2 伪类选择器

重点理解E是用来参考确定其父元素的，nth-child(n) 对应根据E元素确定的父元素的所有子元素，nth-of-type(n) 的不同之处在于其对应的是只有E元素，会忽略其子元素。
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-of-type(n) 第n个子元素，计算方法只是E元素，会忽略其子元素的
E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。 倒数第几个
E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。 倒数第几个

n遵循线性变化，其取值1、2、3、4、…
关于n的取值范围：

1、当n做为一个独立值时，n取值为n>=1，例如nth-child(n)

2、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1；

3.2 伪元素选择器

E::selection 可改变选中文本的样式

section:nth-child(3) p::selection {
	background-color: red;
	color: blue;
}

<section>
	<header>E::selection</header>
	<div class="wrap-box">
		<p>一大段话一大段话一大段话一大段话一大段话</p>
	</div>
</section>

E::placeholder 可改变placeholder默认样式，这个存在明显的兼容问题，比如::-webkit-input-placeholder，具体参考手册进行对比。

1
2
3

section:nth-child(4) input::-webkit-input-placeholder  {
	color: blue;
}

<section>
	<header>E::placeholder</header>
	<div class="wrap-box">
		<input type="text" placeholder="我是一个占位符">
	</div>
</section>

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待。
“:” 与 “::” 区别在于区分伪类和伪元素

四、颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，不具有继承性，即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
S 取值范围0%~100%
L 取值范围0%~100%
A 取值范围0~1
关于透明度：
1、opacity子元素会继承父元素的透明度，在实际开发中会带来干扰；
2、transparent 设置透明

五、文本

文字阴影与边框阴影相似，可分别设置偏移量、模糊度、颜色（可设透明度）。

1	text-shadow: 2px 2px 8px #000;

分别为左右偏移量、上下、模糊度和颜色

单行文本溢出，需要配合overflow:hidden; white-space: nowrap;
自已要多试着理解一下关于white-space的各个属性值之间的差异；
上述方法只能解决单行文本的溢出问题，多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成，可自行尝试。
单行溢出：

1
2
3

<p>
	了多少覅较好的尽快决定是否开始思考附件
</p>

p {
	width: 200px;
	border: 1px solid #CCC;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

多行溢出：

p {
	width: 200px;
	border: 1px solid #CCC;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;      /*第几行换行*/
	-webkit-box-orient: vertical;
}

六、边框

其边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

6.1 边框圆角

圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

当圆角半径小于或等于边框宽度时，元素内角是直角

拱形

1	border-radius: 90px 90px 0 0;

半圆

1 2	height: 90px; border-radius: 90px 90px 0 0;

左上角

1	border-radius: 90px 0 0 0;

四分之一圆

1
2
3

width: 90px;
height: 90px;
border-radius: 90px 0 0 0;

横着的椭圆

height: 90px;
/*border-radius: 50%;*/
border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
/*border-radius: 45px / 90px;*/

半个竖着的椭圆

1 2	width: 45px; border-radius: 45px 0 0 45px / 90px 0 0 90px;

四分之一竖着的椭圆

1
2
3

width: 45px;
height: 90px;
border-radius: 45px 0 0 0 / 90px 0 0 0;

饼环

width: 40px;
height: 40px;
border: 70px solid red;
border-radius: 90px;

四边不同色

width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;

右透明色

width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;
border-right-color: transparent;

圆右透明色

width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red;
border-right-color: transparent;
border-radius: 90px;

6.2 边框图片

设置的图片将会被“切割”成九宫格形式，然后进行设置。
“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不显示。

6.3 边框阴影

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局。spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值。可以设置多重边框阴影，实现更好的效果，增强立体感。

内阴影inset

1	box-shadow: inset 20px 20px 20px -10px #000;

七、背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
background-size会以background-clip设定的盒模型计算。

八、渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变、重复渐变。
线性渐变指沿着某条直线朝一个方向产生渐变效果。
径向渐变指从一个中心点开始沿着四周产生渐变效果

1	background-image: linear-gradient(yellow, green, red, blue);

用角度或关键字来确定方向

1 2	background-image: linear-gradient(45deg, yellow, green, red, blue); /background-image: linear-gradient(to left top, yellow, green, red, blue);/

控制渐变

1	background-image: linear-gradient(to top, yellow 20%, green 40%, blue);

九、伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用，使得开发人员一下子就过上了小康的生活。

伸缩盒模型经历了几次演变，大致分为旧版伸缩布局、过渡伸缩布局、新版伸缩布局，同样为了避免混淆，我们以学习新版伸缩布局为主。

9.1 新版伸缩布局

这里我们需要引入一些新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
主轴和侧轴并不是固定不变的，通过flex-direction可以调整。
另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。

# CSS3