css页面布局

写在前面：

页面布局整体上可以分为两类：固定宽度（一般固定960px）；流式布局；将流式布局转换为固定布局很容易，只需要外围再包括一个div，为其设置宽度即可。

html默认的布局方式是将每个块状标签，一个一个地往上叠加，为static类型的布局。

关于BFC的参考链接：

http://www.iyunlu.com/view/css-xhtml/55.html

http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

布局的一些技巧：

1）pading和margin只是一些空格而已，利用这两个属性就可以将元素移动到网页的任何位置。margin的负值能够实现很多意想不到的效果，可以详见这篇博客：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

3）对于position:absolute元素，完全脱离原来层，其在原来层实际占据高度和宽度都是0；对于position：relative元素，依旧占据原来的高度和宽度，如果设置top，left不为0就会形成窟窿。

4）对float元素设置负边距，可能导致元素上移，这是圣杯布局和双飞翼布局的根据。

4）对于浮动元素。浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。解决方法时为包含框创建BFC环节。

其实，很多问题的本质都是对BFC（块级上下文）的理解问题

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。

4）BFC（块级上下文）环境特性

解决上下元素margin重叠的问题，块级上下文会阻止上下外边距重叠，总边距就是上下边距之和
不和浮动元素重叠，创建了 Block Formatting Context 的元素不能与浮动元素重叠
闭合浮动，并且防止高度塌陷；块级上下文会width和height会包含其中的所有元素，包括浮动元素，这是利用BFC解决高度塌陷的原因

5）让浮动元素的父元素拥有BFC执行换件：

float的值不为none。
overflow的值不为visible，可以是hidden或者auto
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

浮动布局策略

1）除非像图片这样本身已经设置了宽度的元素，否则需要给任何浮动元素设置width（px,em或者百分比），只有这样，才能让浏览器给其他内容腾出环绕的空间。

2）要创建多列并排的效果（如两列并排），通常需要给正文添加一个大于或者等于侧边栏宽度的margin，这是因为：

ａ．因为两个列在同一个ＢＦＣ中，因此都是从包围元素的左侧开始布局，所以要求margin大于等于侧边栏的宽度；

ｂ．注意步骤ａ中设置的是margin不是padding，否则如果主列设置有背景色，依旧达不到想要的效果

ｃ．如果想要实现多列等高，通常需要为其中各列设置较大的padding-bottom值，再设置与padding-bottom一直的负margin-bottom值来达到这一效果；这是因为文档流放置的元素是考虑margin在哪里而非实际内容。同时还需要为外围元素添加overflow: hidden

下面是几个实际的案例

Ａ．创建两列布局（要求，侧边栏左浮动，主列宽度自适应，要求不管内容高度是多少，都能实现两列等高）

分析：因为要求主列自适应，主列就不能也浮动，因为元素一旦浮动都要求为其设置ｗｉｄｔｈ（百分比或者精确值）

    <div class="task1">
        <div class="sidebar"></div>
        <div class="main"></div>
    </div>

对应的布局代码如下：

.task1{
    overflow: hidden;
}
.task1 .sidebar{
    width:200px;
    height:300px;
    float:left;
    background: red;
    padding-bottom:400px;
    margin-bottom:-400px;
}
.task1  .main{
    height:500px;
    background:pink;
  /*  padding-left:210px;*/
    margin-left:210px;
    padding-bottom:400px;
    margin-bottom:-400px;
}

Ｂ．创建三列布局

要求：两个侧边栏一左一右浮动，主列宽度自适应，各列等高

<div class="task2">
        <div class="sidebar"></div>
        <div class="extra"></div>
        <div class="main"></div>
    </div>

对应的布局代码：

.task2{
    overflow: hidden;
}
.task2 .sidebar{
    width:160px;
    height:300px;
    background:red;
    padding-bottom:400px;
    margin-bottom: -400px;
    float:left;
}
.task2 .main{
    height:200px;
    background: pink;
    padding-bottom:400px;
    margin-bottom:-400px;
    margin-left:170px;
    margin-right:210px;
}
.task2 .extra{
    height:400px;
    width:200px;
    float:right;
    background: blue;
    padding-bottom: 400px;
    margin-bottom: -400px;
}

根据浮动元素的排列方式，它们必须出现在环绕它们四周的所有内容之前，因此在上面的案例中，正文区域只能在左右两个侧边栏之后。

由此引发了第三个问题：

Ｃ：创建三列布局

要求（为了对搜索引擎友好，main区域要求在左右侧边栏的前面，同时main区域的宽度自适应，各列等高）

对此可以采用双飞翼布局或者圣杯布局，参见博客：

http://www.cnblogs.com/bobodeboke/p/4738768.html

3）清除浮动，clear。如果要让元素下落到左浮动对象的下方clear:left;或者右浮动对象的下方：right；对于页脚或其他需要显示在页面底部的元素，可以使用clear:both.本质上解决方法有两种：

a:让浮动元素所在的父元素拥有BFC环境
b：让浮动元素后面的元素清除浮动。

4)闭合浮动的方法（闭合比清除浮动更贴切）

当浮动元素高于外围元素（如div）里面其他内容时，就会从外围元素的底部凸出来，如果外围元素带有背景或者边框，这种高度塌陷情况就更加明显。解决的本质是

a）让包括浮动元素的外围元素拥有BFC环境，方法同上。

b）在外围元素的底部添加一个清除元素，此时可以：

a：在外围元素div的底部加一个清楚元素，如<br class=".clear">

d：在外围<div>中添加一些样式和类名。如.clearfix，其本质也是通过在浮动元素后面，通过：after伪类添加一个清除元素，针对ie，通过zoom触发器hasLayout

.clearfix:after{
   content:"";
  display:table;
  clear:both;
}

.clearfix{
   zoom:;
}

这些都可以强制外围块扩大到包含浮动元素。

５）防止浮动下落（float drop）

浏览器窗口显示的元素宽度并不等于它的width值，而是left/right border,left/right margin,left/right padding三者值的总和。float drop总是由于没有足够空间容纳所有列，导致有的浮动元素落到下一列造成。此时的解决方法：

（1）严格计算，所有列的总和<=100%

(2)使用box-sizing属性,如将下列代码放在css reset中

注意：clearfix解决的是浮动问题中的图片凸出，对于绝对定位中的图片凸出是没有办法的，此时只能够定义外围元素的高度

*{
-moz-box-sizing:border-box;
box-sizing:border-box;
}

还有其他属性，background-clip,background-origin的取值和box-sizing一样，有 content-box,padding-box,border-box

css响应式布局

响应式布局（RWD）结合了三大理念：

基于布局的弹性网格：响应式布局中不在使用固定布局，而使得宽度随着屏幕大小而改变。

用于图片和视频的弹性媒体：使得图片和媒体能够进行缩放，以适应不同的屏幕大小。

为不同屏幕宽度创建不同样式的css媒体查询：根据当前条件为浏览器发送不同的样式。

通过在<head>中添加response.js，可以让旧版IE支持媒体查询;
媒体查询通过引入不同的样式文件来实现，如<link href="css/small.css" rel="stylesheet" media="(max-width:580px)">
不过当前最通用的，还是在样式文件中嵌入媒体查询

巴特西

css页面布局

最新文章

热门文章