css布局

上一家公司是家小公司，做了一年的全栈开发，对前端的css布局都有所使用，也算辛苦。现在在一家互联网公司，专职做一名后端开发者，css都不需要自己去写了。

现对布局这一块做点小总结，怕是自己多久不使用会忘了，毕竟以后还有可能做回全栈开发的，或者自己做些小站都有可能。由于不是专业的，哈哈，水平有限，忘各位批评指导。

css布局方式主要有三种：

1.默认的文档流顺序布局，元素在页面中的位置是跟随文档流变化而变化的。

2.浮动布局，在div内的任何元素都可以以浮动的方式进行显示。

3.定位布局，分为静态定位、相对定位和绝对定位。

第一种就不作解释了，下面对浮动布局和定位布局分别作解释。

浮动布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6   <meta charset="utf-8" />
 7 <style type="text/css">
 8         #divMain{
 9             height: 400px ;
10          width: 400px ;
11             background: black ;
12         }
13         div{
14              width: 100px ;
15             height: 100px ;
16         }
17         #div1 {
18             background: red ;
19         }
20         #div2 {
21             background: green ;
22         }
23         #div3 {
24             background: blue ;
25         }
26     </style >
27 <body>
28     <div id="divMain">
29         <div id="div1"> div1</div >
30         <div id="div2"> div2</div >
31         <div id="div3"> div3</div >
32     </div >
33 </body>

View Code

默认的文档流顺序布局效果，效果如下图。

css中的元素分类分为三种：1.块级元素。2.内联元素。3.隐藏元素。

div属于块级元素，独占一行，如上图所示。

浮动布局使用的是float属性实现div在一行多列功能，

为了让整体看的清楚，给body设置了灰色背景，现在让div1右浮动，即给div1加上float:right ;

此时div1已经脱离文档流（不管怎么浮动都会在其父div当中）,后面的元素当其不存在。

现让div1改成向左浮动，效果如下图。

发现此时的div2不见了，其实是被div1在视觉上给遮挡住了。为了验证是否正确，现将div2的宽度和高度都设为200px;，效果如下图。

现将将div2宽度和高度都改回来，并将div2和div3都向左浮动，div1会靠着父div的左边框，后面的div则向左浮动直到碰到前面的div，这样就实现了常见的并排显示效果，效果如下图。

若将div1、div2和div3宽度都改成150px，则三者的总宽度就会超过其父div的宽度，这时候最后一个超过的div则向下移动并贴着前一个div的下边框继续向左浮动，效果如下图。

按上面的原理，现将div2的高度减少成80px，div3的高度减少成50px，则div3将被div1卡住，效果如下图。由此可知不同高度的元素可能会出现卡住的情况。

清除浮动

在浮动布局时，由于浮动的元素脱离了文档流，对后面及父元素的元素都可能影响，

因此在布局时要清除浮动。一般在下一行开始之前使用清除浮动。

清除浮动一般有三个方法：

1.额外标签法，即增加一个没有内容的空标签。

2.overflow法，即给父元素添加overflow属性值设为hidden。

3.伪对象法，即利用伪对象after方法。

针对第一种方法会每次一个清除都额外增加一个div，导致代码量增加。

第二种方法子元素使用了定位布局，则很难实现，可能会出现问题。

第三种方法为目前最流行的方法，即通过伪元素在容器内部的最后添加一个隐藏的"."或为""，并且用clear:both来清除浮动，但往往为了兼容ie6/7会额外添加属性zoom:1; 。

默认情况下，div不设置高度，但div中若有内容则会自适应高度，下面用代码演示效果。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6                  <meta charset="utf-8" />
 7     <style type="text/css">
 8         body {
 9             background: gray ;
10         }
11 
12         #divMain {
13             background: black ;
14         }
15         #div1 {
16             width: 100px ;
17             height: 100px ;
18             background: red ;
19         }
20         #div2 {
21             width: 100px ;
22             height: 100px ;
23             background: green ;
24         }
25     </style >
26 </head>
27 <body>
28     <div id="divMain">
29         <div id="div1"> div1</div >
30         <div id="div2"> div2</div >
31     </div >
32 </body>
33 </html>

View Code

现将div1 设置float: left;，div2设置 float: right;，效果如下图。

浮动对divMain影响了，如上图divMain已看不到背景色。

1.先采用额外标签法解决这个问题，在divMain里的末尾添加<divclass="clear"></div> ，.clear{ clear:both;}，问题解决，效果如下图。

2. 在divMain的css属性中添加overflow:hidden;则问题解决。

但如果子元素使用了定位布局，则很难实现，可能会出现问题，先用一个例子演示：

 1 <html>
 2 
 3 <head>
 4 
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 
 7     <title ></title>
 8 
 9     <meta charset="utf-8" />
10 
11     <style type="text/css">
12 
13         body,div {
14 
15             margin:0 ;
16 
17             padding:0 ;
18 
19         }
20 
21         #divMain {
22 
23             background: black ;
24 
25             width:300px ;
26 
27             height:300px ;
28 
29             position:relative ;
30 
31             overflow: hidden ;
32 
33         }
34 
35  
36 
37         #div1 {
38 
39             width: 100px ;
40 
41             height: 100px ;
42 
43             background: red ;
44 
45             position:absolute ;
46 
47             top:50px ;
48 
49             left:50px ;
50 
51         }
52 
53  
54 
55         #div2 {
56 
57             width: 100px ;
58 
59             height: 100px ;
60 
61             background: green ;
62 
63             float: right ;
64 
65         }
66 
67     </style >
68 
69 </head>
70 
71 <body>
72 
73     <div id="divMain">
74 
75         <div id="div1"> div1</div >
76 
77         <div id="div2"> div2</div >
78 
79     </div >
80 
81 </body>
82 
83 </html>

View Code

则效果如下图。

是正常的，但如果，将div1改成left:-50px ;，效果如下图。

div1跑到了其父元素的外面的部分看不到。

3.利用伪对象after方法。

注：该方法为目前互联网最流行的方法。

下面是清除浮动代码。

.clearfix:after{

clear:both ;

display:block ;

visibility:hidden ;

height:0 ;

line-height:0 ;

content:"" ;

}

.clearfix{zoom:1}/*注：用来解决ie6/7的高度自适应兼容问题*/

其中zoom仅ie内核的浏览器才支持，缩放比例，具体见css参考文档。

给父元素divMain的class="clearfix"，则问题解决。

伪对象:after用来和content属性一起使用，设置在对象后（依据对象的逻辑结构）发生的内容。下面用一个例子解释。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6                  <meta charset="utf-8" />
 7     <style type="text/css">
 8         #span1:after{content :'加在span1后面的内容'}
 9         #span1:before{content :'加在span1前面的内容'}
10     </style >
11 </head>
12 <body>
13 <span id="span1"> (span1中的内容)</span >
14 </body>
15 <html>
16 <head>
17 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
18     <title ></title>
19                  <meta charset="utf-8" />
20     <style type="text/css">
21         #span1:after{content :'加在span1后面的内容'}
22         #span1:before{content :'加在span1前面的内容'}
23     </style >
24 </head>
25 <body>
26 <span id="span1"> (span1中的内容)</span >
27 </body>
28 </html>

View Code

效果如下图。

定位布局

定位布局分成三种：

1.static 静态定位：页面中每个对象默认都是静态定位。

2.absolute 绝对定位：绝对定位的对象脱离了文档流，通过设置left|right|top|bottom相对于父级对象（不存在则依据body）进行绝对定位。

3.relative 相对定位：相对定位的对象不脱离文档流，通过设置left|right|top|bottom相对于自身位置进行相对定位。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6   <meta charset="utf-8" />
 7 <styletype="text/css">
 8         body{
 9             background:gray ;
10         }
11         div{
12              width:100px ;
13             height:100px ;
14         }
15         #div1{
16             background:red ;
17         }
18         #div2{
19             background:green ;       
20         }
21         #div3{
22             background:blue ;
23         }
24     </style >
25 
26 <body>
27     <div id="div1"> div1</div >
28     <div id="div2"> div2</div >
29     <div id="div3"> div3</div >
30 </body>
31 </html>

View Code

未设置定位方式，默认都是静态定位，效果如上图。

现将div2设为绝对定位，给div2加上position: absolute;。

实际上div2已经已经脱离文档流，在视觉上已经把div3遮住。现将div3宽度和高度都增大至200px，效果如下图，div3出现了，被div2遮住了一部分。

现给div2设置top:150px; left:350px; ，则div2则已绝对定位，再添加一个div作为div1、div2和div3的父div，宽度和高度都设置成400px，效果如图。

定位布局不像浮动布局那样子元素不能超出父元素，如上图。

现将div3宽度设成width:450px，并未把div2挤掉，而是始终固定，效果如下图。

使用绝对定位的条件

当要使用绝对定位必须有两个条件：

1.必须给父元素加定位属性，一般建议使用position:relative。

2.给子元素加绝对定位position:absolute，同时加方向属性。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6                  <meta charset="utf-8" />
 7 <style type="text/css">
 8         body,div {
 9             margin:0 ;
10             padding:0 ;
11         }
12          #div1 {
13              width: 100px ;
14             height: 100px ;
15             background: red ;
16         }
17         #div2 {
18             width: 100px ;
19             height: 100px ;
20             background: green ;
21             position:absolute ;
22             top:100px ;
23             left:100px ;
24         }
25          #div3 {
26             width: 100px ;
27             height: 100px ;
28             background: blue ;
29         }
30     </style >
31 <body style=" background:gray ;">
32     <div id="div1"> div1</div >
33     <div id="div2"> div2</div >
34     <div id="div3"> div3</div >
35 </body>
36 </html>

View Code

这时div2绝对定位，如下图。

现将div1和div2放到divMain中，结构如下：

</div >

给divMain设置css属性让其居中，结构如下：

#divMain{

background:black ;

width: 300px ;

height: 250px ;

margin:0 auto;

}

效果如下图。

从视觉上div2不在divMain中。现要让div2还保持在div1对角线上，只需给divMain设置成相对定位，即position:relative ;

相对定位与绝对定位区别：

绝对定位是以父元素为基准点进行定位，注：会脱离文档流。

而相对定位是根据其自身为基准点进行定位，注：会离开原位置但还占着原来的空间。

使用浮动布局简单实现常见的博客布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title ></title>
 6                  <meta charset="utf-8" />
 7     <style type="text/css">
 8         body,div {
 9             padding: 0 ;
10             margin: 0 ;
11         }
12         #divAll{
13             height:684px ;
14             width:902px ;
15             border:1px solid black;
16             margin:0 auto;
17             clear:both ;
18         }
19         #divTop{
20             background:pink ;
21              width: 902px ;
22             height: 100px ;
23             border-bottom:2px solid black;
24         }
25 
26         #divMain {
27             background: black ;
28             width: 904px ;
29             height: 500px ;
30         }
31 
32         #divLeft {
33             background: red ;
34             width: 100px ;
35             height: 500px ;
36             float: left ;
37             border-right:2px solid black;
38         }
39 
40         #divContent {
41             background: green ;
42             width: 700px ;
43             height: 500px ;
44             float: left ;
45             border-right:2px solid black;
46         }
47         #divRight {
48             background:brown ;
49             width: 100px ;
50             height: 500px ;
51             float: left ;
52         }
53 
54         #divBottom {
55             background: blue ;
56             width: 904px ;
57             height: 80px ;
58             clear: both ;
59             border-top:2px solid black;
60         }
61     </style >
62 </head>
63 <body>
64     <div id="divAll">
65         <div id="divTop"> 头部导航区</div >
66         <div id="divMain">
67             <div id="divLeft"> 左侧</div >
68             <div id="divContent"> 内容区</div >
69             <div id="divRight"> 右侧</div >
70         </div>
71         <div id="divBottom"> 底部</div >
72     </div >
73    
74 </body>
75 </html>

View Code

divAll作为整个页面的容器，控制整个页面在浏览器的位置，给其设置margin:0 auto; 让其在水平居中，效果如下图。

以上讲述的只是最基本布局知识，实际开发中会有很多布局效果及各种局部的布局问题，但原理都是一样的。关键是要学会分析，用最合适的布局方式达到最好的效果。

甚至在开发中有很多样式兼容问题（这点对前端开发人员哈哈是深有体会吧），这都得去各种调，但做多了，问题解决多了经验就能积累起来了，自己也成长了！！！