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结尾
-
伪类选择器:
- :link, :active, :visited, :hover
- 以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类
- 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元素
- 目标伪类 : E:target 结合锚点使用,处于当前锚点的元素会被选中
- 排除伪类 :
.test:not(.special){} : 选中.test类中不含有.special类的元素 -
伪元素选择器
- E::first-letter
- E::first-line
- E::before,E::after
- 行内元素,需要转出块级元素使用
- 必须写content:""样式,否则设置无效
- 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
- 关于透明度
- opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度
- transparent 不可以调节透明度,始终完全透明
- 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的写法:
- 作为一个属性,设置给父元素,作用于所有3D转换的子元素
perspective:200px;- 作为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 : 控制子项目在主轴的排列比例,正序方式排序,从小到大(设 置给子元素)