流体布局

块元素(block):

1. 从上往下
2. 块级元素各占据一行,默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关
3. 块级元素可以包含内联元素和块级元素

<div>
<form>
<h1>
<hr>
<p>
<ol><ul><li>
<tr>
等

内联元素(inline):

1. 从左上到右下
2. 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
3. 不能包含块级元素，只能包含文本或者其它内联元素

<span>
<a>
<image>
等

内联元素和块级元素转换

display:block (字面意思表现形式设为块级元素)
display:inline (字面意思表现形式设为内联元素)

可变元素素列表 (inline-block:具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性的元素)

<image>
<input>
<button>
<iframe>
<object>
等

float 属性(从正常流中移除，浮动元素)

尽可能远的向左或向右移动一个元素，他下面的内容会围绕这个元素流动

float:right

clear 属性(当元素流入时禁止有重叠)

clear:right

冻结(绝对)布局 (貌似用的比较多)

绝对布局的会从流中删除，在布局的时候会完全忽略，因此将可能出现遮挡～

####### 绝对定位：position 默认static，正常文档流里面。当设置为absolute 则为绝对布局

#sidebar {
  position:absolute;
  top:10px;
  right:200px;
  width:280px;
}

固定定位 （相对绝对布局区别：固定定位放置的内容会一直停在原位置，即使滚动页面也会悬浮在原位置，广告之类的视图～～）

sidebar {

position:fixed;
top:10px;
right:200px;
}

z-index

z-index 虚拟出一个z轴，z-index越大元素越靠近你，越在上层