大家在制作网页时,两个DIV之间是不是经常用到margin属性呢。 margin在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。 我在制作的过程中,发现了一个问题,两个DIV之间用margin来控制间距的时候,如果你制作的网页是一个比较复杂内容较多的话,把网页放在IE和火狐两个浏览器测试,会发现,有些margin属性在火狐浏览器中会被忽略,也就是说DIV之间的间距消失了,margin属性没有起到作用,也让网页版面变得不规整了。不单是margin属性,padding属性也有不管用的,或是在火狐浏览器中显示的乱七八遭。 通常的解决方法,我们会在两个浏览器不断的测试效果下,修改CSS中margin或padding所对应的属性值,即废时又浪费感情。我在一愁莫展之际,突然对clear属性产生了兴趣,于是对它进行了严格的体检,最后很兴奋的发现了它的好处。 两个DIV之间不用写什么margin属性,用clear当间距是最好的办法了(我个人认为),这样一来,网页在两个浏览器之间运行的效果都一样,少了很多麻烦,我们只需定义一个clear属性,在DIV之间调用一个class类为clear的“DIV隔断”就行了: CSS样式表中clear的属性设置: .clear{ clear: both; font-size:1px; width:1px; visibility: hidden; } 网页中的运用: <div id=01>第一个DIV</div>
------------------------- 在DIV + CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,但问题出现了,当前面并列的多个DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。使用Clear属性正好可以解决这一问题,下面引用帮助的介绍: Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed. Note: This property does not always work as expected if it is used along with the "float" property. Inherited: No 可用值
举例 <style type="text/css"> 如果没有Clear这一层,“区块3”会紧接区块2并列在同一行。 |
两个DIV之间的间距,clear属性灵活应用(转载,学习一下)
最新推荐文章于 2022-12-21 00:15:49 发布