浮动
为何需要浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
浮动问题？
为何要清除浮动？
很多情况下父盒子不方便给高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .clear { clear: both; /*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 --> </div> <div class="footer"></div> </body> </html>
额外标签法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 200px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .clear { clear: both; /*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 --> </div> <div class="footer"></div> </body> </html>
overflow 清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 180px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .father { border: 1px solid red; width: 300px; overflow: hidden; /*别加错位置了，给 父亲加*/ /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/ } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用after伪元素清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } .clearfix:after { /*正常浏览器 清除浮动*/ content:""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/ } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
使用before和after双伪元素清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .father { border: 1px solid red; width: 300px; } .big { width: 100px; height: 100px; background-color: purple; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 400px; height: 100px; background-color: pink; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
<ul><li>布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .service-bd { margin-top: 40px; } .service-bd li { width: 200px; height: 200px; background-color: #ffd800; float: left; border: 1px solid #e7e8e9; } .yingxiao { margin: 0 45px; } </style> </head> <body> <div class="service-bd"> <ul> <li></li> <li class="yingxiao"></li> <li></li> </ul> </div> </body> </html>
取消li 的小点
li { list-style: none; /* 取消li 的小点 */ }
相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } .top { position: relative;/*相对定位*/ top: 100px; left: 100px; } .bottom { background-color: red; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
相对定位和浮动的区别：相对定位后原来的位置还继续保留，浮动后原来的位置不继续保留。
定位使用：top、bottom、left、right 切不可混用margin-top
绝对定位
position: absolute;
1.绝不占位置，跟浮动一样。
2.绝对定位是将元素依据最近的已经定位的父元素（祖先）进行定位。
父亲没定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; height: 500px; background-color: pink; margin: 100px; } .son { width: 200px; height: 200px; background-color: purple; position: absolute; top: 50px; left: 50px; /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/ } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
父亲有定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .yeye { width: 800px; height: 800px; background-color: skyblue; position: absolute; } .father { width: 500px; height: 500px; background-color: pink; margin: 100px; /*position: absolute;*/ } .son { width: 200px; height: 200px; background-color: purple; position: absolute; top: 50px; left: 50px; /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/ } </style> </head> <body> <div class="yeye"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>
子绝对定位父相对定位
给儿子绝对定位：不占有原来的位置，才能压住别人
给父亲相对定位：占有原来的位置
子绝父绝带来的问题：由于绝对定位不占用位置，当给父亲绝对定位时，下面的div元素会占用父亲的位置。
子绝父相是最合适的搭配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 310px; height: 190px; border: 1px solid #ccc; margin: 100px auto; padding: 10px; position: relative; } .top { position: absolute; top: 0; left: 0; } .bottom { position: absolute; right: 0; bottom: 0; } </style> </head> <body> <div> <img src="images/top_tu.gif" alt="" class="top"> <img src="images/br.gif" alt="" class="bottom"> <img src="images/adv.jpg" height="190" width="310" alt=""> </div> </body> </html>
定位和浮动
加了定位 浮动的的盒子 margin 0 auto 失效了
/*margin: 100px auto;*/ /*float: left;*/ position: absolute; /*加了定位 浮动的的盒子 margin 0 auto 失效了*/
加了定位的盒子居中对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; /*margin: 100px auto;*/ /*float: left;*/ position: absolute; /*加了定位 浮动的的盒子 margin 0 auto 失效了*/ left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } </style> </head> <body> <div></div> </body> </html>
实战练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> * { margin: 0; padding: 0; } li { list-style: none; /* 取消li 的小点 */ } .father { width: 1259px; height: 472px; margin: 100px auto; background-color: red; position: relative; } .son { width: 960px; height: 80px; background-color: #000; position: absolute; bottom: 0; left: 50%; margin-left: -480px; } .son li { float: left; width: 160px; height: 80px; } .son li a { width: 160px; height: 80px; display: block; text-align: center; line-height: 80px; color: #fff; text-decoration: none; } .son li a:hover { background-color: #fff; color: #000; } </style> <body> <div class="father"> <div class="son"> <ul> <li><a href="#">快递查询</a></li> <li><a href="#">快递查询</a></li> <li><a href="#">快递查询</a></li> <li><a href="#">快递查询</a></li> <li><a href="#">快递查询</a></li> <li><a href="#">快递查询</a></li> </ul> </div> </div> </body> </html>
CSS的margin: 7px auto 含义是什么？
顺序为：上、右、下、左；（顺时针）
淘宝轮播图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .tb { width: 520px; height: 280px; background-color: pink; margin: 100px auto;/* 顺序为：上、右、下、左；*/ position: relative;/* 父相对定位*/ } .tb a { width: 24px; height: 36px; display: block; position: absolute;/* 子绝对定位*/ top: 50%; margin-top: -18px; } .left { left: 0; background: url(images/left.png) no-repeat; } .right { right: 0; background: url(images/right.png) no-repeat; } .tb ul { width: 70px; height: 13px; background: rgba(255, 255, 255, .3); position: absolute; /* 子绝对定位*/ bottom: 18px; left: 50%; /*水平走父容器的一半*/ margin-left: -35px; /*左走自己的一半*/ border-radius: 8px; } .tb ul li { width: 8px; height: 8px; background-color: #fff; float: left; margin: 3px; border-radius: 50%; } .tb .current { background-color: #f40; } </style> </head> <body> <div class="tb"> <img src="images/tb.jpg" > <a href="#" class="left"></a> <a href="#" class="right"></a> <ul> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
固定定位
.ad {
200px;
height: 200px;
background-color: pink;
position: fixed; /*固定定位*/
left: 0;
top: 100px;
}
z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: red; position: absolute; /*z-index: 0; 只有定位的盒子才有*/ } .red { z-index: 1; } .blue { background-color: blue; left: 50px; top: 50px; z-index: 2; } .green { background-color: green; left: 100px; top: 100px; z-index: 999; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 250px; height: 400px; border: 1px solid #ccc; float: left; margin-left: -1px; position: relative; /*z-index: 0;*/ } div:hover { border: 1px solid #f40; /*position: relative; 相对定位比标准流高一级 浮在上面的*/ z-index: 1; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
小结
