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

最新推荐文章于 2024-04-12 11:37:26 发布

Liekkas_BX

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量652

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_19865749/article/details/52023898

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

一、盒子模型

从外到里：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>