html元素类型与居中问题详解

来源：互联网发布：矩阵qr分解可以干什么编辑：程序博客网时间：2024/06/16 22:33

深刻理解盒子模型与元素类型，有助于快速确定布局方式：

一、盒子模型

从外到里：margin、border、padding、content。

关键：height与width指的是content文本区的尺寸。

二、元素类型及本质区别

1、inline：内联元素。

本质特点：默认baseline对齐，且content尺寸刚好包含文本（所以设置width、height无效），故不单独占据整行。

2、block：块元素。

本质特点：单独占据一整行，该行行高为该块元素高度。

3、inline-block：内联块元素。

本质特点：兼具inline元素与block元素的一些特点，表现为：对自身而言仍是块元素，对一整行而言，又被视为内联元素，可并排处于同一行。

三、居中问题

从元素类型考虑，且使用margin与padding：

1、对inline元素。

内联元素的整体高度只取决于总内容的高度，因而margin-top/bottom与height均无效。故使inline元素居中一般方法。

(1)、padding：Apx Bpx；

作用：使内容相对于自身border居中。

注意：此时虽然高度被padding撑大了，但实践可知道，它在父元素中体现的高度仍然不变，可复制代码一运行。解决办法：调整父元素行高，同时合理设置设置A的数值。

2、对block元素。

(1)、margin：0 auto;

作用：自身相对于父元素水平居中。

(2)、padding：Apx Bpx；

作用：使内容相对于自身border居中。

3、对inline-block元素。

对inline-block一般只为了使内容居中。

(1)、padding：Apx Bpx；

作用：使内容相对于自身border居中。

不使用margin、padding时：

1、本身不为内联元素，使内容垂直居中通用方法：

设置自身height、line-height相同。

说明：关键在于理解line-height，line-height指从元素自身y=0的位置到一行底部的高度，因为行的内容本身在一行内使垂直居中的，当行高等于自身高度时，内容也就相对于自身垂直居中。

2、内联元素相对于其它内联元素的垂直对齐方式：（同样适用于内联块元素）

vertical-align：middle；

作用：设置自身在一行中的对齐方式，取值baseline、bottom、top等，因而与line-height相关。因为是同行内不同元素间的对齐方式，所以只对inline与inline-block。

3、使内容水平居中通用(非内联元素)：

text-align：center；

说明：text-align指内部元素相对于自己的水平对齐方式，可取left、center等值。

代码一：

<!DOCTYPE html><html><head><title>研究居中问题</title><meta charset="utf-8"><style type="text/css">div{width: 200px;height: 50px;border:1px solid black;}span{display: inline;padding: 10px 10px;background-color: gray;}</style></head><body><div><span>你好</span></div></body></html>

0 0