CSS3归纳课后笔记

1.1属性
特点是通过属性来选择元素
选择器 ： 含义
E[attr] ： 存在attr属性即可
E[attr=val] ： 属性值完全等于val
E[attr*=val] ： 属性值里包含val字符并且在“任意”位置
E[attr^=val] ： 属性值里包含val字符并且在“开始”位置
E[attr$=val] ： 属性值里包含val字符并且在“结束”位置

1.12 伪类
结构(位置)伪类
选择器 ： 含义
E:first-child ： 其父元素的第1个子元素
E:last-child ： 其父元素的最后1个子元素
E:nth-child(n) ： 其父元素的第n个子元素
E:nth-last-child(n) ： 其父元素的第n个子元素（倒着数）
n遵循线性变化，其取值0、1、2、3、4、…
n可是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等；
注：指E元素的父元素，并对应位置的子元素必须是E

2、空伪类
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
选择器-伪类empty.html

3、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
选择器-伪类target.html

4、排除伪类
E:not(selector) 除selector（任意选择器）外的元素会被选中；
选择器-伪类not.html
1.13 伪元素
1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
选择器-伪元素first-letter.html

2、E::first-line 文本第一行；
选择器-伪元素first-line.html

3、E::selection 可改变选中文本的样式；
选择器-伪元素selection.html

4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。选择器-伪元素before&after.html
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解
“:” 与 “::” 区别在于区分伪类和伪元素

颜色：
RGBA是代表红色，绿色，蓝色和ALpha的色彩空间
R、G、B 取值范围0-255
H 色调 取值范围0-360 0/360表示红色 120表示绿色 240表示蓝色色
s 饱和度 取值范围0-100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
关于CSS透明度：
1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明

1.3文本（shadow)阴影
text shawdow: 0px 0px 5px red; 横者移动 竖的移动 模糊程度 颜色
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；

1.4 盒模型
css3 中可以通过box-sizing 来指定盒模型
可分为两种情况：
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

1.5 边框
边框圆角、边框阴影属性
border-radius:属性被用于创建圆角
border-radius: 100px（左上） 100px（右上） 0px（左下） 0px（右下）;
border-radius: 100px（左上） 100px （右上，左下） 0px（右下）;
分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。

1.5.2
边框阴影
box-shadow:属性被用来添加阴影:
外阴影：box-shadow: X轴 Y轴 Rpx color;
属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色
内阴影：box-shadow: X轴 Y轴 Rpx color inset;
默认是外阴影 内阴影：inset 可以设置成内部阴影
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、inset可以设置内阴影；

1.5.3边框图片
border-image:添加背景图片
border-image-reapt:space/round属性
space 背景图不会产生缩放，会被裁切 round 缩放背景图至容器大小（非等比例缩放）
1、border-image-source
指定图片路径
2、border-image-repeat
指定裁切好的虚拟图片的平铺方式
a) round会自动调整尺寸，完整显示边框图片
b) repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。
3、border-image-slice 指定图像的边界向内偏移：
4、border-image-width 指定图像边界的宽度：
设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。

1.6背景
background-image属性：属性添加背景图片
background-size 属性：指定背景图像的大小
background-Origin属性：指定了背景图像的位置区域
其参数设置如下：
background-clip属性：背景剪裁属性是从指定位置开始绘制
border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；
多背景
以逗号分隔可以设置多背景，可用于自适应布局

1.7渐变
1.7.1线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
1.7.2径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

1.8 CSS3 过渡
transition：用于在一个属性中设置四个过渡属性。
transition-property：规定应用过渡的 CSS 属性的名称
transition-duration： 定义过渡效果花费的时间。默认是 0
transition-timing-function： 规定过渡效果的时间曲线。默认是 "ease
transition-delay： 规定过渡效果何时开始。默认是 0。

1.9 2D转换
translate() 方法
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate() 方法
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale() 方法
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew() 方法
skewX(< angle>);表示只在X轴(水平方向)倾斜。
skewY(< angle>);表示只在Y轴(垂直方向)倾斜。

matrix() 方法
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

1.10 CSS3 3D 转换
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

transform-Origin
允许您更改转换元素的位置。

transform–style
指定嵌套元素是怎样在三维空间中呈现。

perspective 属性
设置从何处查看一个元素的角度：

perspective-origin 属性
设置一个3D元素的基数位置
属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置

backface-visibility
属性定义当元素不面向屏幕时是否可见。

1.11 动画
通过@keyframes 创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

animation（动画） 属性一个简写属性，用于设置六个动画属性：
animation-name: 规定 @keyframes 动画的名称。
animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function: 规定动画的速度曲线。默认是 “ease”。
animation-delay: 规定动画何时开始。默认是 0。
animation-iteration-count: 规定动画被播放的次数。默认是 1。
animation-direction: 规定动画是否在下一周期逆向地播放。默认是 “normal”。

1.12 伸缩布局
方向：默认主轴从左向右，侧轴默认从上到下
主轴和测轴并不是固定
1、必要元素
a、指定一个盒子为伸缩盒子 display:flex
b、设置属性来调整此盒子的布局方式
c、明确主侧轴
主轴： Flex容器的主轴主要用来配置Flex项目。 他不一定是水平的， 这主要取决于 fle-direction属性。
主轴起点，主轴终点：Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
主轴长度：Flex项目在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
侧轴起点，侧轴终点：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴长度：Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是widht或height属性，由哪一个对着主轴方向决定。

伸缩项主轴的对齐方式
justify-content: flex-start;设置伸缩容器中的伸缩项, 和伸缩容器主轴的起点对齐
justify-content: flex-end设置伸缩容器中的伸缩项, 和伸缩容器主轴的终点对齐
justify-content: center;设置伸缩容器中的伸缩项居中
justify-content: space-between; 两端对齐, 第一个伸缩项会和主轴的起点对齐,最后一个伸缩项会和主轴的终点对齐,其它项目平分多余的间隙
justify-content: space-around; 环绕对齐, 给所有伸缩项的两遍都添加间隙

伸缩项侧轴的对齐方式
align-items: flex-start 侧轴的默认对齐方式: 和侧轴的起点对齐
align-items: flex-end和侧轴的终点对齐
align-items: center 和侧轴的中点对齐
align-items: baseline按照所有伸缩项内容的基线对齐
align-items: stretch拉伸对齐

伸缩布局的换行显示
伸缩容器宽度小于所有伸缩项宽度时, 系统会自动等比缩放伸缩项
如果不想让系统自动等比缩放伸缩项, 那么可以设置一个属性
flex-wrap: wrap;
默认值:flex-wrap: nowrap;
flex-wrap: wrap-reverse 将最前面一行显示到最后一行, 其它行依次往上显示
注意点: 设置行的对齐方式, 参考点就是侧轴

侧轴换行的行对齐方式
align-content: flex-start 各行向弹性盒容器的起始位置堆叠。
align-content: flex-end 各行向弹性盒容器的结束位置堆叠。
align-content: center 各行向弹性盒容器的中间位置堆叠。
align-content: space-between 各行在弹性盒容器中平均分布。
align-content: space-around 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
align-content:strech(默认值) 各行将会伸展以占用剩余的空间。
属性的含义和justify-content一样

伸缩项的放大和缩小比例：
如果想让伸缩项按照一定的比例分配伸缩容器的宽度, 那么就可以通过flex-grow属性来设置
flex-grow: 1; 那么就代表着所有伸缩项占用一份宽度

order 属性设置弹性容器内弹性子元素的属性:
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex 属性用于指定弹性子元素如何分配空间。

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

3.13 多列布局
-webkit-column-count:3;
/* 分割线*/
-webkit-column-rule:1px dashed red;
/设置列间距/
-webkit-column-gap: px;
/* 列宽度*/
/-webkit-column-width: px;/

2 Web字体
2.1字体格式
1、TureType(.ttf)格式
ttf字体是Windows和Mac的最常见的字体
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式