css 盒模型
标准盒模型:在一个document中,每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸,属性–像它的颜色,背景,边框方面 – 和位置是渲染引擎的目标。
在CSS中,使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边:外边距边, 边框边, 内填充边 与 内容边。
1.ie678怪异模式(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度
2.chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度
盒模型的使用场景:
设置子类元素的margin或者border时,可能会撑破父层元素的尺寸,这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中,这样就不会存在撑破父层元素的情况了
flex 弹性盒布局
未知宽高元素垂直水平居中
css3 transform1
2
3
4
5
6
7
8
9.container {
position: relative;
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
table-cell1
2
3
4
5
6
7
8.container {
display:table-cell;
text-align:center;
vertical-align:middle;
#center {
}
}
flex布局1
2
3
4
5
6
7
8.container {
display:table-cell;
text-align:center;
vertical-align:middle;
#center {
}
}