布局方式
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>
来源：https://www.cnblogs.com/maplethefox/p/11179111.html