zoukankan      html  css  js  c++  java
  • CSS布局的8个你需要掌握的技巧

    1.若有疑问立即检测

      在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

    2.使用浮动功能时记得适当清除指令 

      浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

    3.边界重合时利用padding或border来避免

      您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

    4.尝试避免同时对元素指定padding/border以及高度或宽度

      Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

    5.不要依赖min-width/min-height

      Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

    6.若有疑问,先减少百分比

      有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

    7.记住“TRouBLed”写法

      Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

    8.只要不是零的值,都要指定单位

      CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)

    9. float元素的父元素不能指定clear属性
      MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。

    10. float元素务必指定width属性
      很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
      另外指定元素时尽量使用em而不是px做单位。

    11. float元素不能指定margin和padding等属性
      IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

  • 相关阅读:
    x64 平台开发 Mapxtreme 编译错误
    hdu 4305 Lightning
    Ural 1627 Join(生成树计数)
    poj 2104 Kth Number(可持久化线段树)
    ural 1651 Shortest Subchain
    hdu 4351 Digital root
    hdu 3221 Bruteforce Algorithm
    poj 2892 Tunnel Warfare (Splay Tree instead of Segment Tree)
    hdu 4031 Attack(BIT)
    LightOJ 1277 Looking for a Subsequence
  • 原文地址:https://www.cnblogs.com/l1pe1/p/2003357.html
Copyright © 2011-2022 走看看