02css定位12
day12
Html中的三种布局方式
标准流
浮动
定位
两大元素
1.块级元素
2.内联元素
css中的float
参数：left right none inherit(继承浮动)
实现文字环绕图片
一旦我们给元素float就会变成块状元素（脱离正常的文档流）
float会脱离正常的标准流使父元素检测不到子元素的高度
但其他元素还能知道
解决方法：
1.收的那个给父元素添加高度
2.通过clear清楚内部和外部浮动
3.给父元素添加overfloat属性并结合zoom:1使用
4.给父元素添加浮动
clear属性
参数：left none right both
css中的position
position属性决定了元素讲如何定位
通过top,right,bottom,left实现位置
position中的可选参数
static
relative（不脱离文档流）
absolute（脱离文档流）
fixed（固定定位）（脱离文档流）
应用场景：1.对联广告2.登录弹窗
不受制与父元素（absolute受制）
inherit（继承）
z-index
可以设置元素的叠加顺序，但依赖定位属性
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index为负值，元素被普通流中的元素覆盖
cursor:pointer 改变鼠标的形状
案例：
css定位案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .container{ 13 width: 100%; 14 height: 1000px; 15 background-color: #ccc; 16 font-family: "微软雅黑"; 17 } 18 19 .nav{ 20 width: 160px; 21 height: auto; 22 background-color: #565353; 23 position: absolute; 24 left: 0; 25 top: 30%; 26 } 27 28 .nav-li{ 29 width: 160px; 30 height: auto; 31 border-bottom: 1px solid #000; 32 line-height: 40px; 33 text-align: center; 34 cursor: pointer; 35 } 36 37 .tit{ 38 width: 160px; 39 height: 40px; 40 } 41 .nav-li ul{ 42 width: 160px; 43 height: auto; 44 display: none; 45 } 46 47 .nav-li ul li{ 48 width: 160px; 49 height: auto; 50 border-bottom: 1px dashed #000; 51 background-color: #fff; 52 position: relative; 53 } 54 55 .nav-li:hover ul{ 56 display: block; 57 } 58 59 .list3{ 60 width: 160px; 61 height: auto; 62 background-color: #8C8181; 63 display: none; 64 position: absolute; 65 left: 160px; 66 top: 0; 67 } 68 69 .listDm{ 70 width: 160px; 71 height: 40px; 72 border-bottom: 1px solid #000; 73 } 74 75 .nav-li ul li:hover .list3{ 76 display: block; 77 } 78 </style> 79 </head> 80 <body> 81 <div class="container"> 82 <div class="nav"> 83 <div class="nav-li"> 84 <div class="tit">慕课网的标题</div> 85 <ul> 86 <li>二级栏目 87 <div class="list3"> 88 <div class="listDm">三级栏目</div> 89 <div class="listDm">三级栏目</div> 90 <div class="listDm">三级栏目</div> 91 </div> 92 </li> 93 <li>二级栏目 94 <div class="list3"> 95 <div class="listDm">三级栏目</div> 96 <div class="listDm">三级栏目</div> 97 <div class="listDm">三级栏目</div> 98 </div> 99 </li> 100 <li>二级栏目 101 <div class="list3"> 102 <div class="listDm">三级栏目</div> 103 <div class="listDm">三级栏目</div> 104 <div class="listDm">三级栏目</div> 105 </div> 106 </li> 107 </ul> 108 </div> 109 <div class="nav-li">慕课网的标题</div> 110 <div class="nav-li">慕课网的标题</div> 111 <div class="nav-li">慕课网的标题</div> 112 <div class="nav-li">慕课网的标题</div> 113 </div> 114 </div> 115 </body> 116 </html>
