前端中的样式系列---No.001
卷首语
前端中有很多样式,常见的有盒子模型、颜色等这些,对于一个初学者来说,常常摸不着头脑,无法随心所欲的将这些应用到实际场景中。在接下来的系列文章中,我会将自己在学习和实践当中遇到的问题、得到的收获进行简单的归纳和总结,发布出来,以飨各位。
问题(–使用过css样式中的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>
卷尾语
学习是件麻烦枯燥的事,特别考验人的耐心,没有长期奋战,点滴积累的水磨功夫,可能会一事无成。
故而需时时回顾,日日坚持,能坐得冷板凳,方有进益。