56.浮动
（二）元素浮动后的特点
1.脱离文档流
2.无论浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
3.不会独占一行，可以与其他元素共用一行
4.不会margin合并，margin塌陷，能够完美的设置四个方向的margin和padding\n5.不会像行内块一样被当作文本处理（没有行内块的空白问题，即紧贴）
（三）浮动后的影响
1.对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的后面；对前面的兄弟无影响
2.对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依旧束缚浮动的元素
（四）解决浮动后的影响（注：行内块元素会环绕浮动元素；’ '为空内容）
<head> <style> .outer{ width: 500px; background-color: gray; border: 1px solid black; /* 解决方案一：父元素加高 */ /* height: 122px; */ /* 解决方案二：父元素浮空 */ /* float: left; */ /* 解决方案三：处理内容溢出，overflow */ /* overflow: hidden; */ } .box{ width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; margin: 10px; } .box1,.box2,.box3,.box4{ float:left } /* .magic{ */ /* 第四种解决方案：运用clear */ /* clear: both; */ /* } */ /* 第五种解决方案 */ .outer::after{ content: ''; display: block; clear: both; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <!-- <div class="magic"></div> --> </div> </body>方案一二三在上面注释中，一般不推荐使用
方案四：在所有浮动元素的最后面，添加一个块级元素，并给块级元素设置clear：both
方案五：给浮动元素的父元素设置伪元素，通过伪元素清除浮动的影响，原理与方案四相同
.outer::after{ content: ''; display: block; clear: both; }布局中的一个原则：设置浮动的时候，兄弟元素要么是全部浮动，要么全都不浮动
（五）布局练习
在一开始最好在style中写上以下代码来清除body的默认样式
*{ margin: 0; padding: 0; }准备工作：
.leftfix{ float: left; } .rightfix{ float: right; } .clearfix::after{ content: ''; display: block; clear: both; }<head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .leftfix{ float: left; } .rightfix{ float: right; } .clearfix::after{ content: ''; display: block; clear: both; } .container{ width: 960px; /* 可以临时给高度和背景颜色以便观察 */ /* height: 200px; */ /* background-color: grey; */ margin: 0 auto; text-align: center; } .logo{ width: 200px; } .banner1{ width: 540px; margin: 0 10px; } .banner2{ width: 200px; } .logo,.banner1,.banner2{ height: 80px; background-color: #ccc; line-height: 80px; } .manu{ height: 30px; background-color: #ccc; margin-top: 10px; line-height: 30px; } .item1,.item2{ width: 368px; height: 198px; border: 1px solid black; margin-right: 10px; line-height: 198px; } .content{ margin-top: 10px; } .item3,.item4,.item5,.item6{ width: 178px; height: 198px; border: 1px solid black; margin-right: 10px; line-height: 198px; } .bottom{ margin-top: 10px; } .item7,.item8,.item9{ width: 198px; height: 128px; border: 1px solid black; line-height: 128px; } .item8{ margin: 10px 0; } .footer{ height: 60px; background-color: #ccc; line-height: 60px; margin-top: 10px; } </style> </head> <body> <div class="container"> <!-- 头部 --> <div class="page-header clearfix"> <div class="logo leftfix">logo</div> <div class="banner1 leftfix">banner1</div> <div class="banner2 leftfix">banner2</div> </div> <!-- 菜单 --> <div class="manu">菜单</div> <!-- 内容区 --> <div class="content clearfix"> <!-- 左侧 --> <div class="left leftfix"> <div class="top clearfix"> <div class="item1 leftfix">栏目一</div> <div class="item2 leftfix">栏目二</div> </div> <div class="bottom clearfix"> <div class="item3 leftfix">栏目三</div> <div class="item4 leftfix">栏目四</div> <div class="item5 leftfix">栏目五</div> <div class="item6 leftfix">栏目六</div> </div> </div> <!-- 右侧,由于在同一列内，不需要浮空 --> <div class="right rightfix"> <div class="item7">栏目七</div> <div class="item8">栏目八</div> <div class="item9">栏目九</div> </div> </div> <!-- 页脚 --> <div class="footer">页脚</div> </div> </body>定位
（一）相对定位：相对自己原来的位置
position: relative; left/right/top/bottom: 200px;注：
不会脱离文档流，不对其他元素产生影响，定位显示层级比普通元素高
定位元素中，后写的元素会盖在先写的元素之上
绝大数情况下，相对定位会和绝对定位配合使用；相对定位的元素，能浮动，也能通过margin调整位置（后者不推荐使用）
（二）绝对定位：参考它的包含块
包含块：
（1）对于没有脱离文档流的元素：包含块就是父元素；
（2）对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素，否则为整个页面
position: absolute; left/right/top/bottom: 200px;注：
脱离文档流，会对后面的兄弟元素，父元素有影响
绝对定位和浮动不能同时设置，否则以定位为主；也能通过margin调整位置
无论是什么元素（行内块，行内，块级）设置为绝对定位之后，都变成了定位元素\n定位元素：默认宽、高都被内容所撑开，且能自由设置宽高
（三）固定定位：参考它的视口（网页的“窗户”）
position: fixed; left/right/top/bottom: 200px;注意事项同上
（四）粘性定位：参考点：离他最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先
position: sticky; left/right/top(最常用)/bottom: 0px; /*设置滚动条的方法，height小于子元素*/ height: 100px; overfolw: auto;注：
不会脱离文档流，它是专门用于窗口滚动时的新的定位方式\n最常用的值是top值\n粘性定位的元素，能浮动，也能通过margin调整位置
（五）定位的层级
（1）定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
（2）如果位置发生重叠，默认情况是：后面的元素会显示在前面的元素之上
（3）可以通过z-index调整元素显示层级，属性值为数字，无单位，值越大显示层级越高
（4）只有定位的元素设置z-index才有效
（5）若z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级
注：定位可以越过padding
（六）定位的特殊运用**(只针对绝对定位和固定定位)**
运用1：让定位元素的宽充满包含块
1.块宽想与包含块一致，可以给定位元素同时设置left和right为0
2.高度想与包含块一致，top和bottom设置为0\n运用2：让定位元素在包含块居中（该定位元素必须设置高与宽）
方案一：
left: 0; right: 0; top: 0; bottom: 0; margin: auto;方案二：
left: 50%; top: 50%; margin-left: 负的宽度的一半; margin-top: 负的高度的一半;58.布局
（一）版心
在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心\n版心的宽度一般是960~1200px之间，版心可以是一个，也可以是多个
（二）常用布局名词
（三）重置默认样式
默认样式详细内容看55.盒子模型（十三）元素的默认样式
方案一：使用全局选择器
*{ margin: 0; padding: 0; ...... }方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式
方案三：Normalize.css\n最新方案，在清空默认样式的基础上，保留了一些有价值的默认样式\n官网：http://necolas.github.io/normalize.css/
59.动画
（一）关键帧：在构成一段动画的若干帧中起到决定性的作用的2、3帧
（二）基本使用
@keyframes 动画名{ /* 第一帧 */ /* from{ */ 0%{/*可以无内容*/ } 29%{ background-color: red; } 48%{ background-color: yellow; } 66%{ background-color: blue; } 88%{ background-color: green; } /* 最后一帧 */ /* to{ */ 100%{ transform: translate(900px); background-color: orange; border-radius: 50%; } }写法一：为from{...}to{...}
写法二：为完整方式，百分比
（三）给元素应用动画，用到的属性如下：
1.给元素指定具体的动画（具体的关键帧，即（二））animation-name: 动画名
2.设置动画所需时间animation-duration: 3s\n3.设置动画延迟时间animation-delay: 0.2s\n\n（四）其他属性
1.设置动画的方式\nanimation-timing-function: linear;
常用值：
ease：平滑动画（默认值）
linear：线性过渡
ease-in：慢→快
ease-out：快→慢
ease-in-out：慢→快→慢
step-start：等同于steps（1，start）
step-end：等同于steps（1，end）
steps（intrger，？）：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end\ncubic-bezie（number，number，number，number）特定的贝塞尔曲线类型
2.指定动画的播放次数
animation-iteration-count: infinite;
常用值：
number：动画循环次数\ninfinite：无限循环
3.指定动画方向
animation-direction: alternate;
常用值：
normal：正常方向
reverse：反方向进行
alternat：动画先正常运行在反方向运行，并持续交替运行
altern-reverse：动画先反运行再正方向运行，并持续交替运行
4.设置动画之外的状态（即不发生动画的时候在哪里）
animation-fill-mode: forwards;
常用值：
forwards设置对象状态为动画结束时的状态
backwards设置对话状态为动画开始时的状态
5.设置动画的播放状态（一般与: hover混合使用）
animation-play-state: paused;
常用值：
running运动（默认）
paused暂停
（五）复合属性
animation: 动画名 3s 0.2s linear infinite alternate-reverse forwards;
注：只设置一个时间表示duration，设置两个时间分别为duration和delay，其他属性没有数量和顺序要求
animation-play-state:一般单独使用
60.多列布局
（1）直接指定列数：
column-count: 5; / column: 5;
（2）指定每一列的宽度，会自动计算列数
column-width: 220px;
（3）复合属性(不推荐使用)
column: 6 220px;
（4）调整列间距
column-gap: 20px;
（5）每一列边框宽度
column-rule-width: 2px
（6）每一列边框风格（与border-style一致，详见55.盒子模型（五）盒子的边框bolder）
column-rule-style: dashed
（7）每一列边框颜色
column-rule-color: red
（8）边框相关复合属性
column-rule: 2px dashed red
（9）指定是否跨列（精确找到h1）
column-span: none/all;
（10）针对图片,最好用以下代码
img{ width: 100%; }补充：border-radius: 50%为圆形
