CSS3总结

1. 简介

1.1 现状

浏览器的支持程度差，需要添加私有前缀
移动端支持优先于pc端
不断改进中
应用相对广泛

1.2 如何对待

坚持渐进增强
考虑用户群体
遵照产品的方案
听boss的！

2. 基础知识

2.1 选择器

属性选择器

    1. [attr] : 表示存在attr属性即可(属性没有赋值都没有关系)
    2. [attr=val] : 表示属性值完全等于val
    3. [attr^=val] : 表示属性值以val开头
    4. [attr*=val] : 表示属性值在任意位置含有val字符
    5. [attr$=val] : 表示属性值以val结尾

伪类选择器:
1. :link, :active, :visited, :hover
2. 以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类
  - E:first-child E的父元素的所有子元素中的第一个子元素为E的元素被选中
  - E:last-child E的父元素的所有子元素中最后一个子元素为E的元素被选中
  - E:nth-child(n) 第n个子元素: n的取值为从0开始计算,但子元素的序号是从1开始计算(索引<=0时,选取无效)
  - E:nth-last-child(n) 倒数第n个元素
  - E:empty 选中没有任何子节点的E元素
3. 目标伪类 : E:target 结合锚点使用,处于当前锚点的元素会被选中
4. 排除伪类 :
```
.test:not(.special){} : 选中.test类中不含有.special类的元素
```
伪元素选择器
1. E::first-letter
2. E::first-line
3. E::before,E::after
  - 行内元素,需要转出块级元素使用
  - 必须写content:""样式,否则设置无效
4. E::selection 可改变选中文本的样式
  伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果是通过添加了一个实际的元素才能达到的.

2.2 颜色

新增RGBA,HSLA模式,A代表透明度通道,相比opacity,不具有继承性,即不会影响子元素的透明度.

Red、Green、Blue、Alpha即RGBA
- R、G、B 取值范围0~255
Hue、Saturation、Lightness、Alpha即HSLA
- H 色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
- S 饱和度取值范围0%~100%
- L 亮度取值范围0%~100%
- A 透明度取值范围0~1
关于透明度
1. opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度
2. transparent 不可以调节透明度,始终完全透明
3. RGBA、HSLA可应用于所有使用颜色的地方.

2.3 文本

text-shadow,可分别设置偏移量、模糊度、延伸值、颜色

水平偏移量正值向右,负值向左
垂直偏移量正值向下,负值向上
模糊度不能为负值

2.4 边框

边框圆角: border-radius
边框阴影: box-shadow
- 水平偏移量正值向右,负值向左
- 垂直偏移量正值向下,负值向上
- 模糊度不能为负值
- inset可以设置内阴影
  边框阴影不会改变盒子大小,可以设置多重边框阴影,增强立体感
边框图片: 用处不多

2.5 盒模型

css3中可以通过box-sizing来指定盒模型:

content-box : 以内容为width值,width = content
padding-box : 以padding为边界为width值,width = content + padding;
border-box : 以border为边界为width值,width = content + padding + border;

默认为content-box,在移动端开发中,设置为border-box,可以用于布局防止溢出

2.6 背景

background-size 设置背景图片的尺寸
- cover: 自动调整背景图片的缩放比例,至全部填充背景区域,溢出部分被隐藏
- contain: 自动调整背景图片的缩放比例.至图片全部显示在区域内,可能会有留白
- 也可以使用长度单位或者百分比
background-origin 设置背景图片的原点
- border-box 以边框为参考原点
- padding-box 以内边距作为参考原点
- content-box 以内容区为参考原点
background-clip 设置背景图片的裁切区域
- border-box 以边框为参考原点
- padding-box 以内边距作为参考原点
- content-box 以内容区为参考原点
以,分隔可以设置多背景,用于自适应布局

background: url(./images/bg1.png) left top no-repeat,
			url(./images/bg4.png) left bottom no-repeat;

2.7 渐变

线性渐变 linear-gradient
- 参数:方向、起始颜色、终止颜色、渐变范围
- 方向:零度向上,90度向右

	background-image: linear-gradient(to right, yellow, green);
	background-image: linear-gradient(90deg, yellow, green);
	background-image: linear-gradient(
                    45deg,
                    red,
                    red 25%,
                    blue 25%,
                    blue 50%,
                    red 50%,
                    red 75%,
                    blue 75%,
                    blue 100%
            );

径向渐变
radial-gradient
- 参数:辐射范围(即半径)、中心点(即圆心)、起始颜色、终止颜色、渐变范围
- 中心点: 中心位置参照盒子的左上角
- 辐射范围: 半径可以不等,即可以是椭圆

background-image: radial-gradient(100px at 100px 100px , #fff,#00f);
background-image: radial-gradient(300px at left center, yellow, green);

2.8 过渡

实现元素不同状态间的平滑过渡(补间动画),任何属性的改变都会触发过渡

参数:
1. transition-property 设置过渡属性,all代表所有属性
2. transition-duration 设置过渡时间
3. transition-timing-function 设置速度函数(linear ease easeIn easeOut easeInOut)
4. transition-delay 设置过渡延时
transition: all 2s linear 1s;

可以使用过渡延时达到先执行一个属性变化的过渡,再执行另一个属性变化的过渡

2.9 2D转换

2D转换(transform)可以实现元素的位移、旋转、变形、缩放,配合过渡和动画,可以取代大量靠Flash能实现的效果

移动 translate(x,y)
- 移动的位置是相对于自身的
- 向右x为正,向下y为正
- 除了可以是像素值,还可以是百分比,百分比是相对于自身的(应用于不知道宽高的元素的居中)
旋转 rotate(deg)
- 正值为顺时针,负值为逆时针
- 元素旋转后,坐标轴也一起旋转
缩放 scale(x,y)
- x,y的取值为小于1的小数时,为缩小;为大于1的数时.为放大
倾斜 skew(x,y)
- 一般只写一个参数,第二个参数不写默认为0
- 参数的正负决定倾斜的方向
transform-origin :转换原点,相对于位移变换没有影响
可以同时使用多个转换,transform: translate() rotate() scale();但是由于转换过程中坐标轴的变化,这些属性的顺序会影响转换效果

2.10 3D转换

坐标轴正方向:x向右,y向下,z垂直屏幕指向人的方向
透视(perspective)
- 电脑显示屏是2D屏幕,3D效果是因为视觉呈现出来的,通过透视可以实现.
- 并非任何情况下都需要透视效果
- perspective的写法:
  1. 作为一个属性,设置给父元素,作用于所有3D转换的子元素
```
perspective:200px;
```
  1. 作为transform属性的一个值,作用于自身
```
transform : perspective(100px) translate(100px,100px);
```
transform-style : perserve-3d;
- 设置内嵌的元素在3D空间如何呈现,这些子元素必须为变形元素.
- flat:所有子元素在2D平面呈现
- preserve-3d:保留3D空间
backface-visibility
- 设置元素背面是否可见
- visiable、hidden

2.11 动画

可以通过@keyframe指定动画序列
通过百分比将动画序列分割成多个节点
在各个节点中分别定义各属性
通过animation将动画应用于相应元素
参数
- animation-name 动画名称
- animation-duration 动画执行时间
- animation-delay 动画延迟时间
- animation-timing-function 动画速度函数
- animation-play-state:running/paused 动画播放状态
- animation-direction 动画逆播,alternate
- animation-fill-mode:forwards/backwards 动画执行完毕后的状态
- animation-iteration-count:number/inifinate 动画执行次数
- step(60) :表示动画分60步完成
- 参数顺序:除了前三个,其他顺序随意

2.12 伸缩布局

css3在布局方面做了非常大的改进,使对块级元素的布局排列变得非常灵活,适应新非常强,在响应式开发中可以发挥很大的作用

主要概念:
- 主轴: Flex容器的主轴主要用来配置Flex项目,默认为水平方向
- 侧轴: 于主轴垂直的轴为侧轴,默认为垂直方向
- 方向: 默认主轴为从左到右,侧轴为从上到下
- 主轴和侧轴并不是固定不变的,通过flex-direction可以互换

属性详解:

首先要给父元素设置display:flex;这个盒子里面的子盒子就可以使用Flex布局的特性
flex-direction : 调整主轴方向(父元素的属性)

	1. row : 默认
	2. column : 主轴方向调整为垂直
	3. row-reverse : 反向水平排列
	4. column-reverse : 反向垂直排列

justify-content : 调整主轴对齐方式(设置给父元素)

	1. flex-start
	2. flex-end
	3. center
	4. space-around
	5. space-between

align-items : 调整侧轴对齐方式,即垂直方向的位置(设置给父元素)

	1. flex-start
	2. flex-end
	3. center
	4. strech

flex-wrap : 控制是否换行(设置给父元素)

	1. wrap
	2. nowrap
	3. 给子盒子一个固定的宽度时,一排放不下多个子盒子时,控制不能换行会自动按比例缩小盒子以适应父盒子的宽度

align-content : 堆栈(由flex-wrap产生的独立行)对齐(设置给父元素)

	1. flex-start
	2. flex-end
	3. center
	4. space-between
	5. space-around
	6. 这个属性是设置换行产生的多行之间垂直方向的排列方式的

flex-flow : flex-direction、flex-wrap的缩写
flex : 子元素在主轴的缩放比例,不知道flex属性,则不参与伸缩分配

	1. 不设置此属性的,按设置的宽度值显示,剩余宽度被设置了此属性按比例被其他元素分配
	2. 都不设置此属性,又不设置换行,则均按设置的宽度比例来分配所有的宽度

align-self : 设置给子盒子,可以覆盖父盒子的align-items

	1. flex-start
	2. flex-end
	3. center
	4. strech

order : 控制子项目在主轴的排列比例,正序方式排序,从小到大(设置给子元素)

posted @ 2016-08-30 20:02 编码小菇凉阅读(314) 评论(0) 编辑收藏举报

刷新页面返回顶部

编码小菇凉

CSS3总结

CSS3总结

1. 简介

1.1 现状

1.2 如何对待

2. 基础知识

2.1 选择器

2.2 颜色

2.3 文本

2.4 边框

2.5 盒模型

2.6 背景

2.7 渐变

2.8 过渡

2.9 2D转换

2.10 3D转换

2.11 动画

2.12 伸缩布局

公告