• 避免使用不必要的float(display:inline,position:relative)


    float中文翻译为浮动,很形象的翻译,在CSS很常用,当你需要吧两个块级元素定排放在同一高度上经常会用到float,先看一下float的 属性。

    先看一下float可能的值:

    float:left-元素向左浮动

    float:right-元素向右浮动

    float:none-不浮动

    float:inherit-从父类的float属性继承

    既然说道浮动,那么就有必要提一下浮动的清理,因为如果一个元素的float一旦被设定后将影响其左右的元素。当我们不需要浮动时应该即时清理。清 理浮动使用clear。clear的属性和float相当,只是多了一个属性

    clear:left/right/inherit/none (清理浮动、不浮动、以及继承清理的属性)

    clear:both-清理所有浮动

    上面,简单的对浮动与清理浮动做了一个解释,浮动在实际应用种是非常广泛的,但也有很多地方不应该使用float,或者我们有更好的方法来解决。看 那些地方我们有更好的办法来解决。

    1、无序链接,经常可以看到一些网站的关键字链接,或者产品关键字,已经分类等部分会用到比 较短的链接混乱排列,有些人使用<ul><li>配合float来做链接,我想这个是完全没有必要的,你可以设 定<li>标签的display:inline,吧<li>设定为线级元素来达到混排的效果,不需要使用float。甚至这样的 链接完全可以由<p><a>这样的标签来代替,岂不是更简洁?


    2、我们在做一个区块的时候经常使要用more(更多)来链接相关的页面,这样的标题栏往往左边是标题,右边为more链接,很多人喜欢用 float来做,这样在float之后还要多一个标签来clear,感觉很繁琐,甚至更有人用整张图片配合热点来做,我觉的这些都不是很好的办法。其实像 这种效果完全可以用定位来做,设定title的position:relative。然后定义more这个标签的right:0或者不需要那么右,你可以 详细设定它的位置。这样省去了float以及clear,结构也更清晰了。


    3、多列不规则布局,我们经常要用到3列布局,这种布局由于规则,但是为了美观,我们必须定义3列的总宽度,但是根据CSS中浮动的总宽必 须<99%的父标签宽度,否则经常会在某些浏览器下面出错,但是99%的宽在宽屏显示器下面很明显会出现10px以上的错位,所以这是一个很郁闷的 问题,其实在碰到这类问题时我们应该有限使用position定位来解决问题,而不是浮动,这个问题在这里就不多说了,下面会有一篇关于定位的详细文章。

    总结一下,CSS下面的浮动,虽然很是常用,但是我们要坚持几条原则,能有更好的解决办法(display,position)的时候我们坚决使用 float,同一高度的浮动总宽度(包括margin,padding)应该小于等于(<)父元素的宽度,记住是小于,而不是等于,如果是等于可能 你会在别的浏览器上看到你不想看到的结果。

  • 相关阅读:
    Idea中重建maven模块,dependencies引入为空的解决办法
    HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标
    HTML 5 视频
    JavaScript 使用反斜杠对代码行进行折行
    HTML <b>、 <strong> 、<big>、<small>、<em>、<i>、<sub>和<sup> 标签
    JavaScript concat() 方法-连接两个或多个数组
    JavaScript Array(数组)对象
    JavaScript indexOf() 方法和 lastIndexOf() 方法
    JavaScript String(字符串)对象 实例
    JavaScript 对象
  • 原文地址:https://www.cnblogs.com/showker/p/1741477.html
Copyright © 2020-2023  润新知