布局

盒子模型

1. w3c标准盒子模型

• Important: When you specifythe width and height properties of an element with CSS, you are just settingthe width and height of the content area.
• 我们在css中设计一个块级元素的width和height属性时如.box{width :100px; height:100px}时，其中的width 和height仅仅是对content部分设置
• 总宽度：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

2. IE盒子模型

• width = content+padding+border
• 总宽度：一个块的总宽度= width + margin(左右)
• 注：width已经包含了padding和border值

3. 怪异模型

• 什么是怪异模型？
  “部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核（Trident）的浏览器。

常见css布局

1. 左边固定宽度，右边自适应

left:
float: left;
width: 200px;

2. （单行文本／图片）水平垂直居中

<div class="vertical">content</div>

.vertical{
  height: 100px;
  line-height: 100px;/*值等于元素高度的值*/
  text-align: center;
 }

3. （多行内容垂直居中）

<div class="columns">
  <div class="item">test</div>
</div>

.item{
  padding-top: 30px;
  padding-bottom: 30px;
}
p.s：给出上下一样的padding

4. 盒模型实现（块级）水平垂直居中

<div class="wrap">
  <div class="content"></div>
</div>

.wrap{
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  hieght: 400px;
}
.content{
  width: 100px;
  height: 100px;
  padding:(wrapWidth - contentWidth) / 2;
}

5. 盒模型实现实现水平垂直居中（margin填充）

<div class="wrap">
  <div class="ele"></div>
</div>

.wrap{
  height: 400px;
  width: 100%;
  overflow: hidden;
}
.ele{
  margin-left: auto;
  margin-right: auto;
  margin-top: (wrapHeight - contentHeight) / 2;
  width: 100px;
  hieght: 100px;
}

6. absolute布局水平垂直居中

• 原理：利用left：50%将盒子的左边先置于父容器的中点，然后再将盒子往左偏移盒子自身宽度的50%

<div class="wrap">
  <div class="ele margin"></div>
</div>

.wrap {
  position: relative;
  width: 100%;
  height: 200px;
}
.wrap .ele {
  position: absolute;
  left: 50%;
  top: 50%;
}
.wrap .ele.margin {
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
}

7. absolute+margin:auto实现水平垂直居中

<div class="wrap">
  <div class="ele"></div>
</div>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.wrap .ele {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

• p.s:left 和 top 的 initial value 非 '0'，而是 'auto'。
  原理：如果left、right和width都不为auto，同时margin-left和margin-right都是auto，除非特别情况，它们俩就是相等的

参考文档：

• css布局水平垂直居中
• css水平或垂直居中