CSS学习笔记（布局）

前提：没有布局

如果把所有内容都塞进一栏里，那么不设置任何布局也是OK的。
然而，如果用户把浏览器窗口调整的很大，这时阅读网页会非常难受：读完每一行之后，你的视觉焦点要从右到左移动一大段距离。

重点：display属性

display 是CSS中最重要的用于控制布局的属性。
每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

none
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

其他 display 值

还有很多的更有意思的 display 值，例如 list-item、table、inline-block 和 flex 。

每个元素都有一个默认的 display 类型。不过随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过可以把有特定语义的元素改成行内元素。
常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

margin: auto;

设置块级元素的 width 可以防止它从左到右撑满整个容器。
然后设置左右外边距为 auto 来使其水平居中。
元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

max-width

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

盒模型

当设置了元素的宽度，实际展现的元素却超出设置：这是因为元素的边框和内边距会撑开元素。
box-sizing: border-box;

元素的内边距和边框不再会增加它的宽度

position定位

static 默认值，
relative 相对定位
absolute 绝对定位，absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。
fixed 固定定位

float浮动

float: left/right;左/右浮动

clear控制浮动

clear: left; –清除左浮动
clear: right; –清除向右浮动
clear: both; –同时清除向左向右浮动

清除浮动（clearfix hack）

overflow: auto;
清除浮动这潭 水很深很深

-百分比宽度