DAY1→HTML1-29
DAY2→HTML29-53
DAY3→HTML&CSS53-79
DAY4→CSS79-108
DAY5→CSS108-133
接DAY5内容 56.浮动
（二）元素浮动后的特点
1.脱离文档流
2.无论浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
3.不会独占一行，可以与其他元素共用一行
4.不会margin合并，margin塌陷，能够完美的设置四个方向的margin和padding
5.不会像行内块一样被当作文本处理（没有行内块的空白问题，即紧贴）
（三）浮动后的影响
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><divclass="outer"><divclass="box box1">1</div><divclass="box box2">2</div><divclass="box box3">3</div><divclass="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><metacharset="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><divclass="container"><!-- 头部 --><divclass="page-header clearfix"><divclass="logo leftfix">logo</div><divclass="banner1 leftfix">banner1</div><divclass="banner2 leftfix">banner2</div></div><!-- 菜单 --><divclass="manu">菜单</div><!-- 内容区 --><divclass="content clearfix"><!-- 左侧 --><divclass="left leftfix"><divclass="top clearfix"><divclass="item1 leftfix">栏目一</div><divclass="item2 leftfix">栏目二</div></div><divclass="bottom clearfix"><divclass="item3 leftfix">栏目三</div><divclass="item4 leftfix">栏目四</div><divclass="item5 leftfix">栏目五</div><divclass="item6 leftfix">栏目六</div></div></div><!-- 右侧,由于在同一列内，不需要浮空 --><divclass="right rightfix"><divclass="item7">栏目七</div><divclass="item8">栏目八</div><divclass="item9">栏目九</div></div></div><!-- 页脚 --><divclass="footer">页脚</div></div></body>57.定位
（一）相对定位：相对自己原来的位置
position:relative;left/right/top/bottom:200px;注：
不会脱离文档流，不对其他元素产生影响，定位显示层级比普通元素高
定位元素中，后写的元素会盖在先写的元素之上
绝大数情况下，相对定位会和绝对定位配合使用；相对定位的元素，能浮动，也能通过margin调整位置
（二）绝对定位：参考它的包含块
包含块：
（1）对于没有脱离文档流的元素：包含块就是父元素；
（2）对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素，否则为整个页面
position:absolute;left/right/top/bottom:200px;注：
脱离文档流，会对后面的兄弟元素，父元素有影响
绝对定位和浮动不能同时设置，否则以定位为主；也能通过margin调整位置
无论是什么元素（行内块，行内，块级）设置为绝对定位之后，都变成了定位元素
定位元素：默认宽、高都被内容所撑开，且能自由设置宽高
（三）固定定位：参考它的视口（网页的“窗户”）
position:fixed;left/right/top/bottom:200px;注意事项同上
（四）粘性定位：参考点：离他最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先
position:sticky;left/right/top(最常用)/bottom:0px;/*设置滚动条的方法，height小于子元素*/height:100px;overfolw:auto;注：
不会脱离文档流，它是专门用于窗口滚动时的新的定位方式
最常用的值是top值粘性定位的元素，能浮动，也能通过margin调整位置
（五）定位的层级
（1）定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
（2）如果位置发生重叠，默认情况是：后面的元素会显示在前面的元素之上
（3）可以通过z-index调整元素显示层级，属性值为数字，无单位，值越大显示层级越高
（4）只有定位的元素设置z-index才有效
（5）若z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级
注：定位可以越过padding
（六）定位的特殊运用**(只针对绝对定位和固定定位)**
运用1：让定位元素的宽充满包含块
1.块宽想与包含块一致，可以给定位元素同时设置left和right为0
2.高度想与包含块一致，top和bottom设置为0
运用2：让定位元素在包含块居中（该定位元素必须设置高与宽）
方案一：
left:0;right:0;top:0;bottom:0;margin:auto;方案二：
left:50%;top:50%;margin-left:负的宽度的一半;margin-top:负的高度的一半;58.布局
（一）版心
在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
版心的宽度一般是960~1200px之间，版心可以是一个，也可以是多个
（二）常用布局名词
（三）重置默认样式
默认样式详细内容看55.盒子模型（十三）元素的默认样式
方案一：使用全局选择器
*{margin:0;padding:0;......}方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式
方案三：Normalize.css
最新方案，在清空默认样式的基础上，保留了一些有价值的默认样式
官网：http://necolas.github.io/normalize.css/
59.动画
（一）关键帧：在构成一段动画的若干帧中起到决定性的作用的2、3帧
（二）基本使用
写法一为from{...}to{...}
写法二为完整方式，百分比
@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%;}}（三）给元素应用动画，用到的属性如下：
1.给元素指定具体的动画（具体的关键帧，即（二））animation-name: 动画名
2.设置动画所需时间animation-duration: 3s
3.设置动画延迟时间animation-delay: 0.2s
（四）其他属性
1.设置动画的方式animation-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，指定每一步的值发生变化的时间点。第二个参数默认值为endcubic-bezie（number，number，number，number）特定的贝塞尔曲线类型
2.指定动画的播放次数animation-iteration-count: infinite;
常用值：number：动画循环次数infinite：无限循环
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%为圆形
作业
