一.浮动简介一开始是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一float元素浮动后的特点1.脱离文档流好比新建一个图层2.无论浮动前是什么元素浮动后的默认宽与高都是被内容撑开尽可能小而且可以设置宽高3.不会独占一行可以与其他元素共用一行4.不会margin合并 margin塌陷能够完美的设置四个方向的margin和padding5.不会像行内块一样被当作文本处理没有行内块的空白问题即紧贴浮动后的影响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 classouter div classbox box11/div div classbox box22/div div classbox box33/div div classbox box44/div !-- div classmagic/div -- /div /body布局中的一个原则设置浮动的时候兄弟元素要么是全部浮动要么全都不浮动在一开始最好在style中写上以下代码来清除body的默认样式*{ margin: 0; padding: 0; } 准备 .leftfix{ float: left; } .rightfix{ float: right; } .clearfix::after{ content: ; display: block; clear: both; }二.定位相对定位相对自己原来的位置position: relative; left/right/top/bottom: 200px;绝对定位参考它的包含块包含块1对于没有脱离文档流的元素包含块就是父元素2对于脱离文档流的元素包含块是第一个拥有定位属性的祖先元素否则为整个页面position: absolute; left/right/top/bottom: 200px;固定定位参考它的视口网页的“窗户”position: fixed; left/right/top/bottom: 200px;粘性定位参考点离他最近的一个拥有“滚动机制”的祖先元素即便这个祖先不是最近的真实可滚动祖先position: sticky; left/right/top(最常用)/bottom: 0px; /*设置滚动条的方法height小于子元素*/ height: 100px; overfolw: auto;定位的层级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: 负的高度的一半;布局一版心在PC端网页中一般都会有一个固定宽度且水平居中的盒子来显示网页的主要内容这是网页的版心版心的宽度一般是960~1200px之间版心可以是一个也可以是多个二常用布局名词三重置默认样式默认样式详细内容看55.盒子模型十三元素的默认样式方案一使用全局选择器*{ margin: 0; padding: 0; ...... }方案二reset.css选择到具有默认样式的元素清空其默认的样式方案三Normalize.css最新方案在清空默认样式的基础上保留了一些有价值的默认样式官网http ://necolas.github.io/normalize.css/