盒子模型
- 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中設(shè)計一個塊級元素的width和height屬性時如.box{width :100px; height:100px}時，其中的width 和height僅僅是對content部分設(shè)置
- 總寬度：一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
- IE盒子模型
- width = content+padding+border
- 總寬度：一個塊的總寬度= width + margin(左右)
- 注：width已經(jīng)包含了padding和border值
- 怪異模型
- 什么是怪異模型悯姊？
“部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式”窄做，怪異模式主要表現(xiàn)在IE內(nèi)核（Trident）的瀏覽器。
常見css布局
- 左邊固定寬度搅轿，右邊自適應(yīng)
left:
float: left;
width: 200px;
- （單行文本／圖片）水平垂直居中
<div class="vertical">content</div>
.vertical{
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
text-align: center;
}
- （多行內(nèi)容垂直居中）
<div class="columns">
<div class="item">test</div>
</div>
.item{
padding-top: 30px;
padding-bottom: 30px;
}
p.s：給出上下一樣的padding
- 盒模型實現(xiàn)（塊級）水平垂直居中
<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;
}
- 盒模型實現(xiàn)實現(xiàn)水平垂直居中（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實現(xiàn)水平垂直居中
<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，除非特別情況斗遏，它們倆就是相等的
參考文檔：
