前端中的样式

本文探讨前端样式中使用`float`属性时,由于程序加载顺序导致的样式偏差问题。通过实例分析,解释了样式加载过程,指出代码加载顺序对元素布局的影响,并提供了调整代码顺序实现预期效果的方法。

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

卷首语

前端中有很多样式,常见的有盒子模型、颜色等这些,对于一个初学者来说,常常摸不着头脑,无法随心所欲的将这些应用到实际场景中。在接下来的系列文章中,我会将自己在学习和实践当中遇到的问题、得到的收获进行简单的归纳和总结,发布出来,以飨各位。

问题(–使用过css样式中的float属性后,因为程序加载导致的浮动结果的偏差)

先上图
图片:float样式

从图中table表格的第一行可以看到,有两个checkbox框和两个lable标签,交叉排列,现在需要将它们整体靠右。
但是,很不巧,当使用style="float: right;"样式后,出现的效果是第二行的效果,这个和预想的不一样,理想中的效果应该是第四行中的样式才对。

问题的原因在于程序的加载顺序,我们都知道程序的加载是从上到下的,但是,在从上到下的过程中,程序的样式也会加载,这个导致了先加载的代码先执行,后加载的代码后执行于是样式也就有了先后

要想将样式调成第四行的状态,需要了解清楚代码的加载顺序,即代码通常是从上到下,从左到右进行加载的,在执行第二行代码时,因为style="float: right;"样式起了作用,先加载的input标签会先浮动到右边,于是复选框也就到了右边,后加载的lable标签则紧随其后靠着input标签进行排列,于是,也就成了第二行的样子。

在执行第三行代码时,设想了同一行代码的执行顺序,想看看它是从左到右还是从右到左。结果很明显,它是从左到右的。

第四行的代码是调整了顺序的,效果跟预想的一样,它们跑到了表格的右边→_→

代码

下面是测试的代码,有兴趣的朋友可以跑一跑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关于前端样式中的float用法</title>		
	</head>
	<body>
		<div style="width: 80%;display: block;">
			<table border="1" style="width: 99%;">
				<tbody >
					<tr>
						<td  colspan="3">
							<input type="checkbox" name="" id="" value="" style="float: left;"/>
							<label style="float: left;">天天向上</label>
							<input type="checkbox" name="" id="" value="" style="float: left;"/>
							<label style="float: left;">天天向上</label>
						</td>
					</tr>
					<!--注意:这个tr标签中的内容和下面的tr标签中的内容有很明显的区别,						
					lable标签的浮动位置跟预想的不一样,这个主要是因为程序在加载的过程中是从上到下,从左到右的-->
					<tr>
						<td  colspan="3">
							<input type="checkbox" name="" id="" value="" style="float: right;"/>
							<label style="float: right;">天天向上</label>
							<input type="checkbox" name="" id="" value="" style="float: right;"/>
							<label style="float: right;">天天向上</label>
						</td>
					</tr>
					<!--这个tr标签写成一行是在测试程序是从左向右读,还是从右向左读,顺序不同标签产生的效果不同-->
					<tr>
						<td colspan="3">
							<input type="checkbox" name="" id="" value="" style="float: right;"/><label style="float: right;">天天向上</label><input type="checkbox" name="" id="" value="" style="float: right;"/><label style="float: right;">天天向上</label>
						</td>
					</tr>
					<!--与上面两个标签一样,都是比较程序的加载顺序-->
					<tr>
						<td  colspan="3">
							<label style="float: right;">天天向上</label>
							<input type="checkbox" name="" id="" value="" style="float: right;"/>
							<label style="float: right;">天天向上</label>
							<input type="checkbox" name="" id="" value="" style="float: right;"/>
						</td>
					</tr>					
				</tbody>				
			</table>
		</div>
	</body>
</html>

卷尾语

学习是件麻烦枯燥的事,特别考验人的耐心,没有长期奋战,点滴积累的水磨功夫,可能会一事无成。
故而需时时回顾,日日坚持,能坐得冷板凳,方有进益。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值