1.CSS3 新增长度单位
1. rem 根元素字体大小的倍数,只与根元素字体大小有关。
2. vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
3. vh 视口高度的百分之多少 10vh 就是视口高度的 10%
2.CSS3 新增盒模型相关属性
box-sizing 怪异盒模型
使用 box-sizing 属性可以设置盒模型的两种类型
resize 调整盒子大小
使用 resize 属性可以控制是否允许用户调节元素尺寸。
box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
/* 写两个值,含义:水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值,含义:水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值,含义:水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值,含义:水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值,含义:水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;
opacity 不透明度
opacity 属性能为整个元素添加透明效果, 值是 0 到 1 之间的小数, 0 是完全透明, 1 表示完
全不透明。
3.CSS3 新增背景属性
background-origin
作用:设置背景图的原点。
语法
1. padding-box :从 padding 区域开始显示背景图像。—— 默认值
2. border-box : 从 border 区域开始显示背景图像。
3. content-box : 从 content 区域开始显示背景图像
background-clip
作用:设置背景图的向外裁剪的区域。
1. border-box : 从 border 区域开始向外裁剪背景。 —— 默认值
2. padding-box : 从 padding 区域开始向外裁剪背景。
3. content-box : 从 content 区域开始向外裁剪背景。
4. text :背景图只呈现在文字上。
background-size
作用:设置背景图的尺寸。
1. 用长度值指定背景图片大小,不允许负值。
background-size: 300px 200px;
2. 用百分比指定背景图片大小,不允许负值
background-size: 100% 100%;
3.contain : 将背景图片等比缩放,使背景图片的宽或高,与容器的宽或高相等,再将完整
背景图片包含在容器内,但要注意:可能会造成容器里部分区域没有背景图片
background-size: contain;
4. cover :将背景图片等比缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要
注意:背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;
多背景图
CSS3 允许元素设置多个背景图片
例:
/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
url(../images/bg-rt.png) no-repeat right top,
url(../images/bg-lb.png) no-repeat left bottom,
url(../images/bg-rb.png) no-repeat right bottom;
4. CSS3新增边框属性
边框圆角
在 CSS3 中,使用 border-radius 属性可以将盒子变为圆角。
同时设置四个角的圆角:
border-radius:10px;
5. CSS3新增文本属性
文本阴影
在 CSS3 中,我们可以使用 text-shadow 属性给文本添加阴影。
语法:text-shadow: h-shadow v-shadow blur color;
文本换行
在 CSS3 中,我们可以使用 white-space 属性设置文本换行方式。
文本溢出
在 CSS3 中,我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式
注意:要使得 text-overflow 属性生效,块容器必须显式定义 overflow 为非 visible 值, white-space 为 nowrap 值。
替换成...的例子:
文本修饰
CSS3 升级了 text-decoration 属性,让其变成了复合属性
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
6. CSS3 新增渐变
线性渐变
多个颜色之间的渐变, 默认
从上到下渐变
例:
background-image: linear-gradient(red,yellow,green);
使用关键词设置线性
渐变的方向:
例:
background-image: linear-gradient(to right top,red,yellow,green);
使用角度设置线性
渐变的方向。
例:
background-image: linear-gradient(30deg,red,yellow,green);
调整开始
渐变的位置。
例:
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
径向渐变
多个颜色之间的渐变, 默认从圆心四散。
例:
background-image: radial-gradient(red,yellow,green);
使用关键词调整渐变圆的圆心位置
例:
background-image: radial-gradient(at right top,red,yellow,green);
使用像素值调整渐变圆的圆心位置
例:
background-image: radial-gradient(at 100px 50px,red,yellow,green);
调整渐变形状为正圆
background-image: radial-gradient(circle,red,yellow,green);
调整形状的半径 。
r=100px:
background-image: radial-gradient(100px,red,yellow,green);
a=50px,b=100px
background-image: radial-gradient(50px 100px,red,yellow,green)
调整开始渐变的位置
background-image: radial-gradient(red 50px,yellow 100px,green 150px)
使用 repeating-linear-gradient 进行重复线性渐变,具体参数同 linear-gradient 。
使用 repeating-radial-gradient 进行重复径向渐变,具体参数同 radial-gradient 。
7. 2D变换
2D位移
2D 位移可以改变元素的位置,具体使用方式如下:
1.先给元素添加
转换属性 transform
2.编写 transform 的具体值,相关可选值如下:
注意:
1. 位移与相对定位很相似,都不脱离文档流,不会影响到其它元素。
2. 与相对定位的区别:相对定位的百分比值,参考的是其父元素;定位的百分比值,参考的是
其自身。
3. 浏览器针对位移有优化,与定位相比,浏览器处理位移的效率更高。
4. transform 可以链式编写,例如:transform: translateX(30px) translateY(40px);
5. 位移对行内元素无效。
6. 位移配合定位,可实现元素水平垂直居中
2D缩放
2D 缩放是指:让元素放大或缩小,具体使用方式如下:
1. 先给元素添加
转换属性 transform
2. 编写 transform 的具体值,相关可选值如下:
2D旋转
2D 旋转是指:让元素在二维平面内,顺时针旋转或逆时针旋转,具体使用方式如下:
1. 先给元素添加
转换属性 transform
2. 编写 transform 的具体值,相关可选值如下:
rotate :设置旋转角度,需指定一个角度值( deg ),正值顺时针,负值逆时针。
多重变换
多个变换,可以同时使用一个 transform 来编写
transform: translate(-50%, -50%) rotate(45deg)
变换原点
1.元素变换时,默认的原点是元素的中心,使用 transform-origin 可以设置变换的原点。
2.修改变换原点对位移没有影响, 对旋转和缩放会产生影响。
3.如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
4.如果只提供一个,若是像素值,表示横坐标,纵坐标取 50% ;若是关键词,则另一个坐标取 50%
例:
1. transform-origin: 50% 50% , 变换原点在元素的中心位置,百分比是相对于自
身。—— 默认值
2. transform-origin: left top ,变换原点在元素的左上角 。
3. transform-origin: 50px 50px , 变换原点距离元素左上角 50px 50px 的位置。
4. transform-origin: 0 ,只写一个值的时候,第二个值默认为 50% 。
3D变换
元素进行 3D 变换的首要操作:
父元素必须开启 3D 空间!
使用 transform-style 开启 3D 空间,可选值如下:
flat : 让子元素位于此元素的二维平面内( 2D 空间)—— 默认值
preserve-3d : 让子元素位于此元素的三维空间内( 3D 空间)
设置景深
景深指定观察者与 z=0 平面的距离
使用 perspective 设置景深,可选值如下:
none : 不指定透视 ——(默认值)
长度值 : 指定观察者距离 z=0 平面的距离,不允许负值。
注意: perspective 设置给发生 3D 变换元素的父元素!
透视点位置
所谓透视点位置,就是观察者位置;默认的透视点在元素的中心。
使用 perspective-origin 设置观察者位置(透视点的位置),例如:
/* 相对坐标轴往右偏移400px, 往下偏移300px(相当于人蹲下300像素,然后向右移动400像素看元素)
*/
perspective-origin: 400px 300px;
3D 位移
3D 位移是在 2D 位移的基础上,可以让元素沿 z 轴位移,具体使用方式如下:
给元素添加
转换属性 transform
3D 旋转
3D 旋转是在 2D 旋转的基础上,可以让元素沿 x 轴和 y 轴旋转,具体使用方式如下:
1. 先给元素添加
转换属性 transform
2. 编写 transform 的具体值, 3D 相关可选值如下
3D 缩放
3D 缩放是在 2D 缩放的基础上,可以让元素沿 z 轴缩放,具体使用方式如下:
1.先给元素添加
转换属性 transform
2.编写 transform 的具体值, 3D 相关可选值如下
多重变换
可以用同一个transform写:
transform: translateZ(100px) scaleZ(3) rotateY(40deg);
背部可见性
使用 backface-visibility 指定元素背面,在面向用户时是否可见,常用值如下:
visible : 指定元素背面可见,允许显示正面的镜像。—— 默认值
hidden : 指定元素背面不可见
8.过渡
transition-property
作用:定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡
效果。
常用值:
1. none :不过渡任何属性。
2. all :过渡所有能过渡的属性。
3. 具体某个属性名 ,例如: width 、 heigth ,若有多个以逗号分隔
transition-duration
作用:设置过渡的持续时间,即:一个状态过渡到另外一个状态耗时多久。
常用值:
1. 0 :没有任何过渡时间 —— 默认值。
2. s 或 ms :秒或毫秒。
transition-delay
作用:指定开始过渡的延迟时间,单位: s 或 ms
transition-timing-function
作用:设置过渡的类型
常用值:
1. ease : 平滑过渡 —— 默认值
2. linear : 线性过渡
3. ease-in : 慢 → 快
4. ease-out : 快 → 慢
5. ease-in-out : 慢 → 快 → 慢
6. step-start : 等同于 steps(1, start)
7. step-end : 等同于 steps(1, end)
8. steps( integer,?) : 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的
步数。第二个参数取值可以是 start 或 end ,指定每一步的值发生变化的时间点。第二个
参数默认值为 end 。
9. cubic-bezie ( number, number, number, number): 特定的贝塞尔曲线类型。
transition 复合属性
如果设置了一个时间,表示 duration ;如果设置了两个时间,第一是 duration ,第二个是
delay ;其他值没有顺序要求。
例:transition:1s 1s linear all;
实操举例:
9.动画
帧
一段动画,就是一段时间内连续播放 n 个画面。每一张画面,我们管它叫做“帧”。一定时间内连续
快速播放若干个帧,就成了人眼中所看到的动画。同样时间内,播放的帧数越多,画面看起来越流
畅
动画的基本使用
第一步:定义关键帧(定义动画)
1. 简单方式定义
@keyframes 动画名 {
from {
/*property1:value1*/
/*property2:value2*/
}
to {
/*property1:value1*/
}
}
2.完整方式定义:
@keyframes 动画名 {
0% {
/*property1:value1*/
}
20% {
/*property1:value1*/
}
40% {
/*property1:value1*/
}
60% {
/*property1:value1*/
}
80% {
/*property1:value1*/
}
100% {
/*property1:value1*/
}
}
第二步:给元素应用动画,用到的属性如下
.box {
/* 指定动画 */
animation-name: test;
/* 设置动画所需时间 */
animation-duration: 5s;
/* 设置动画延迟 */
animation-delay: 0.5s;
}
动画的其他属性
animation-timing-function ,设置动画的类型,常用值如下
1. ease : 平滑动画 —— 默认值
2. linear : 线性过渡
3. ease-in : 慢 → 快
4. ease-out : 快 → 慢
5. ease-in-out : 慢 → 快 → 慢
......
animation-iteration-
count ,指定动画的播放次数,常用值如下:
1. number :动画循环次数
2. infinite : 无限循环
animation-
direction ,指定动画方向,常用值如下:
1. normal : 正常方向 (默认)
2. reverse : 反方向运行
3. alternate : 动画先正常运行再反方向运行,并持续交替运行
4. alternate-reverse : 动画先反运行再正方向运行,并持续交替运行
animation-fill-
mode ,设置动画之外的状态
1. forwards : 设置对象状态为动画结束时的状态
2. backwards : 设置对象状态为动画开始时的状态
animation-play-
state ,设置动画的播放状态,常用值如下:
1. running : 运动 (默认)
2. paused : 暂停
动画复合属性
只设置一个时间表示 duration ,设置两个时间分别是: duration 和 delay ,其他属性没有数量和
顺序要求。
例:
.inner {
anim
ation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}
动画实操举例:
10.多列布局
作用:专门用于实现类似于报纸的布局。
常用属性如下:
column-count :指定列数,值是数字。
column-width :指定列宽,值是长度。
columns :同时指定列宽和列数,复合属性;值没有数量和顺序要求。
column-gap :设置列边距,值是长度。
column-rule-style :设置列与列之间边框的风格,值与 border-style 一致。
column-rule-width :设置列与列之间边框的宽度,值是长度。
column-rule-color :设置列与列之间边框的颜色。
coumn-rule :设置列边框,复合属性。
column-span 指定是否跨列;值: none 、 all 。
11.伸缩盒模型
新的盒子模型 —— Flexible Box (伸缩盒模型,又称:弹性盒子)。
截止目前,除了在部分 IE 浏览器不支持,其他浏览器均已全部支持。
伸缩盒模型的出现,逐渐演变出了一套新的布局方案 —— flex 布局。
伸缩容器、伸缩项目
伸缩容器: 开启了 flex 的元素,就是:伸缩容器。
1. 给元素设置: display:flex 或 display:inline-flex ,该元素就变为了伸缩容
器。
2. display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩
容器。
3. 一个元素可以同时是:伸缩容器、伸缩项目。
伸缩项目:伸缩容器所有
子元素自动成为了:伸缩项目。
1. 仅伸缩容器的
子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项
目。
2. 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”。
主轴与侧轴
主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边
是终点)。
侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边
是终点)
主轴方向
属性名: flex-direction
常用值如下:
1. row :主轴方向水平从左到右 —— 默认值
2. row-reverse :主轴方向水平从右到左。
3. column :主轴方向垂直从上到下。
4. column-reverse :主轴方向垂直从下到上。
注意:改变了主轴的方向,侧轴方向也随之改变
主轴换行方式
属性名: flex-wrap
常用值如下:
1. nowrap :默认值,不换行。(伸缩容器长度不够就子元素每个都变窄挤一挤)
2. wrap :自动换行,伸缩容器不够自动换行。
3. wrap-reverse :反向换行。
flex-flow
flex-flow 是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要
求。
例子:flex-flow: row wrap;
主轴对齐方式
属性名: justify-content
常用值如下:
1. flex-start :主轴起点对齐。—— 默认值
2. flex-end :主轴终点对齐。
3. center :居中对齐
4. space-between :均匀分布,两端对齐(最常用)。
5. space-around :均匀分布,两端距离是中间距离的一半。
6. space-evenly :均匀分布,两端距离与中间距离一致。
侧轴对齐方式
一行的情况:
所需属性: align-items
常用值如下:
1. flex-start :侧轴的起点对齐。
2. flex-end :侧轴的终点对齐。
3. center :侧轴的中点对齐。
4. baseline : 伸缩项目的第一行文字的基线对齐。
5. stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
多行的情况
所需属性: align-content
常用值如下:
1. flex-start :与侧轴的起点对齐。
2. flex-end :与侧轴的终点对齐。
3. center :与侧轴的中点对齐。
4. space-between :与侧轴两端对齐,中间平均分布。
5. space-around :伸缩项目间的距离相等,比距边缘大一倍。
6. space-evenly : 在侧轴上完全平分。
7. stretch :占满整个侧轴。—— 默认值
flex 实现水平垂直居中
方法一:父容器开启 flex 布局,随后使用 justify-content 和 align-items 实现水平垂直居中
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}
方法二:父容器开启 flex 布局,随后子元素 margin: auto
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}
伸缩性
flex-basis
概念: flex-basis 设置的是主轴方向的
基准长度,会让宽度或高度失效。
作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值 auto ,即:伸缩项目
的宽或高。
flex-grow(伸)
概念: flex-grow 定义伸缩项目的放大比例,默认为 0 ,即:纵使主轴存在剩余空间,也不拉伸
(放大)。
规则:
1. 若所有伸缩项目的 flex-grow 值都为 1 ,则:它们将等分剩余空间(如果有空间的话)。
2. 若三个伸缩项目的 flex-grow 值分别为: 1 、 2 、 3 ,则:分别瓜分到: 1/6 、 2/6 、
3/6 的空间。
flex-shrink(缩)
概念: flex-shrink 定义了项目的压缩比例,默认为 1 ,即:如果空间不足,该项目将会缩小。
例如:
三个收缩项目,宽度分别为: 200px 、 300px 、 200px ,它们的 flex-shrink 值分别
为: 1 、 2 、 3
若想刚好容纳下三个项目,需要总宽度为 700px ,但目前容器只有 400px ,还差 300px
所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:
1. 计算分母: (200×1) + (300×2) + (200×3) = 1400
2. 计算比例:
项目一: (200×1) / 1400 = 比例值1
项目二: (300×2) / 1400 = 比例值2
项目三: (200×3) / 1400 = 比例值3
3. 计算最终收缩大小:
项目一需要收缩: 比例值1 × 300
项目二需要收缩: 比例值2 × 300
项目三需要收缩: 比例值3 × 300
flex复合属性
flex 是复合属性,复合了: flex-grow 、 flex-shrink 、 flex-basis 三个属性,默认值为 0 1
auto 。
如果写 flex:1 1 auto ,则可简写为: flex:auto
如果写 flex:1 1 0 ,则可简写为: flex:1
如果写 flex:0 0 auto ,则可简写为: flex:none
如果写 flex:0 1 auto ,则可简写为: flex:0 auto —— 即 flex 初始值
BFC
简介
1.BFC 是 Block Formatting Context (
块级格式上下文),可以理解成元素的一个 “特异功能”。
2. 该 “特异功能”,在默认的情况下处于关闭状态;当元素满足了某些条件后,该“特异功能”被激活。
3. 所谓激活“特异功能”,专业点说就是:该元素创建了 BFC (又称:开启了 BFC )。
开启了BFC能解决什么问题
1. 元素开启 BFC 后,其子元素不会再产生 margin 塌陷问题。
2. 元素开启 BFC 后,自己不会被其他浮动元素所覆盖。
3. 元素开启 BFC 后,就算其子元素浮动,元素自身高度也不会塌陷。
如何开启BFC
根元素
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格: table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
伸缩项目
多列容器
column-span 为 all 的元素(即使该元素没有包裹在多列容器中)
display 的值,设置为 flow-root