10.61.浮动介绍float属性初衷实现文字环绕图片后来用来做多列横向布局取值left向左浮动、right向右浮动、none不浮动。2.浮动特点浮动元素脱离标准文档流不再占据原来的位置浮动元素会贴紧前面浮动盒子浮动只影响后面元素不影响前面标准流盒子浮动元素自动变成行内块特性可以设置宽高。3.浮动带来的问题高度塌陷父盒子没有设置高度内部子元素全部浮动脱离文档流父盒子高度变成0后面标准流布局会往上跑布局错乱。4.清除浮动四种方案1.额外标签法在所有浮动子元素最后加空divclear:both简单但是增加无意义标签不推荐。2.父盒子overflow:hidden简单无法展示子元素溢出内容。3.伪元素清除浮动企业主流给父类加clearfix::after伪元素clear:both解决高度塌陷不增加多余标签。4.双伪元素clearfix同时解决父子margin塌陷浮动高度塌陷。5.浮动布局练习导航栏、商品列表经典横向导航ul li浮动做导航菜单hover切换背景色。第六部分 定位 Position6.定位基础position属性配合top、left、right、bottom偏移量可以把盒子精准摆放到页面任意位置叠加层级。7.静态定位 static默认值就是标准文档流top/left无效几乎不用。8.相对定位 relative相对于自己原本标准流的位置偏移不脱离文档流原来的空间继续保留常用作为绝对定位父级子绝父相。9.绝对定位 absolute相对于最近一个开启了定位非static的父元素如果没有定位父级相对于整个文档根html脱离文档流原来位置释放不占空间。核心口诀子绝父相。10.固定定位 fixed相对于浏览器视口窗口定位页面滚动盒子固定在屏幕不动脱离文档流常用于回到顶部按钮、侧边悬浮客服。11.粘性定位 stickyCSS3relative和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。