前端中的样式

最新推荐文章于 2025-05-20 16:42:57 发布

原创最新推荐文章于 2025-05-20 16:42:57 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端样式 #float #程序加载顺序 #行内属性的优先级

前端专栏收录该内容

1 篇文章

订阅专栏

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

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

前端中的样式系列---No.001

卷首语
- 问题（--使用过css样式中的float属性后，因为程序加载导致的浮动结果的偏差）
- 代码
卷尾语

卷首语

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

问题（–使用过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>