原文地址： http://tt-ghost.github.io/2016/07/14/css布局那点事
说到布局，一定离不了自身的尺寸、文档流、相邻元素、父元素等。目的是让元素显示在应该出现的位置（好像是废话），然后其他地方最好也能复用，如果不同分辨率上体验一致就更好了
针对上面这个目的，接下来我们就开始讲讲怎么让元素显示在应该在的位置，开始正题：
理论部分
需要知道的基础知识
以下知识点需要有所了解
默认样式
浏览器对所有标签都有默认样式，比如文字默认是黑色，div默认是 block(块)元素，span默认是 inline (行内)元素等
属性继承
有些属性可以继承，有些属性不能继承，如color可以继承，width就不能，具体哪些可以继承，哪些不能，一个简单方式记忆就是跟文字相关属性大都可以继承，跟布局相关属性大都继承
- 常见的可继承属性：color,font(复合属性),letter-spacing,word-spacing...
- 不可继承属性：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align...
单一属性与复合属性
属性分为单一属性和复合属性，单一属性如 color:red ，复合属性如（以下三中表示等价）:
padding: 10px 20px;
padding: 10px 20px 10px 20px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
CSS单位
尺寸单位
常见的尺寸单位有 px、em、rem、%、pt等等，初学者先记住px和%
颜色
常见颜色表示有以下几种：
- 字符串表示如
color:red，顾名思义，红色 - rgb表示如
color:rgb(0,0,255)，表示red:0, green:0, blue: 255,即纯蓝色 - rgba表示如
color:rgb(0,0,255, 0.5)，比rgb多了一个appha值,即 0至1 的透明度 - 16进制(HEX)表示如
color:#ff0000，如果每连续两个二进制相同，可以简写成一个，如果左边可以简写成color:#f00，字母不区分大小写 - hsl颜色(不常用)，如
color:hsl(120, 50%, 50%)，- 说明：hsl是hue(色调)、saturation(饱和度)、lightness(亮度)首字母缩写，是颜色的另一表示
- 取值：
- hue为 0(红色)-360(红色)，其实是色环的360度，当然也可以为380，其实与 20相同效果；
- sturation为 0%(全灰)-100%(全彩)；
- lightness为 0%(黑色)-100%(白色)；
- hsla颜色(不常用)，如
color:hsl(120, 50%, 50%, 0.5)
关于颜色之间的转化可以进入 传送门
与布局相关的基本属性
- display
- width, height
- max-width, max-height, min-width, min-height
- padding, border, margin
- float, overflow， clear
- position, z-index, top, right, bottom, left
这些都是比较常用的属性，下面逐个做下介绍，如果你对 css盒模型 不了解的话推荐看下之前的一篇文章，传送门
第一组：display
用途
设置元素的显示属性，
取值
常见取值如下
none(隐藏), 常用于用户与页面交互时显示、隐藏元素，隐藏之后的元素，再设置别的属性都不会生效
inline(行内元素)，设置width和height会被忽略, 会随正常文档流从左到右，从上到下布局
block(块元素)，可以设置width, height
inline-block(行内块元素)，兼有inline和block属性值的特点，既能设置width、height，也会随正常文档流左右布局
还有很多其他属性值，如 flex、table、table-cell、table-row、table-column等，其中flex是css3新推出的属性，用法较多，本文暂不介绍。其他属性值使用相对较少
第二组: width, height
设置元素content宽度和高度。如果用百分比如width: 30%则表示为父容器content部分宽度的30%
第三组: max-width, max-height, min-width, min-height
设置元素最大、最小宽高，主要不同分辨率浏览器适配使用，经常媒体查询(@media)一起使用，如：
@media (max-width:1000px){
body: 90%;
}
表示浏览器宽度小于或等于1000px时， body 宽度为父容器的 90%
第四组: padding, border, margin
设置元素的内边距、边框、外边距，这里需要理解盒模型，传送门，这里也不做解释了
第五组: float, clear, overflow
这一组与下一组是难点也是重点。
float属性
用于指定元素是否应该浮动或怎样浮动，取值如下：
none: 不浮动，也是所有元素的默认值，
left: 左浮动，值为left或right时，元素就脱离之前的文档流，其排版只受其他元素(也有float属性且非none的元素)影响。其兄弟元素或父元素如果没有float属性，就会当这个元素不存在，占其位置。所以一旦有了float属性就好像长了翅膀，飞起来后就不跟其他小伙伴玩了，其他小伙伴当然会占用ta之前的位置
right: 右浮动，同上
浮动元素有以下特点：
元素本身会塌陷：如果float之前没有设置width、height或为auto，则元素塌陷后的width、height为内部元素整体占的宽高，其本身会当作类似 inline-block 的元素影响周围元素
听起来有点绕，看下面代码
sub-2
text-1
text-2
// 之前
.sub-1{}
.sub-2{height:10px;width:100px;}
// 之后
.sub-1{float:left;}
.sub-2{height:10px;width:100px;}
第一个样式显示的效果是，三行文本分三行显示，第二个样式显示效果是 sub-2与text-1显示在了一行，而text-2显示在了第二行
第一个样式：显示三行应该不需要解释，sub-2被块元素 .sub-1 包裹，其他同理;.sub-1的与.sub-2相同，宽度为通栏
第二个样式：给 .sub-1 加入float后,其宽高都与.sub-2相同，并且是脱离文档流状态，类似与inline-block显示特性，所以text-1会在其后排版，因为.container没有脱离文档流，所以.text-2会换行显示
留下一个疑问：假如.sub-2高度为30px时会发生什么？欢迎互动
clear属性
清除浮动，主要将有 clear 属性且值为left或right或both的元素在文档中以前的有浮动情况清除掉，使后面的文档不受float干扰，有以下取值
none:不清除浮动
left:清除左浮动
right:清除右浮动
both:清除左右浮动，比较常用
overflow属性
规定当容器内容溢出时如何显示，常见取值如下：
visible:溢出内容会显示
hidden:溢出内容会隐藏
scroll:无论内容是否溢出都会出现滚动条
auto:如果内容溢出会出现滚动条，不溢出则没有
第六组: position, z-index, top, right, bottom, left
这一组最难的一个属性是position，理解当前元素相对谁定位后，其对应的top、right、bottom、left就很好理解了
position属性
CSS布局中，position几乎算是核心中的核心，因为你可以让人任意元素在浏览器的任何位置，也可以让元素影响正常文档流，也可以不影响正常文档流，而且还可以限定子元素定位的相对父亲，所以这么厉害的大招一定要学好，下面一个一个技能来学习，先看下取值：
- absolute:绝对定位，一旦为此值，元素就会从直接父级容器开始找，如果父级元素有设置position属性，且不为static，则就把父级容器当作相对容器，然后停止继续向上查找，如果直接父级没有这个属性，则继续向上，找父级的父级元素，直到满足刚才的条件才停止查找，如果到最外层(html)都没有找到，则相对浏览器窗口，可见找爹的意志之坚定啊！
- relative:相对定位，相对自身的位置，不会脱离文档流，如果同时设置了top:10px，此元素会离之前的位置向下移动 10px 距离，同时对除自身及内部元素以外的元素没有任何影响。
- fixed:绝对定位，只相对浏览器窗口定位，配合top、right、bottom、left可实现指哪定哪的特技
- static:静态定位，所有元素的默认定位方式
z-index属性
用在设置有position属性，且值不为static的元素的显示层级，比如通过fixed定位的两个元素都在浏览器左上角，到底谁在上面，谁在下面？这个问题就只能交给z-index了
取值为负整数、0、正整数，默认值为 -1
top, right, bottom, left
理解position定位后，找到相对元素，设置对应top、right、bottom、left，注意定位 static的元素不会生效
文档流
个人觉得文档流通常有以下特点，可能不够准确
普通文档流就是 inline 及 inline-block 类型的元素从左到右、从上到下排版，相邻元素会互相影响，父元素会作为容器影响子元素
非普通文档流跟普通文档流对应，通常元素设置了position或float属性，使其尺寸大小及位置对兄弟元素不产生直接影响
实战部分
这里仅列出比较常见的布局方式，还有很多其他方式等待你去实现
如果对布局不太熟悉的话，建议每个列子都亲自写一遍，加深记忆
两栏布局
左侧定宽，右侧自适应
方案一 float
.sidebar-right 的 margin-right 也可以改成 padding-left
方案二 position
一个 absolute，脱离文档流后，right元素只要设置个左边距即可
方案三 table-cell
这个例子中 .container 可以不设置，但是推荐写上，通常 table-cell 与父级 table 对应
三栏布局
方案一 float
注意 .content 在DOM中的位置
content
方案二 position
left及right元素设置了 absolute
content
方案三 table-cell
注意 .content 没有设置任何属性
content
定位布局
relative 相对定位
注意相对哪个元素定位
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
position:relative;
top: -30px;
left:130px
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
absolute 绝对定位
注意相对的父元素是 .container 而非 body
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
position:absolute;
top: 150px;
left: 30px
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
fixed 绝对定位
上下滚动浏览器滚动条，观察灰色div位置
再别康桥
作者: 徐志摩
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
position: fixed;
top:100px;
left:50%;
响应式布局
max-width 最大宽
拖动浏览窗口，查看灰色背景div宽度变化
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
media 媒体查询
常用语适配PC和移动端站点，拖动浏览器改变窗口大小试试，窗口小于 767px 时，观察 .box-1、.box-2 的位置
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。