参考资料： learn css layout
1. display
每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
1.1 block
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p 、 form 和HTML5中的新元素： header、 footer 、 section 等等。
1.2 inline
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a元素是最常用的行内元素，它可以被用作链接。
1.3 none
另一个常用的display值是none。一些特殊元素的默认 display 值是它，例如 script 。 display:none通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是visibility: hidden;还会保留。
1.4 其他 display 值
还有很多的更有意思的 display 值，例如 list-item和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。
每个元素都有一个默认的 display类型。不过可以随时随地的重写它——可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
2. 水平居中 margin: auto;
#main {
width: 600px;
margin: 0 auto;
}
设置块级元素的 width可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
#main {
max-width: 600px;
margin: 0 auto;
}
在这种情况下使用max-width替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要.( 所有的主流浏览器包括IE7+在内都支持max-width)
3. 盒模型
在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与之前相同的例子，唯一的区别是两个元素都设置了 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代码放在他们页面上：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
由于box-sizing 是个很新的属性，目前你还应该之前在例子中那样使用-webkit-和 -moz-前缀。这可以启用特定浏览器实验中的特性。
注：支持IE8+。
4. position
4.1 static
.static {
position: static;
}
static是默认值。任意position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个position 属性被设置为其他值的元素表示它会被“positioned”。
4.2 relative
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative表现的和 static 一样，除非你添加了一些额外的属性。
在一个相对定位（position属性的值为relative）的元素上设置top 、right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
image
4.3 fixed
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、right 、 bottom 和 left属性都可用。
一个固定定位元素不会保留它原本在页面应有的空隙。
移动浏览器对 fixed 的支持很差。这里有相应的解决方案.
4.4 absolute
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
image
absolute是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的"positioned"祖先元素。如果绝对定位（position属性的值为absolute）的元素没有"positioned"祖先元素，那么它是相对于文档的body 元素，并且它会随着页面滚动而移动.
注意：一个"positioned"元素是指position值不是static 的元素。
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;
}
image
section的 rgin-left样式确保了有足够的空间容纳nav 元素。
当调整浏览器窗口时，除了nav（position: absolute;）之外，都可以实现自适应。
这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面
5. float
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：
img {
float: right;
margin: 0 0 1em 1em;
}
image
6. 清除浮动
6.1 clear
clear 属性被用于控制浮动。比较下面两个例子：
<!-- html -->
<div class="box">...</div>
<section>...</section>
/* css */
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
image
在这个例子中，
section元素实际上是在 div 之后的（译注：DOM结构上）。然而div元素是浮动到左边的，于是 section中的文字就围绕了div ，并且section 元素包围了整个元素。
如果我们想让section 显示在浮动元素之后可采用以下做法：
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
image
给section 添加class="after-box"
使用clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或both来清除向右浮动或同时清除向左向右浮动。
6.2 clearfix hack(兼容性好)
image
由于图片比包含它的元素还高， 而且它是浮动的，于是图片就溢出到了容器外面。
有一种方法可以解决这个问题 —— 清除浮动（clearfix hack）.
加入一些新的CSS样式：
.clearfix {
overflow: auto;
}
image
如果你想要支持IE6，还需要再加入如下样式：
.clearfix {
overflow: auto;
zoom: 1;
}
浮动布局例子
之前用 position实现的布局例子，改用float 实现
image
.clearfix {
overflow: auto;
}
nav {
width: 200px;
float: left;
}
section {
margin-left: 200px;
}
网友评论