学习CSS布局

 
本文由LL根据Learn
CSS Layout站点所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://learnlayout.com/，以及作者相关信息
——译者：LL

这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础。

你也许知道什么叫选择器，什么叫属性，什么叫数值，也许你对css布局略懂一二，但这还远远不够。如果你想着从头开始学习HTML和CSS的话，我建议你认真查看下 this tutorial. 否则，在工作的时候，你依然陷入迷惘的泥潭中苦苦挣扎。

零布局

如果你希望你的网页内容以一个栏的形式显示出来的话，那么就用不着使用css布局了。然而，如果用户的浏览器界面调整得很宽的话，那么每一次看完一行文字的时候，你的视线都要从右到左地移动到下一行，很麻烦啊有没有，你自己调整一下界面的大小就知道我所说的情况了。

在我们解决这个问题之前，先让我们了解下一个非常重要的display属性吧。

"display"属性

在控制布局方面,display是最重要的css属性，每一个元素都有其默认的display属性值，大部分的默认值不是block就是inline，用block标记的元素一般称为块级元素，而用inline的元素一般称为内联元素。

block

Div标签是块级元素的代表，块级元素占据着整整独立的一行，其他常见的块级元素有p和form，还有html5中加入的header，section和footer等等。

inline

Span标签是内联元素的代表，内联元素能够避免破坏段落结构的情况下，往其中添加文本段落。而元素a就是最常见的内联元素，经常用他来作链接使用。

none

另一个比较常见的display属性值就是none，像script这些比较特别的元素的默认属性值就是none，他经常被用来隐藏javascript语句，适当隐藏暂时不用着显示的元素.但这区别于visibility。设置display：none的元素，经过页面的渲染过后，就好像这个元素不存在了。而设置visibility：hidden；的时候，同样会对该元素进行隐藏，但是，如果他被完全隐藏的时候，其依然还是占据原来的空间。换句话说 display：none会真的把你弄没，而bisibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。

其他display属性

除了上面讲到的display属性值之外，其实还有很多display属性值，比如list-item以及table这些。（链接）这里有一个详尽的列表。我们接下来还会讨论到inline-block和flex，敬请期待。

<4>友情提示

正如我所提到的，每一个元素都具备一个默认的的display属性值。其实你完全可以忽略这句话！虽然说div在默认情况下不可能是内联的，但是你定制出你想要的display属性值元素。举个常见的例子来说吧，li内联元素常常被用作水平的菜单。

在线查看

扩展阅读

'display' property
display
CSS display: inline-Block:
Why It Rocks, And Why It Sucks
Use CSS display:table for Layout
display
——大漠

margin: auto;

#main {
width: 600px;
margin: 0 auto;
}

在块级元素中设计width属性能够防止在水平上撑满容器。然后，你还能够设置左右margin来进行水平居中。在中间占据指定的水平宽度，然后剩下来的宽度空间就会一分为二成为左右外边距。

现在唯一需要解决的问题就是，一旦浏览器的显示窗口的宽度小于你设定的元素宽度。浏览器就会自动加上一个水平滚动条来进行内容显示，有时这种情况不是我们想要的，需要改进改进。

在线查看

扩展阅读

Box model
CSS CENTERING 101
How to Center Anything With CSS
Equal
Height Column Layouts with Borders and Negative Margins in CSS
Collapsing Margins
——大漠

Max-width

#main {
max-width: 600px;
margin: 0 auto;
}

使用max-width来代替width能够提升浏览器对小窗口情况的处理效果。这个处理方法在移动端上显得更加尤为重要。现在你就可以调整下窗口的大小，来对照下吧！

顺便说下，max-width得到了所有的主流浏览器的支持包括IE7在内，所以尽管使用它就行了。

Box模型

当我们谈及width的时候，我们应该谈论到关于width一个重要的注意点，box模型。当你在元素中设定width，该元素的实际大小一般大于你的所设定的数值：元素的border以及padding会在原设定宽度的大小上进一步撑大容器的宽度。看看下面的例子，两个设定相同width大小的容器，却是以不同大小的形式显示出来。

.simple {
width: 500px;
margin: 20px auto;
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}

在线查看

一般来说，我们需要通过计算来解决这个问题，css开发者总是需要预先把容器设定得小一点（减去border以及padding占据的宽度）来最终达到理想的大小，让人庆幸的是，现在你再也不用这么苦逼了。

Box-sizing

随着日子一天一天过，人们越来越发现为容器的大小计算得非常苦逼，于是，一个名字叫box-sizing的css属性新鲜出炉了。当你在容器当中设定box-sizing：border-box的时候，容器中的border和padding已经不能影响该容器的宽度了。下面的例子和上面的例子大部分都一样，只是下面的例子多了个box-sizing：border-box；

.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

在线查看

这是目前为止保持宽度大小一致最好的解决办法了，css开发者把下面css代码放在他们的页面上，这样，页面上所有容器都具备这种属性了。

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

这样，页面上的所有元素就可以得到更加直观的排版。

由于box-sizing是相当新的属性，你应该像我之前的例子那样添加-webkit-和-moz-前缀，这样在其对应的浏览器中得到更好的显示。IE8+支持这个属性的。

扩展阅读

CSS3 Box-sizing
Box Sizing
A Look Into: CSS3 Box-Sizing
box-sizing
Start using CSS box-sizing today
‘box-sizing’ property
——大漠

Position

为了应对更加复杂的布局需求，我们就不能忽略position这个属性。它有一揽子有用的属性，而且他们的名称又抽象难记，好吧，我们一个一个地攻破它吧，不过你要做好打持久战的心理准备哦。

static

.static {
position: static;
}

Static是元素与生俱来的默认属性。它表示着不进行特殊的定位。一般来说static属性表示该元素没有被定位，而一旦把position属性设定其他值的时候，那么就表示该元素被定位了。

relative

.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}

relative表现跟staitc一样，除非你另外添加了其他的属性。

在相对（position：relative）定位的元素中设定top，left，right，bottom属性都会使得改元素的位置发生改变。而且其他内容的位置不会因为该元素位置的改变而改变。

fixed

Fixed属性值的元素相对于视窗进行相对定位，也就是不管你的滚动条滚到哪里去，该元素总会出现在屏幕的相同位置。和position一样，属性top，right，bottom和left都会用上。

我想你一定注意到了在屏幕的右下方的fixed属性。好吧，现在你可以仔细地研究研究它了，下面是相关的css代码。

.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}

一个fixed元素不会影响其在页面中的已经定位了的布局。然而移动端的浏览器对fixed属性的支持却表现得很差劲，这里有相应的解决方案。

absolute

Absolute是最复杂的position属性值了，absolute跟fixed相似，只是fixed相对于视窗进行定位，而absolute则是相对于最近的一个父系定位元素进行定位而已，如果absolute没有父系定位元素的话，那么他就相对文档中的body元素，也就是说会跟随页面的滚动而移动。记住，被定位元素就是那些具备position属性且属性值不为static的元素。

下面是一个简单的例子

.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

class=“relative”，改元素属于相对定位。如果该元素设定为position：static；那么其子系绝对定位就不会脱离该元素，而跑去跟body对齐了。

class=“absolute”：该元素属于绝对定位，相对于其父系进行定位。

这个东西非常棘手，但要想弄出一个优秀的css布局你就必须学习它。下面，将给大家带来关于position更多优秀的例子。

在线查看

Position例子

一个实际的例子能够使我们对position的印象更加深刻。下面是一个真正的页面布局

.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}

在线查看

section中设置margin-left就是为了能够给nav腾出足够的空间，否则absolute元素就会和static元素相互重叠。

留意当你改变窗口大小的时候发生了什么。效果非常不错。

如果你对footer或者header设定了position：fixed；要记得给他们腾出个地方来，而对于footer我就在body中设定了一个margin-bottom的值给它。

在该容器高度大于nav的时候，能够正常显示。否则nav就会脱离container。接下来，我们将会为你继续分析其他css布局技术的优劣之处。

扩展阅读

十步图解CSS的position
HTML和CSS高级指南之二——定位详解
CSS Positioning 101
CSS Positioning: A Comprehensive Look
position
——大漠

float

另一个要介绍的css布局属性就是float。Float可以实现文字在图片周围浮动的效果，如下图所示。

img {
float: right;
margin: 0 0 1em 1em;
}

在线查看

扩展阅读

CSS的Float之一
CSS的Float之二
应不应该使用inline-block代替float
All About Floats
CSS Floats 101
Float vs. Inline-Block
——大漠

clear

Clear就是一个控制float的一个有用属性，我们可以对比下面的两个例子：

<div class="box">...</div>
<section>...</section>

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}

在线查看

在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}.after-box {
clear: left;
}

在线查看

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

清除浮动（clearfix hack）

当我们使用float的时候，有时候会遇到一些意外的棘手问题。

img {
float: right;
}

在线查看

噔噔噔~有个叫clearfix hack的方法来解决这个问题，但是有点烦人哦，让我们来尝试添加一个新的css语句。

.clearfix {
overflow: auto;
}

现在再看看发生了什么：





在线查看

这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：

.clearfix {
overflow: auto;
zoom: 1;
}

有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。

扩展阅读

Clear Float
CSS Float Theory: Things
You Should Know
Page layout with floats and clearing
Clearing floats
——大漠

浮动布局例子

看到布局到处都用到float那是再常见不过的事情了。下面的布局是我们之前介绍position的时候用到的，现在用float代替position也能够实现相同的效果。

nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}

在线查看

这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。

百分比宽度

你可以使用百分比来进行布局，但是这个需要更多的代码。在下面的实例中，当视窗太过狭小的时候这个nav容器会被压扁。所以在选择布局方案的时候，要考虑你设计到的内容。

article img {
float: right;
width: 50%;
}

在线查看

你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！

百分比宽度布局

你可以使用百分比来进行布局，但是这个需要更多的代码。在下面的实例中，当视窗太过狭小的时候这个nav容器会被压扁。所以在选择布局方案的时候，要考虑你设计到的内容。

nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}

在线查看

 

当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。

Media queries

“响应式设计”是一个网站根据在不同浏览器以及设备平台上都能够做出不同表现的效果的方案，你可以现在改变下视窗的大小，再也没有比这更酷的了。

要做到这点，媒体查询这步工作必不可少。现在让我们用百分比宽度布局，接着调整浏览器的大小，一直到其无法容纳nav菜单的时候，布局开始就成了一列显示，代码如下。

@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}

在线查看

现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。

友情提示

在使用meta viewport之后，在移动端的布局会更加锦上添花。

扩展阅读

CSS3 Media Queries
媒体查询
How
To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Media Queries
CSS Media Queries & Using Available Space
How to use CSS3 Orientation Media
Queries
——大漠

inline-block

我们可以很好地使用网格来铺满整个浏览器。在之前的很长一段时间中，我们都使用float来实现，但是现在inline-block能够更轻易地完成任务。Inline-block跟inline差不多但是他们具备一个width和height。下面让我们比较下两者的例子吧。

困难的方式（使用浮动）

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}.after-box {
clear: left;
}

在线查看

容易的方式（使用 inline-block）

你同样能够使用display：inline-block最后实现相同的结果。

.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}

在线查看

如果需要IE6和IE7支持inline-block这个属性值得话，你还需要做些工作。大家在谈论inline-block的时候，你只需要记得在老式的浏览器触发一个叫haslayout的东西就可以了。如果你对这方面很感兴趣的话，那么请你点击前面的链接，深入了解一下吧，如果没有问题的话，我们继续进入到下一步的学习。

inline-block 布局

你同样可以使用inline-block来进行布局，但有些地方需要我们注意的：
Vertical-align属性能够影响inline-block，你可能需要把vertical设定值为top。
你需要在每一栏上面设定宽度。
如果在html中他们存在空格代码，那么列与列之间同样也会存在间隙。

nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}

在线查看

扩展阅读

What’s the Deal With Display: Inline-Block?
Using inline-block to Display
a Product Grid View
Fighting the Space Between Inline Block
Elements
如何解决inline-block元素的空白间距
inline-block
——大漠

column

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}

在线查看

Css column是非常新颖的属性，因此你需要对其使用前缀标明，而且这个属性不被IE9及以下和Opera Mini所支持。下面有更多与column相关的属性，点击这里了解更多，没问题的话，那我们继续学习下一个。

扩展阅读

CSS3 Multi-columns 之column-gap column-rule
CSS3 Multi-columns 之列数和列宽
CSS3 Multi-columns 之跨列
Multiple Columns Layout (Magazine-Alike) With CSS3
An
Introduction To The CSS3 Multiple Column Layout Module
CSS Multi-column Layout Module
CSS3 Multi-column layout
Multiple Columns
——大漠

flexbox

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，最新的标准。

网上有太多过时的flexbox相关资源。如果你想对flexbox有更深的了解，从这里，学习识别关于flexbox资源是否是最新的。我已经整理出一篇关于最新标准的详细文章。

使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：

.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}

在线查看

使用 Flexbox 的牛逼布局

.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}

在线查看

使用 Flexbox 的居中布局

.vertical-container {
display: -webkit-flex;
display: flex;
height: 300px;
}
.vertically-centered {
margin: auto;
}

在线查看

扩展阅读

flexbox
一个完整的Flexbox指南
深入了解 Flexbox 伸缩盒模型
IE10中的Flexible Box("Flexbox")布局
“老”的Flexbox和“新”的Flexbox
使用Flexbox：新旧语法混用实现最佳浏览器兼容
跨浏览器的Flexbox
看看接下来会发生什么：CSS3 Flexible Boxes
响应式设计的未来——Flexbox
使用CSS3 Flexbox布局
Flexbox——快速布局神器
Flexbox中动画内幕
CSS3实现水平垂直居中
——大漠

css框架

Css框架博大精深，为了让我们更好地实现css布局，一些css框架应运而生了，下面为大家提供一些css框架以供参考。最后个人建议，不要总是寄希望于这些css框架，只有你熟悉了解css才是王道。



 

 

 

 

 

 

 

 

 

扩展阅读

framework
8个实用的响应式设计框架
16个优秀的Responsive CSS框架
天涯html & css基础框架
30+ CSS Grid System
——大漠

到此为止！如果你对本篇教程有任何反馈，请在Twitter上联系我！

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于LL

广东某大学在读大学生，热爱Web前端，对前端技术有强烈的兴趣，在这里希望有机会和大家共同分享与交流，从而更好的提升自己。请关注我：新浪微博

如需转载烦请注明出处：

英文原文：http://learnlayout.com/

中文译文：http://www.w3cplus.com/css/learn-css-layout.html