布局方式
1.标准流/静态流
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
2.浮动布局
主要用于设置块元素的水平排列
1）属性:float
2）取值: 可取left或right，设置元素向左浮动或向右浮动. 示例:float:left/right;
3）特点:
- 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
- 元素设置浮动,就具有块元素的特征,可以手动调整宽高
- "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示
4）常见问题: 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
5）解决:
- 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
- 为父元素设置overflow:hidden;解决高度为0
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 height:500px; 10 margin:0 auto; 11 background:orange; 12 13 14 } 15 #d1,#d2,#d3{ 16 width:200px; 17 height:200px; 18 } 19 #d1{ 20 21 background:red; 22 float:right; 23 24 } 25 #d2{ 26 height:300px; 27 background:green; 28 float:right; 29 } 30 #d3{ 31 background:blue; 32 float:right; 33 } 34 span{ 35 float:right; 36 width:200px; 37 height:200px; 38 background:pink; 39 <!--clear:both;--> 40 41 } 42 </style> 43 </head> 44 <body> 45 <div id="box">box 46 <div id="d1">d1</div> 47 <div id="d2">d2</div> 48 <div id="d3">d3</div> 49 <span>span1</span> 50 51 </div> 52 <!--脱离文档流的元素在文档中不在站位,可以手动调宽高--> 53 <span>span2</span> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width:200px; 9 height:200px; 10 background:red; 11 float:left; 12 margin-right:30px; 13 } 14 h1{ 15 background:green; 16 17 } 18 input{ 19 /*正常元素在文档流中找位置，浮动元素在上层中找位置*/ 20 float:left; 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 <span>行内元素</span> 27 <input type="text"> 28 <h1>浮动元素只能遮挡元素的位置，但是不影响内容显示</h1> 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #nav{ 8 width:900px; 9 height:24px; 10 background:gray; 11 } 12 .left{ 13 width:300px; 14 float:left; 15 background:green; 16 } 17 .right{ 18 float:right; 19 background:red; 20 width:300px; 21 } 22 ul{ 23 margin:0; 24 passing:0; 25 /*去掉列表符号*/ 26 list-style:none; 27 } 28 li{ 29 float:left; 30 margin-right:50px; 31 } 32 #main{ 33 margin-top:50px; 34 width:900px; 35 /*解决子元素全部浮动造成父元素告诉为0的问题*/ 36 /*解决方法1：height:400px;*/ 37 /*解决方法2：overflow:hidden;*/ 38 overflow:hidden; 39 background:pink; 40 } 41 .item1{ 42 width:580px; 43 height:400px; 44 background:gray; 45 float:left; 46 } 47 .item2,.item3{ 48 width:300px; 49 height:190px; 50 background:gray; 51 float:right; 52 } 53 .item2{ 54 margin-bottom:20px; 55 } 56 #i1,#i2{ 57 width:200px; 58 height:200px; 59 background:red; 60 } 61 #i1{ 62 background:green; 63 float:left; 64 } 65 #i2{ 66 /*使文档中正常元素不受前面浮动元素影响*/ 67 /*clear:left/right/both*/ 68 clear:left; 69 } 70 .clear{ 71 clear:both; 72 } 73 </style> 74 </head> 75 <body> 76 <div id="nav"> 77 <div class="left"> 78 <ul> 79 <li id="d1">首页</li> 80 <li id="d2">物流</li> 81 <li id="d3">客户</li> 82 </ul> 83 </div> 84 <div class="right">右侧导航</div> 85 </div> 86 <div id="main"> 87 <div class="item1">1</div> 88 <div class="item2">2</div> 89 <div class="item3">3</div> 90 <div class="clear">1</div> 91 </div> 92 <div> 93 联系我们 94 <div id="i1">1</div> 95 <div id="i2">2</div> 96 </div> 97 </body> 98 </html>
3.定位布局
结合偏移属性调整元素的显示位置
1）属性: position
2）取值: 可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位） 示例:postion:relative/absolute/fixed
3）偏移属性:设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #banner{ 8 width:300px; 9 height:250px; 10 /*相对定位*/ 11 position:relative; 12 } 13 #d1{ 14 color:#fff; 15 /*绝对定位*/ 16 position:absolute; 17 height:30px; 18 right:0px; 19 /*根据参照物对应方向的值计算偏移量（250*50%）*/ 20 top:50%; 21 margin-top:-15px; 22 } 23 #d2{ 24 color:#fff; 25 /*绝对定位*/ 26 position:absolute; 27 height:30px; 28 /*根据参照物对应方向的值计算偏移量（250*50%）*/ 29 top:50%; 30 margin-top:-15px; 31 } 32 #fixed_{ 33 position:absolute; 34 width:150px; 35 top:230px; 36 color:#fff; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="banner"> 42 <img src="northStar.jpg" class="c1" alt=""> 43 <a href="" id="d1">下一张</a> 44 <img src="timg.gif" class="c2" alt=""> 45 <a href="" id="d2">上一张</a> 46 </div> 47 <div id="fixed_"> 48 固定定位 49 </div> 50 </body> 51 </html>
4）分类
relative 相对定位(原来的位置占位)
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1,#d2{ 8 width:200px; 9 height:200px; 10 background:red; 11 margin:0 auto; 12 } 13 #d1{ 14 background:green; 15 /*相对定位，已定位的元素可以设置偏移属性，调整元素的显示位置*/ 16 position:relative; 17 /* 18 top:100px; 19 left:-100px; 20 */ 21 bottom:-100px; 22 right:100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="d1"></div> 28 <div id="d2"></div> 29 </body> 30 </html>
absolute 绝对定位（原来的位置不占位）
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #box{ 8 width:500px; 9 margin:0 auto; 10 background:orange; 11 position:relative; 12 } 13 #d1,#d2{ 14 width:200px; 15 height:200px; 16 background:red; 17 18 } 19 #d1{ 20 background:green; 21 /*绝对定位*/ 22 position:absolute; 23 top:0; 24 left:0; 25 26 } 27 body{ 28 /*设置为定位元素*/ 29 position:relative; 30 31 } 32 </style> 33 </head> 34 35 <body> 36 <div id="box"> 37 <div id="d1"></div> 38 <div id="d2"></div> 39 </div> 40 </body> 41 </html>
fixed 固定定位（不占位）
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #main{ 8 height:1500px; 9 background:pink; 10 } 11 #chat{ 12 width:300px; 13 height:300px; 14 background:orange; 15 /*固定定位:脱离文档流，参照窗口偏移； 16 不跟随页面滚动而滚动*/ 17 position:fixed; 18 right:0; 19 bottom:0; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="main"></div> 25 <div id="chat">千年传奇，值得你拥有，快注册吧，注册就送屠龙刀。</div> 26 </body> 27 </html>
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：
属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width:200px; 9 height:200px; 10 background:red; 11 } 12 #d1{ 13 background:green; 14 position:relative; 15 /*只有定位元素才能使用偏移属性调位置*/ 16 /* 17 position:relative; 18 top:100px; 19 left:100px; 20 */ 21 z-index:1 22 } 23 #d2{ 24 /*永远定位元素在上*/ 25 position:relative; 26 left:100px; 27 bottom:-100px; 28 29 } 30 #d2:hover{ 31 /*调整堆叠次序，属性：z-index 32 取值为无单位的整数，值越大越靠上 33 只有定位元素能够使用z-index属性调整次序*/ 34 z-index:2; 35 } 36 37 </style> 38 </head> 39 <body> 40 <!--正常元素与定位元素发生堆叠，永远定位元素在上方显示--> 41 <!--同为定位元素发生堆叠，根据标签的书写顺序，后来者居上--> 42 <div id="d2"></div> 43 <div id="d1"></div> 44 <h1> 45 实现网页： 46 上方为导航栏（包含若干导航项，包含下拉菜单） 47 下方为轮播图区域（包含图片，图片索引，左右按钮） 48 </h1> 49 </body> 50 </html>