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

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

一、盒子模型

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值