CSS Layout 布局

有时候 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。这里，我们整理了 11 个最佳 CSS 框架。希望可以喜欢它们，最重要的是，找到满足您需求的最佳产品。

新的 flexbox 布局模式被用来重新定义 CSS 中的布局方式。目前只能在支持 flexbox 的 Chrome 等浏览器中运行，基于最新的标准。

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

现在，你也可以使用 inline-block 来布局。

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：

响应式设计 - Responsive Design 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。把页面缩小看下效果！

float 浮动用于布局，可以达到靠左靠右的效果，但是，当使用完 float 浮动之后，一定要清除浮动，要不然很可能会造成父容器的高度坍塌。

平常做东西，经常要碰到清除浮动（对于一些浮动元素）一般最简单的方式是在要清除浮动的元素后直接加个 <div>

clear CSS 属性指定一个元素是否必须移动（清除浮动后）到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

另一个布局中常用的 CSS 属性是 float。Float 可用于实现文字环绕图片，以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

通过具体的例子可以帮助我们更好地理解 “position”。下面是一个真正的页面布局。

为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的 CSS 属性。

Box Model，在 CSS 中，"box model" 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。

max-width 定义元素的最大宽度。默认情况下，考虑到最大宽度限制，将宽度设置为尽可能靠近初始的 View。

auto 是 margin 的可选值之一。最多的用法大概是 margin: 0 auto; 和 margin: auto;

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

在解决这个问题之前，我们需要了解一个很重要的属性：display