1、相对单位
浏览器的默认字体大小是16px
em 参考点
相对于当前元素的父元素中的字体大小
rem
相对于根元素html中字体的大小
%
相对于父元素的大小
2、盒子模型
浏览器页面中每一个元素都可以被当做一个‘盒子’
（1）组成
width 元素内容的宽度
height 元素内容的高度
padding 元素内容与边框的距离
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
速写
padding:1px 2px 3px 4px;
padding:1px 2px 3pxx;
padding:1px 2px;
padding:1px;
border 元素的边框
margin 元素与其他元素之间的距离
（2）分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子分类</title>
</head>
<style>
.one {
height: 100px;
width: 100px;
border: 10px solid #333;
padding: 20px;
margin: 30px;
box-sizing: border-box;
}
.two {
height: 100px;
width: 100px;
border: 10px solid #333;
padding: 20px;
margin: 30px;
box-sizing: content-box;
}
</style>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
（3）计算
参考上面代码
(4)背景
background-color 背景色
background-image 背景图片
background-size 背景图的尺寸
background-repeat 背景图的重复方式
background-position 背景图的位置
background-clip 背景图
3、布局
（1）默认文档流
1、页面元素出现的顺序与该元素在html文件中代码出现的顺序一致
2、块级元素独占一行空间
3、行内元素可以与其他元素共享一行空间
由于默认文档流满足不了所有需求，所以需要采用其他的布局方式
（2）浮动布局
用法：
为了让块级元素在一行显示
语法：
float:left/right
特点：
1、脱离了默认文档流
2、浮动布局的元素会从左往右依次布局，直到所有的浮动元素的宽度之和超出了父元素的宽度，才换到下一行继续布局
3、浮动元素会失去父元素的支撑【清除浮动】
4、浮动元素会失去默认的宽度
4、overflow 对超出的内容区域进行处理
auto
根据元素是否超出添加滚动条
超出-----添加滚动条
不超出---不添加滚动条
scroll
给父元素直接添加滚动条，不论子元素是否超出父元素
hidden
将超出父元素的内容隐藏【不显示】
5、文本样式
font-
font-size 字体大小
font-weight 字体粗细
font-family 字体族
font-face 网络字体
color 字体颜色
text-
text-algin 文字的排布方式
left、center、right
text-decoration 文字线的修饰
overline 上划线
underline 下滑线
line-through 删除线
text-transform 文字变形
6、定位布局
当元素使用了定位属性position之后，可以使用left、top、right、bottom来描述元素的位置
（1）静态布局【默认值】
position：static；
（2）相对定位
参考点：相对于当前元素原本的位置
position：relative；
（3）绝对定位
参考点：相对于当前元素父【祖先级】定位元素来描述位置，当祖先级元素都不是定位元素的时候，相对于浏览器视口进行定位
position：absolute；
7、粘滞布局
position:sticky;
相对定位 + 固定定位
阈值 top:50px;
大于 相对定位
小于 绝对定位
8、伸缩盒 在移动端进行布局
（1）语法
display：flex;
（2）父元素的样式
display:flex; 将盒子设置为伸缩盒
flex-direction 弹性元素排布的方向
row 弹性元素在横向方向（x）上排布【默认值】
column 弹性元素在纵方向（y）上排布
justify-content:center; 主轴方向的对齐方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布
align-items: center; 交叉轴方向的对齐方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布
（3）子元素的样式
flex 弹性元素对于伸缩盒剩余空间
9、动画
随着时间的推移动态的改变css的样式属性
（1）语法【组成】
animation 动画的配置
@keyframes 动画的关键帧
（2）属性 例如：
/* 动画的名称 */
animation-name: move;
/* 动画持续的时间 */
animation-duration: 1s;
/* 动画的填充模式 当前div在动画结束时显示的位置
forwards 元素在动画最后一帧的位置显示
backwords 元素在动画结束后回到开始的位置【默认值】
前提：动画的执行次数是有限的
*/
animation-fill-mode: forwards;
/* 动画执行次数 */
animation-iteration-count: 2;
/* 动画的速度
linear 匀速
ease 先快后慢
ease-in 先慢后快 */
animation-timing-function: linear;
/* 动画的延迟时间 */
animation-delay: 2s;
/* 动画的方向 */
animation-direction: alternate;
/* 速写 */
/* animation: move duration timing-function delay iteration-count direction fill-mode; */
/* 动画的状态
pasued 暂停
running 执行 */
animation-play-state: paused;
/* 1、动画的定义
@keyframes css固定语法
move 动画的名称，可以自定义
from 动画的开始时间
to 动画的结束时间
*/
@keyframes move {
from{
left: 0;
}
to{
left: calc(100% - 100px);;
}
}
10、过渡
提供了一种在更改css属性的控制动画速度的方法
（1）语法
transition：property duration timing-function delay;
property 需要添加过渡的属性
duration 过渡的时间
timing-function 过渡的速度
delay 过渡的延迟
（2）和动画的区别
动画是不需要触发前提的，在页面打开时，就可以显示动态效果
过渡是需要手动触发的
（4）可过度的属性
有些属性不能添加过渡，即使添加了也没有效果
display属性不可添加过渡属性
11、变形
（1）语法
div {
transform：xxx（）;
transform-origin: center;
}
xxx()是一个变形函数，可以操控元素以什么样的方式进行变形
transform-origin 元素发生变形时的原点
（2）旋转
rotateX（deg） 以X轴为定点轴，旋转元素
rotateY（deg）
rotateZ（deg）
（3）倾斜
skewX（deg） 以x轴为定点轴，倾斜元素
skewY（deg） 以y轴为定点轴，倾斜元素
skewZ（deg） 以z轴为定点轴，倾斜元素
（4）缩放
scale（n1,n2）x轴缩放n1倍，y轴缩放n2倍
12、媒体查询
实现响应式布局，在不同尺寸的页面中，项目展示的效果不同
3269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
