盒子模型
- 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(左右)
- IE盒子模型
- width = content+padding+border
- 总宽度：一个块的总宽度= width + margin(左右)
- 注：width已经包含了padding和border值
- 怪异模型
- 什么是怪异模型？
“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核（Trident）的浏览器。
常见css布局
- 左边固定宽度，右边自适应
left:
float: left;
width: 200px;
- （单行文本／图片）水平垂直居中
<div class="vertical">content</div>
.vertical{
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
text-align: center;
}
- （多行内容垂直居中）
<div class="columns">
<div class="item">test</div>
</div>
.item{
padding-top: 30px;
padding-bottom: 30px;
}
p.s：给出上下一样的padding
- 盒模型实现（块级）水平垂直居中
<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;
}
- 盒模型实现实现水平垂直居中（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;
}
- 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;
}
- 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，除非特别情况，它们俩就是相等的
参考文档：
