CSS布局学习笔记and一些小技巧

在我的博客中查看，排版更佳

display

每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。

一个 block 元素通常被叫做块级元素，如div、p、form、header、footer、section等，他们会新开始一行并且尽可能撑满容器。

一个 inline 元素通常被叫做行内元素，如span、a元素等，他们可以在段落中包裹一些文字而不会打乱段落的布局。例如，我们经常把 li 元素修改成 inline，制作成水平菜单。

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

position

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个position设置为relative的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed是一个固定定位，position设置为fixed的元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙。

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果position设置为absolute的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。一个“positioned”元素是指 position 值不是 static 的元素。

float

如果前面一个元素设置了{float：left}，后面一个元素中的文字会形成文字环绕。

所以如果想在设置了{float：left}的元素下面显示需要设置{clear：left}。

如果设置了float的元素太大溢出了盒子，可以设置{overflow: auto;}解决。

百分比width

百分比是一种相对于包含块的计量单位。它对图片很有用，比如我们将一张图片的宽度设置为50%，它将始终占容器宽度的50%，包括缩小页面之后。

margin:auto

设置块级元素的 width 可以防止它从左到右撑满整个容器
4000
。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。
现在就可以调整窗口大小测试上下两个的区别。

盒子模型

当我们设置了元素的width，如果也设置了padding或者border，盒子模型的实际宽度等于width+padding+border。

这时我们可以加入以下代码，这样盒子的宽度就等于width设置的宽度了。

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

参考资料：http://zh.learnlayout.com/.