DAY1→HTML1-29DAY2→HTML29-53DAY3→HTMLCSS53-79DAY4→CSS79-108DAY5→CSS108-133接DAY5内容 56.浮动二元素浮动后的特点1.脱离文档流2.无论浮动前是什么元素浮动后的默认宽与高都是被内容撑开尽可能小而且可以设置宽高3.不会独占一行可以与其他元素共用一行4.不会margin合并margin塌陷能够完美的设置四个方向的margin和padding5.不会像行内块一样被当作文本处理没有行内块的空白问题即紧贴三浮动后的影响1.对兄弟元素的影响后面的兄弟元素会占据浮动元素之前的位置在浮动元素的后面对前面的兄弟无影响2.对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依旧束缚浮动的元素四解决浮动后的影响注行内块元素会环绕浮动元素’ 为空内容headstyle.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/headbodydivclassouterdivclassbox box11/divdivclassbox box22/divdivclassbox box33/divdivclassbox box44/div!-- div classmagic/div --/div/body方案一二三在上面注释中一般不推荐使用方案四在所有浮动元素的最后面添加一个块级元素并给块级元素设置clearboth方案五给浮动元素的父元素设置伪元素通过伪元素清除浮动的影响原理与方案四相同.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;}headmetacharsetUTF-8titleDocument/titlestyle*{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/headbodydivclasscontainer!-- 头部 --divclasspage-header clearfixdivclasslogo leftfixlogo/divdivclassbanner1 leftfixbanner1/divdivclassbanner2 leftfixbanner2/div/div!-- 菜单 --divclassmanu菜单/div!-- 内容区 --divclasscontent clearfix!-- 左侧 --divclassleft leftfixdivclasstop clearfixdivclassitem1 leftfix栏目一/divdivclassitem2 leftfix栏目二/div/divdivclassbottom clearfixdivclassitem3 leftfix栏目三/divdivclassitem4 leftfix栏目四/divdivclassitem5 leftfix栏目五/divdivclassitem6 leftfix栏目六/div/div/div!-- 右侧,由于在同一列内不需要浮空 --divclassright rightfixdivclassitem7栏目七/divdivclassitem8栏目八/divdivclassitem9栏目九/div/div/div!-- 页脚 --divclassfooter页脚/div/div/body57.定位一相对定位相对自己原来的位置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为02.高度想与包含块一致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: 3s3.设置动画延迟时间animation-delay: 0.2s四其他属性1.设置动画的方式animation-timing-function: linear;常用值ease平滑动画默认值linear线性过渡ease-in慢→快ease-out快→慢ease-in-out慢→快→慢step-start等同于steps1startstep-end等同于steps1endstepsintrger接受两个参数的步进函数。第一个参数必须为正整数指定函数的步数。第二个参数取值可以是start或end指定每一步的值发生变化的时间点。第二个参数默认值为endcubic-bezienumbernumbernumbernumber特定的贝塞尔曲线类型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: 2px6每一列边框风格与border-style一致详见55.盒子模型五盒子的边框boldercolumn-rule-style: dashed7每一列边框颜色column-rule-color: red8边框相关复合属性column-rule: 2px dashed red9指定是否跨列精确找到h1column-span: none/all;10针对图片,最好用以下代码img{width:100%;}补充border-radius: 50%为圆形作业