1、打开HBuilder开发软件并在Web项目中创建一个新的静态页面。
2、将三个div元素插入body元素并将其类设置为AA,BB和CC。
3、预览静态页面,您可以看到页面效果,即中上层和下层。
4、分别设置AA,BB和CC三个类的样式属性,包括宽度,高度和背景颜色。
5、我们再次设置body元素样式属性。
body{
text-align: center
vertical-align: middle
display: box
display: -moz-box
display: -webkit-box
orient: horizontal
-moz-box-orient: horizontal
-webkit-box-orient: horizontal
}
6、分别添加字体的垂直分布。
text-align: center
vertical-align: middle
1、盒模型与怪异模型的设置
当设置为box-sizing:content-box时,将采用标准模式解析计算(默认模式);
当设置为box-sizing:border-box时,将采用怪异模式解析计算;
2、盒模型
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),
元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分,
这就是盒子模型。
在标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin
3、怪异盒模型
在怪异模式下,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin