全文手打,转载请注明出处
全文手打,转载请注明出处
全文手打,转载请注明出处
一)定位
定位position:设定元素在文档中的位置,会将标签(元素)转换为块级
定位分类:
static:静态定位(默认值,没有定位,不能设置偏移值left/top/right/bottom,占用标准流/文档流)
relative:相对定位(占用标准流/文档流,它会出现在文档流中它该出现的位置,可以通过设置偏移值改变其位置)相对定位是父级
absolute:绝对定位(脱离文档流,相对于body做偏移)绝对定位与相对定位结合使用,相对的是relative定义的元素做偏移,绝对定位是子级
fixed:固定定位(脱离文档流,相对于浏览器窗口左上角做偏移),一般在开发中用来固定导航栏
.wrapper{ width: 600px; height: 400px; border:1px soild #888; margin: 0 auto; } .box1,.box2,.box3{ width: 150px; height: 150px; border:1px dotted red; display: inline-block; } .box2{ //position: static; //设置为static,不识别left,top position: relative; //可以,相对于原来的占位做偏移 position: absolute; //脱离文档流,相对于body进行偏移
position: fixed;
left: 100px; top: 200px; } <div class="wrapper"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div>
二)z-index调整显示顺序
当多个元素添加绝对定位,元素会叠加在一起,使用z-index可以设置元素显示的层次,用在static和relative元素上是无效的
文档流默认的z-index值为0
.box1,.box2,.box3{ position: absolute; //绝对定位 } .box1{ z-index: 3; } .box2{ z-index: 2; } .box3{ z-index: 1; } //重叠顺序,box1最上面
网站开发策略:先整体再局部,自顶向下,逐步细化
三)双飞翼布局:三列组成,两端固定,中间自适应
.container{ width: 100%; } .column{ float:left; height: 200px; } .left{ width: 300px; background-color: red; margin-left: -100%; } .center{ width: 100%; background-color: red; } .right{ width: 300px; background-color: red; margin-left: -300px; } <div class="container"> <div class="column center"></div> <div class="column left"></div> <div class="column right"></div> </div>
四)圣杯布局:三列组成,两端固定,中间自适应(外观和双飞翼一样)
五)两栏布局,左宽度固定,右自定义
.container{ width: 100%; overflow: hidden; //清除浮动 } .left{ width: 150px; height: 200px; //实际开发不要给高度,高度由内容自行撑开 float: left; background-color: #999; margin-right: -150px; //让left向左挪150px,把right挪到同一行 position: relative; //让left占自己原来的位置,挡住部分right内容 } .right{ width: 100%; height: 200px; //实际开发不要给高度,高度由内容自行撑开 float: left; background-color: #090; margin-left: 150px; //把right左侧空出来left的宽度 } <div class="container"> <div class="left">左侧固定</div> <div class="right">右侧自适应</div> </div>
六)两栏布局,右宽度固定,左自定义
.container{ width: 100%; overflow: hidden; //清除浮动 } .left{ width: 100%; height: 200px; float: left; background-color: #090; } .right{ width: 150px; height: 200px; float: left; background-color: #999; margin-left: -150px; } <div class="container"> <div class="left">左侧自适应</div> <div class="right">右侧固定</div> </div>
七)两栏布局,左右都固定
.container{ width: 100%; overflow: hidden; //清除浮动 } .left{ width: 1000px; height: 200px; float: left; background-color: #090; } .right{ width: 780px; height: 200px; float: right; background-color: #999; margin-left: -150px; } <div class="container"> <div class="left">左侧固定</div> <div class="right">右侧固定</div> </div>
八)三栏布局,左、右固定,中间自适应
.container{ width: 100%; overflow: hidden; //清除浮动 } .left,.right{ width: 200px; height: 200px; line-height: 200px; //line-height:行高,,文字底部到上一行文字底部的距 float: left; background-color: #090; position: relative; } .left{ margin-right: -200px; } .right{ margin-left: -200px; } .center{ width: 100%; height: 200px; float: left; background-color: #999; } .content{ margin: 0 200px; } <div class="container"> <div class="left">左侧固定</div> <div class="center"> <div class="content">中间自适应</div> </div> <div class="right">右侧固定</div> </div>
九)三栏布局,中间、右固定,左自适应(自己发挥吧,你可以的)
十)三栏布局,左、中间固定,右自适应(自己发挥吧,你可以的)