一、清除浮动
1.1.浮动的问题
- 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
- 解决父元素高度坍塌问题，一般叫做清浮动(清理浮动、清除浮动)
- 清浮动的目的是
- 让父元素计算总高度的适合，把浮动子元素的高度算进去
1.2.清浮动的常见办法
-
给父元素设置固定高度
- 扩展性不好(不推荐)
-
给父元素最后增加一个空的块级子元素，并且让它设置clear:both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则(不推荐)
-
在父元素最后增加一个br标签：<br clear="all">
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则(不推荐)
1.3.CSS属性-clear
-
clear的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
-
一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠
1.4.定位方案对比
- normal flow(标准流)：垂直布局
- absolute positioning(绝对定位)：层叠布局
- float(浮动)：水平布局
二、形变和动画
2.1.transform
- CSS transform属性允许你旋转，缩放，倾斜或平移给定元素
- Transform是形变的意思，transformer就是变形金刚
- 常见的函数有transform function有：
- 平移：translate(x,y)
- 缩放：scale(x,y)
- 旋转：rotate(deg)
- 倾斜：skew(deg,deg)
2.2.位移 - translate
-
平移：translate(x,y)
-
值个数：
- 一个值时，设置x轴上的位移
- 两个值时，设置x轴和y轴上的位移
-
值类型：
- 数字：100px
- 百分比：参照元素本身(refer to the size of bounding box)
-
2.3.缩放 - scale
-
缩放：scale(x,y)
-
值个数：
- 一个值时，设置x轴和y轴上相同的缩放
- 两个值时，设置x轴和y轴上的缩放
-
值类型：
-
数字：
- 1：保持不变
- 2：放大一倍
- 0.5：缩小一半
-
百分比：不支持百分比
-
2.4.transform-origin
-
transform-origin：变形的原点
-
一个值：
- 设置x轴的原点
-
两个值：
- 设置x轴和y轴的原点
-
必须是<length>，<percentage>，或left，center，right，top，bottom关键字中的一个：
- left，center，right，top，bottom关键字
- length：从左上角开始计算
- 百分比：参考元素本身的大小
2.5.旋转 - rotate
-
旋转：rotate(deg)
-
值个数：
- 一个值时，表示旋转的角度
-
值类型：
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
-
注意：旋转的原点受transform-origin的影响
2.6.倾斜 - skew
-
倾斜：skew(x,y)
-
值个数：
- 一个值时，表示x轴上的倾斜
- 两个值时，表示x轴和y轴上的倾斜
-
值类型：
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
-
注意：旋转的原点受transform-origin的影响
2.7.过渡动画 - transition
-
transition CSS属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性
-
transition-property：指定应用过渡属性的名称
- 可以用all表示所有可动画的属性
- 属性是否支持动画查看文档
-
transition-duration：指定过渡动画所需的时间
- 单位可以是秒(s)或毫秒(ms)
-
ransition-timing-function：指定动画的变化曲线
-
transition-delay：指定过渡动画执行之前的等待时间
三、CSS属性 - vertical-align
3.1.不同的取值
- baseline(默认值)：基线对齐
- top：把行内级盒子的顶部跟line boxes顶部对齐
- middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
- bottom：把行内级盒子的底部跟line box底部对齐
- <percentage>：把行内级盒子提升或者下降一段距离(距离相对于line-height计算\元素高度)，0%意味着同baseline一样
- <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
