CSS布局随手记

display属性

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

block(块级元素)

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

inline(行内元素)

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

none(隐藏)

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

总结

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

position布局

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

static

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

relative

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

relative 表现的和 static 一样，除非你添加了一些额外的属性。
在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和left
属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩
下的空隙。说白了就是不会管它会怎么样下面的位置该怎么排列还是怎么排列,

fixed(固定定位)小广告都是这么做滴

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

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
但是移动浏览器对 fixed 的支持很差。

这里解决方法

absolute

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

absolute详情可见

float

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：
img {
  float: right;
  margin: 0 0 1em 1em;
}
margin:上 右 下 左

先写这么多有空了回头继续