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>02css定位12
原文地址：https://www.cnblogs.com/shink1117/p/8446569.html