[学习笔记] Css布局相关杂锦+个人补充

学习css布局的一个挺有意思的网站：学习Css布局
批注：
@…@标记内的内容表示为个人补充，仅供参考，如有错误，还望兄弟姐妹们指出~

---

1、使用 max-width 替代 width可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。 顺便提下，所有的主流浏览器包括IE7+在内都支持 max-width 。

#main {
  max-width: 600px;
  margin: 0 auto; 
}

2、 盒子模型从外到内有以下四层（谷歌chrome）：
·Margin(外边距) - 清除边框外的区域，外边距是透明的。
·Border(边框) - 围绕在内边距和内容外的边框。
·Padding(内边距) - 清除内容周围的区域，内边距是透明的。
·Content(内容) - 盒子的内容，显示文本和图像。
当你设置了元素的宽度，有时候实际展现的元素却超出你的设置，这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

• 以上问题可以通过设置box-sizing属性为border-box来解决：border-box 为元素设定的宽度和高度决定了元素的边框盒(宽高包括内边距和边框)；区别于content-box属性(默认属性，内边距和边框会撑开原来的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;
}

3、position属性有很多值，较为难记，需要反复记忆，多次练习，熟能生巧：

• static：static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。@static表示默认按照文档流顺序定位。@
• relative：relative是相对定位。relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。@但是它仍然占据着它没偏移前的空间，其它的样式不受影响。@
• absolute：absolute是绝对定位，但是它不是相对于视图窗口而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。@被设置了绝对定位的元素，在文档流中是不占据空间的，它在文档流中的位置会被删除，相当于“浮”了起来，我们可以通过z-index属性来设置它们的堆叠顺序@
• fixed：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
  令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.
• inherit：继承父元素position 属性的值。
• sticky：粘性定位，新属性，跳转查看详细。

position例子 — 可参见：Css-position例子
通过具体的例子可以帮助我们更好地理解“position”。

4、float
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：
可参见：Css-float

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

5、clear — 可参见：Css-clear
clear 属性被用于控制浮动。比较下面两个例子：

//Html部分(统一)
<div class="box">...</div>
<section>...</section>

//css1部分（没有清除浮动）
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

//css2部分（有清除浮动）
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

说明：

• 在Css1中，section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section中的文字就围绕了 div ，并且 section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？
• 在Css2中，使用 clear属性 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 clear属性的 left 值才能清除元素的 向左 浮动。
  另外，你还可以用 right 或 both 来清除 向右浮动 或 同时清除向左向右浮动。

6、清除浮动（clearfix hack）— 可参见：Css-清除浮动
·（1）在使用浮动的时候经常会遇到一个古怪的事情：图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！
加入样式解决问题：

.clearfix {
  overflow: auto;
}

若是要兼容IE6需要添加：

.clearfix {
  overflow: auto;
  zoom: 1;
}

有些独特的浏览器需要“额外的关照”。清除浮动这潭 水很深很深，但是这个简单的解决方案(可跳转)已经可以在今天所有的主要浏览器上工作。

·（2）浮动布局例子 — 可参见：Css浮动布局例子
完全使用 float 来实现页面的布局是很常见的。这里有一个之前用 position 实现的布局例子，这次使用 float 来实现它。

7-1、百分比宽度 — 可参见：Css百分比宽度
·百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

article img {
  float: right;
  width: 50%;
}

·你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！

7-2、百分比宽度布局 — 可参见：同7-1→Css百分比宽度
你可以用百分比做布局，但是这需要更多的工作。在下面的例子中，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。总而言之，选一种最合适你的内容的方式。

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
//当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。

8、媒体查询
“响应式设计（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;
  }
}
//当你调整浏览器窗口大小时，你会发现布局比以前更酷了！

· 现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在菜鸟教程文档中你还可以学到更多有关媒体查询的知识。

· 额外加分点： 使用 meta viewport （简书meta viewport入口）之后可以让你的布局在移动浏览器上显示的更好。

9、inline-block — 可参见：Css-inline-block
你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：
· 困难的方式（使用浮动）

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}
//我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。

· 容易的方式（使用 inline-block）
你可以用 display 属性的值 inline-block 来实现相同效果：

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}
//这次不需要使用 clear 。太棒了！

你得做些额外工作来让IE6和IE7支持 inline-block （中文版-来源于博客园）。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣，可以在前面那个链接中找到更详细的信息。否则我们就继续下去吧。

· inline-block 布局例子 — 可参见：Css - inline-block布局例子
你可以使用 inline-block 来布局。有一些事情需要你牢记：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
  vertical-align 属性(具体可参见W3C教程)设置元素的垂直对齐方式。top：把元素的顶端与行中最高元素的顶端对齐
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

10、column — 可参见：Css - column
这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。

.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支持。还有许多和 column 相关的属性，点击这里了解更多（column多列-菜鸟教程入口）。否则让我们讨论下一个主题。

11、flexbox — 可参见：Css - flexbox
新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。

网上有不少过时的 flexbox 资料。 如果你想要了解更多有关 flexbox 的内容，从这里（已挂未补）学习如何辨别一份资料是否过时。作者已经写了一份关于最新标准的详细文章。

使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：
· 使用 Flexbox 的简单布局：

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

· 使用 Flexbox 的牛逼布局：

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

· 使用 Flexbox 的垂直居中布局：

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

12、css框架 — 可参见：Css-框架
因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能满足你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。给出当前常用的几个Css框架：

• Bootstrap
• ElementUI

That’s all，Thanks Greg Smith.
Source: 学习Css布局首页