“学习CSS布局” 笔记

学习网址：http://zh.learnlayout.com/no-layout.html

本文仅为学习笔记，内容非原创。

position

默认值：static

没有添加额外属性的relative和static表现一样。额外属性包括：top, right, bottom, left。

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。移动浏览器对 fixed 的支持很差。

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

float

Float 可用于实现文字环绕图片，如下:

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

clear

clear 属性被用于控制浮动。

例子：clear: left。消除float：left后面的元素的浮动。

清除浮动（clearfix hack）

overflow: auto;

使得包含浮动元素的元素的高度适应浮动元素的高度。

媒体查询

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

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

@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; } }

inline-block

display: inline-block;代替float。

inline-block 布局

使用 inline-block 来布局。有一些事情需要牢记：

• vertical-align 属性会影响到 inline-block 元素，可能会把它的值设置为 top 。
• 需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

column

.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 columns是很新的标准，所以需要使用前缀，并且它不被IE9及以下和Opera Mini支持。

flexbox

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。

css框架

因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。