开发技巧总结CSS

发表于 |
字数统计: 617 | 阅读时长 ≈ 2

让元素在你的视野消失

设置display:none(该元素从文档流中删除，对布局无影响)

  • 优点
    * 简单暴力，不需要多余代码
  • 缺点
    * 元素从文档删除，对于seo不利

visibility: hidden(元素隐藏了肉眼看不见，但元素依然存在那里，会影响布局)

  • 优点
    • 相对display会利于SEO优化
  • 缺点
    • 该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible

opacity: 0 (仅仅是看不见而已，该元素还是在那，影响布局)

  • 优点
    • 简洁
  • 缺点
    • IE6~8不兼容
      • 兼容写法：filter:alpha(opacity=x)，x为元素的不透明值，从10~100,100为全不透明

text-indent: 100%(-999em)

  • 优点
    • 利于搜索引擎
  • 缺点
    • text-indent属性仅适用于块级元素，行内元素比如span对其不感冒
  • 出现横向滚动时可以设置
    • direction: ltr(默认) =>direction 属性规定文本的书写方向。
    • overflow: hidden

position: absolute top:-999em or left:-999em(脱标)

  • 优点
    • 信手拈来，随意摆放
  • 缺点
    • 写的太多

font-size:0

  • 优点
    • IE8支持，6-7不支持
  • 缺点
    • 仅当元素由内容撑起时才有效，如已经对元素设置宽高，则无效

细说盒子模型

(以下统一以<div>文章</div>为例进行叙述)(border以内区域包括border成为“框”)

一个盒子就是其在文档流中所占据的空间

W3C(content+padding+border+margin)

  • 为div设置宽高后，再去为其设置padding，“框”会被撑大(因为width，height仅设置内容区域)
  • margin 设置后，增加的是“框”之间距离，实际上盒子与盒子还是紧紧挨着的，，因为margin也属于盒子的一部分
  • 继续为其设置display：inline后，
    • 其宽高属性失效，“框”的大小即文字所占据的空间。
    • padding属性正常设置，但是其并不会将旁边块状元素挤开,并且其还会悬浮于周边块元素之上
    • margin属性只有左右有效，上下margin失效

IE盒子模型(content+padding+border+margin)

  • 区别就是，div的宽高就是“框”的宽高，而不是单纯的内容宽高（其包含了border+padding）
  • 为div设置宽高后，再去为其设置padding，“框”不会被撑大，但是会减小content的大小(因为width，height仅设置内容区域)