css_layout

定位布局相关属性：

1.盒模型：width；height；padding；border；margin；line-height；
2.布局定位：display；position；【top，right，bottom，left】；z-index； float；clear；overflow；clip ；flex；vertical-align；box-sizing；

布局：

页面布局是图形设计的一部分，它处理页面上视觉元素的排列。它通常涉及组织的组成原则，以达到特定的传播目标。

网页布局：

通过HTML，CSS，javascript等相关技术对网页进行合理的排版，以达到更有效的传播效率的方式。【最主要的手段还是HTML+CSS；针对兼容性有时可能会用到javascript。】

css布局类型：

1.居中：水平居中；垂直居中；
2.两栏布局；
3.三栏布局；

实现方式：

水平居中：

1.对目标元素父元素：{text-align：center；}
2.对目标元素：{margin：0 auto；width：xx}【一定要指定宽度】
3.对目标元素：{margin：0 auto；display：table；}【IE6，7需要调整结构】
4.对目标元素父元素 {position:relative;}；
对目标元素{position:absolute;left:50%;transform:translate(-50%);}；【IE9+等可用】
【或者使用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好】
5.【第一种方法】
.parent{display:flex;justify-content:center;}
【第二种方法】

1 2	.parent{display:flex;} .child{margin:0 auto;}【Flex布局兼容较差】

垂直居中

1.单行:
{ padding-top: 30px; padding-bottom: 30px;}【上下同内边距】；
{ height: 100px; line-height: 100px; white-space: nowrap;}【设置行高和块高度相等】
2.多行：
对目标元素：{ padding-top: 30px; padding-bottom: 30px;}
【上下同内边距；警惕垂直方向背景蔓延到padding充满父元素，添加background-clip: content-box;解决】；
对目标元素父元素：

{
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}，

对目标元素：

{
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

【对大小固定的元素；使用类表格布局】
对目标元素的父元素：

{
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}

对目标元素：

{
  margin: 0;
  padding: 20px;
}

两列布局

左列定宽，右列自适应
右列定宽，左列自适应
一列不定宽，一列自适应

三列布局

1.流体布局：左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
2.BFC布局： BFC 区域，不会与浮动元素重叠。缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
3.双飞翼布局：利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。让Main变成了BFC元素，屏幕宽度缩小Main也不会被挤下去，圣杯布局会被挤下去。
4.圣杯布局：相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多
5.Flex布局：简单实用，未来的趋势，需要考虑浏览器的兼容性。
6.Table布局：类表格布局；缺点是无法设置栏间距。
7.绝对定位布局：简单实用，并且主要内容可以优先加载。

参考文章：
链接1
链接2
链接3
链接4
链接5
链接6
链接7