企业官网建设流程全解析

10.6

1.浮动介绍

float属性初衷：实现文字环绕图片；后来用来做多列横向布局；取值left向左浮动、right向右浮动、none不浮动。

2.浮动特点

浮动元素脱离标准文档流，不再占据原来的位置；浮动元素会贴紧前面浮动盒子；浮动只影响后面元素，不影响前面标准流盒子；浮动元素自动变成行内块特性，可以设置宽高。

3.浮动带来的问题：高度塌陷

父盒子没有设置高度，内部子元素全部浮动脱离文档流，父盒子高度变成0，后面标准流布局会往上跑，布局错乱。

4.清除浮动四种方案1.额外标签法：在所有浮动子元素最后，加空div，clear:both；简单但是增加无意义标签，不推荐。

2.父盒子overflow:hidden；简单，无法展示子元素溢出内容。

3.伪元素清除浮动（企业主流）：给父类加clearfix，::after伪元素，clear:both，解决高度塌陷，不增加多余标签。

4.双伪元素clearfix，同时解决父子margin塌陷+浮动高度塌陷。

5.浮动布局练习：导航栏、商品列表

经典横向导航，ul li浮动做导航菜单，hover切换背景色。

第六部分 定位 Position

6.定位基础

position属性，配合top、left、right、bottom偏移量；可以把盒子精准摆放到页面任意位置，叠加层级。

7.静态定位 static

默认值，就是标准文档流，top/left无效，几乎不用。

8.相对定位 relative

相对于自己原本标准流的位置偏移；不脱离文档流，原来的空间继续保留；常用：作为绝对定位父级（子绝父相）。

9.绝对定位 absolute

相对于最近一个开启了定位（非static）的父元素；如果没有定位父级，相对于整个文档根html；脱离文档流，原来位置释放，不占空间。核心口诀：子绝父相。

10.固定定位 fixed

相对于浏览器视口窗口定位；页面滚动，盒子固定在屏幕不动；脱离文档流；常用于回到顶部按钮、侧边悬浮客服。

11.粘性定位 sticky（CSS3）

relative和fixed结合；在滚动到阈值之前是相对定位，到达阈值变成固定定位；常用于顶部吸顶导航。

12.定位层级 z-index

只有开启定位的元素z-index才生效；数值越大层级越高，压在上面；默认auto；只能控制兄弟定位元素之间的上下堆叠。

13.定位水平垂直居中

绝对定位经典居中方案：top:50%; left:50%; transform:translate(-50%,-50%)。

14.transform 2D变换
translate位移、scale缩放、rotate旋转、skew倾斜；可以组合多个变换；注意transform原点transform-origin。
15.transition过渡
让样式变化从瞬间变成平滑动画；属性：过渡属性、过渡时长、缓动函数、延迟；一般配合hover使用。
16.animation关键帧动画
@keyframes定义动画过程；animation调用动画，可以设置循环次数、反向播放、暂停；可以做持续自动动画（轮播图loading）。