1.CSS布局_part 1

参考资料： learn css layout

1. display

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

1.1 block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p 、 form 和HTML5中的新元素： header、 footer 、 section 等等。

1.2 inline

span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a元素是最常用的行内元素，它可以被用作链接。

1.3 none

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

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

1.4 其他 display 值

还有很多的更有意思的 display 值，例如 list-item和 table 。这里有一份详细的列表。之后我们会讨论下 inline-block 和 flex 。

每个元素都有一个默认的 display类型。不过可以随时随地的重写它——可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

2. 水平居中 `margin: auto;`

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

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

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。

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

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

3. 盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的一个重点知识：盒模型。当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。

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

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

`box-sizing`

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与之前相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-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;
}

这是目前最好的方法，为了让页面上所有的元素都有如此表现，所以开发者们把以下CSS代码放在他们页面上：

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

由于box-sizing 是个很新的属性，目前你还应该之前在例子中那样使用-webkit-和 -moz-前缀。这可以启用特定浏览器实验中的特性。

注：支持IE8+。

4. position

4.1 static

.static {
  position: static;
}

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

4.2 relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置top 、right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

image

4.3 fixed


.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

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

一个固定定位元素不会保留它原本在页面应有的空隙。

移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

4.4 absolute

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

image

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

注意：一个"positioned"元素是指position值不是static 的元素。

position例子

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default（默认） */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

image

section的 rgin-left样式确保了有足够的空间容纳nav 元素。

当调整浏览器窗口时，除了nav（position: absolute;）之外，都可以实现自适应。

这个例子在容器比nav元素高的时候可以正常工作。如果容器比nav元素低，那么nav会溢出到容器的外面

5. float

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

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

image

6. 清除浮动

6.1 clear

clear 属性被用于控制浮动。比较下面两个例子：

<!-- html -->
<div class="box">...</div>
<section>...</section>

/* css */
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

image

在这个例子中， section元素实际上是在 div 之后的（译注：DOM结构上）。然而div元素是浮动到左边的，于是 section中的文字就围绕了div ，并且section 元素包围了整个元素。

如果我们想让section 显示在浮动元素之后可采用以下做法：

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

image

给section 添加class="after-box"
使用clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或both来清除向右浮动或同时清除向左向右浮动。

6.2 clearfix hack(兼容性好)

image

由于图片比包含它的元素还高，而且它是浮动的，于是图片就溢出到了容器外面。

有一种方法可以解决这个问题 —— 清除浮动（clearfix hack）.

加入一些新的CSS样式：

.clearfix {
  overflow: auto;
}

image

如果你想要支持IE6，还需要再加入如下样式：

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

浮动布局例子

之前用 position实现的布局例子，改用float 实现

image

.clearfix {
    overflow: auto;
}
nav {
    width: 200px;
    float: left;
}
section {
    margin-left: 200px;
}

1.CSS布局_part 1