html布局_今日份——学习HTML页面布局

1、学习网页资料1，HTML圣杯布局及双飞翼布局的一些信息

圣杯布局和双飞翼布局（前端面试必看）​www.jianshu.com

2、盒子模型的一些基本概念

HTML CSS + DIV实现整体布局​blog.csdn.net

盒子模型的相关属性

• margin（外边距/边界）
• border（边框）
• padding（内边距/填充 ）

盒模型的层次关系

我们通过一个经典的盒模型3D立体结构图来理解，如图：

从上往下看，层次关系如下：

第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)

从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
图将在背景色的上方显示

11、水平居中和垂直居中

水平居中包含两种情况：

块级元素的水平居中：margin:0px auto;

文字内容的水平居中：text-align: center;

垂直居中：

常见的单行文字的垂直居中可设置文字所在行的height与

行高样式属性一致，比如：

div{

width: 400px;

height: 400px;

line-height: 400px;/*行高与div高度一致*/

}