css布局方式 | 易学教程

布局方式

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

 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>

浮动布局演示2

 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

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>

z-index示例

来源：https://www.cnblogs.com/maplethefox/p/11179111.html

标签

绝对定位

html代码

background

charset

position

margin

css