day10 css要点补充2

最新推荐文章于 2025-01-21 20:35:50 发布

原创最新推荐文章于 2025-01-21 20:35:50 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IT

日志专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了CSS中行级与块级元素的嵌套规则，如何实现容器的水平垂直居中，以及如何通过display属性和vertical-align属性实现文本类元素的底对齐。这些技巧对于前端开发者来说至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、行级元素只能套行级元素，块级元素能套任何元素

例外：
p标签不能套块级元素

<p>
	<div></div>
</p>

a标签不能套a标签

<a href="">
	<a href=""></a>
</a>

2、容器水平垂直居中

div{
	width:100px;
	height:100px;
	background-color: red;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-50px;
	margin-left:-50px;
}

设置50%是以左顶点为对象
在这里插入图片描述

要设置margin使位置往左上移动半个身位
在这里插入图片描述

3、文本类元素底对齐

<span></span>123

span{
	font-size:50px;
	display: inline-block;
	width:200px;
	height:200px;
	background-color:red;
}

span改为inline-block后，文本与其底对齐。
在这里插入图片描述

在框内加入文本后，外面的文本会与里面的文本底对齐。

<span>123</span>123

在这里插入图片描述

我们可以通过css的vertical-align 属性设置元素的垂直对齐方式。
列举几个值：
top把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐。