08月13, 2012

margin使用技巧

margin为边界的意思,与Padding一样属于CSS属性,而padding是填充的也是,margin是指边框与外部元素的距离,一般我们配合padding,border(边框)一起使用就可以达到很好的效果,网页中最常用的也是这几个。

margin也支持简写,如果用DW直接生成的代码是会有很多的。而我们首手写的话会减少很多,并且还可以加快浏览器渲染,那既然这样我们何乐而不为呢。

  • margin:10px 5px 1px 10px 其中顺序代表,上右下左
  • margin:10px 5px 8px 其中代表 上10,左右5,下8,这里是如果作用数值一样的话可以使用一个
  • margin:10px 5px; 其中代表 上下10 ,左右5
  • margin:10px 这里代表上下左右都是10

技学习吧提醒你使用Marin中的技巧:

  • 如果左右数值一样可以使用一个代表如 margin:10px 5px 8px,其中5是左右的值,但是如果上下这样是不可以的,比如 10px 5px 7px 你想让上下为10 ,左为5 右为7,但是这样是不对的。
  • 如果数值为0的话可以不写px,否则必须写,不然不管用。
  • 如果是简写方式不能带-top,-bottom等属性,直接用margin:就行
  • IE6中的BUg:如果你设置过浮动,在使用margin的话IE6就会认为有双倍的margin效果,你设置margin-right:1px,IE6就会认为有2px的,解决的办法是给这个容器设置display:inlineIE6就兼容了
  • CSS由上往下开始,你可以这样:margin:10px;margin-top:0;我们先看,第一句让边界都为10,第二句则让上边界没有,那么就会达到左右下边界10,上为0,这里提醒的是如果你的maring-top:0放到margin:10px上面就会都认为有10px的边界的。注意这里的顺序。

本文链接:https://xuexb.com/post/margin.html

-- EOF --

发表于 2012年08月13日 15:33:57 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 15:33:57

提醒: 本文最后更新于 3464 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。

AltStyle によって変換されたページ (->オリジナル) /