潭州学院html学习（day08）
一.浮动
浮动是css布局里面用的最多的属性
浮动：使元素脱离文档流，按照指定方向（左右）发生移动，遇到父边界或者相邻的浮动元素停了下来。
文档流： 是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。
脱离文档流： 在页面中不占位置 ，CSS 中通过 float 属性实现元素的浮动
排列规则：
1. 第一个浮动元素遇到父级边缘的时候停止浮动。
2. 其它元素在横向遇见相邻浮动元素的时候停止
3. 当父元素宽度不够时在下一排排列。但是，在换行的过程中有元素高度比换行前相邻元素的高的时候，元素就会被“卡”住。
现有两个div，他们的属性如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动概括</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 ul,ol{list-style: none;} 9 a{text-decoration: none;color: inherit;} 10 .box1{ 11 background-color: red; 12 width:100px; 13 height:100px; 14 } 15 .box2{ 16 background-color: yellow; 17 width:100px; 18 height:100px; 19 20 } 21 .box3{ 22 background-color: blue; 23 width:100px; 24 height:100px; 25 26 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box1">box1</div> 32 <div class="box2">box2</div> 33 34 </body> 35 </html>
效果：
给他们的div增加浮动属性，如：float:left，效果如下，
.box1{
background-color: red;
width:100px;
height:100px;
float: left;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
float: left;
}
这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了
浮动的元素脱离
.box1{
background-color: red;
width:100px;
height:100px;
float: left;
}
.box2{
background-color: yellow;
width:200px;
height:200px;
}
红色的盒子box1有属性float:left，黄色的盒子没有属性float，box1脱离文档流，所以box2就是标准文档流中的第一个盒子，所以box1就附着在上面。
浮动的元素互相贴靠
我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
.box1{
background-color: red;
width:300px;
height:100px;
float: left;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
float: left;
}
.box3{
background: green;
width:200px;
height: 100px;
float:left;
}
宽高特性：
a、无论什么类型的元素，只要浮动就支持设置宽高，但是当未设置宽高时由内容撑开
b、支持margin，但不支持 margin:auto;
c、可以解决垂直外边距合并问题
给上面的例子去掉高度height，我们发现的效果如下：
.box1{
background-color: red;
width:300px;
float: left;
}
.box2{
background-color: yellow;
width:100px;
float: left;
}
.box3{
background: green;
width:200px;
float:left;
}
给他们加相应的margin:20px
.box1{
background-color: red;
width:300px;
float: left;
margin: 20px;
}
.box2{
background-color: yellow;
width:100px;
float: left;
margin: 20px;
}
.box3{
background: green;
width:200px;
float:left;
margin: 20px;
}
层级特性：
a、浮动元素之后未浮动元素会在浮动元素的下方显示，但是浮动元素之前的未浮动元素不会被影响，因为浮动元素只能对后面的元素产生影响。
b、文字不会出现在浮动的元素的下方而是围绕浮动元素显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动概括</title> <style> *{margin: 0;padding: 0;} ul,ol{list-style: none;} a{text-decoration: none;color: inherit;} .box1{ background-color: red; width:300px; float: left; margin: 20px; } .box2{ background-color: yellow; width:100px; float: left; margin: 20px; } .box3{ background: green; width:200px; float:left; margin: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。 夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。古人云：“死生亦大矣。”岂不痛哉！(不知老之将至 一作：曾不知老之将至) 每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。</p> </body> </html>
效果：
二.清除浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动概括</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 ul,ol{list-style: none;} 9 a{text-decoration: none;color: inherit;} 10 .clearfix:after{ 11 content: ''; 12 display: block; 13 clear: both; 14 } 15 .container{ 16 width: 1000px; 17 /* height: 300px; */ 18 margin: auto; 19 box-shadow: 0 0 10px 0 #000; 20 border: 5px solid yellowgreen;} 21 ul li{ 22 float: left; 23 /* float: right; */ 24 width: 100px; 25 height: 100px; 26 background: darkblue; 27 font-size: 20px; 28 color: #fff; 29 /* margin: 10px; */ 30 } 31 </style> 32 </head> 33 <body> 34 <div class="container"> 35 <!-- <div class="box1"></div> --> 36 <ul class="clearfix"> 37 <li>1</li> 38 <li>2</li> 39 <li>3</li> 40 <li>4</li> 41 <li>5</li> 42 <li>6</li> 43 <li>7</li> 44 <li>8</li> 45 <li>9</li> 46 <li>10</li> 47 </ul> 48 49 <ul class="clearfix"> 50 <li>1</li> 51 <li>2</li> 52 <li>3</li> 53 <li>4</li> 54 <li>5</li> 55 <li>6</li> 56 <li>7</li> 57 <li>8</li> 58 <li>9</li> 59 <li>10</li> 60 </ul> 61 62 </div> 63 </body> 64 </html>
三.定位
定位：定位属性（position）允许元素相对于其自身所在的位置、父级定位元素、浏览器窗口（取决于属性值）进行移动。
理解定位（static是默认的）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> *{margin: 0;padding: 0;} ul,ol{list-style: none;} a{text-decoration: none;color: inherit;} .c1{ width: 100px; height: 100px; background-color: brown; left:20px; top:20px; } .c2{ width: 100px; height: 100px; background-color: blue; } .c3{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
初始图
偏移量：元素添加定位属性与属性值后，只会出现在默认的位置，如果想要移动它，还需要添加与定位配合使用的偏移量属性。
left：元素左边与参照物左边的距离
right：元素右边与参照物右边的距离
top：元素上边与参照物上边的距离
bottom：元素下边与参照物下边的距离
值：
固定数值：div{ position:relative; left:100px; top:100px; }
百分比：div{ position:absolute; right:50%; bottom:50%; } 相对于父级盒子宽高
PS：一般同轴向（X、Y）的偏移量属性通常只会出现一个。
1. 相对定位：相对于最初应该出现的位置定位，不脱离文档流。
特点：元素框最初位置仍然保留,不脱离文档流（阻碍布局，因此，一般不用其定位，但不给偏移量不影响元素）
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
position: relative;/*相对定位，占位置，相对于自己原来的位置来定位*/
left:20px;
top:20px;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
2. 绝对定位：相对于最近的父级定位元素定位，如没有定位父级元素，则相对body定位(注意：在使用bottom的时候是相对于可视化窗口进行定位)。使用偏移量后会相对定位父级移动，脱离文档流。
特点：
1. 使元素脱离文档流
2. 所有类型元素使用绝对定位就支持宽高
3. 支持margin,但是margin：auto失效
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;/*绝对定位，不占位置，无父级定位则相对于body来定位*/
left:20px;
top:20px;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
3. 固定定位：相对于可视化窗口（浏览器中我们能看见的区域）定位，脱离文档流。
注意：元素设置定位（除了相对定位）之后块级元素宽度不再默认为父级的百分百。
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
position: fixed;/*固定定位，不占位置，永远相对于浏览器来定位，不管窗口上下拉动，都不会消失（如广告位）*/
left:20px;
top:20px;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
四.Z-index解析
设置元素堆叠顺序
基本支持所以主流浏览器
该元素可拥有负的属性值
Z-index只能在定位元素上奏效（position:absolute）
Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越进，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素
.c1{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
left:20px;
top:20px;
}
.c2{
width: 50px;
height: 50px;
background-color:blue;
position: absolute;
}
效果是：蓝色定位元素在黑色定位元素上面
.c1{
width: 100px;
height: 100px;
background-color: brown;
z-index: 1;
position: absolute;
left:20px;
top:20px;
}
.c2{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
z-index: 0;
}
加Z-index，使得黑色定位元素在蓝色上面
