day10 css要点补充2

本文详细介绍了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 把元素的底端与父元素字体的底端对齐。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值