码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型之margin相关技巧!

时间:2017-07-02 14:20:29      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:top   水平居中   src   com   isp   font   overflow   ima   一个   

废话不多说,直接进入主题,margin相关技巧。

1、设置元素水平居中:margin:x auto;

2、margin负值让元素位移及边框合并。

外边距合并

  指当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决外边距合并的方法:

  a、使用这种特性。

  b、设置一边的外边距,一般设置margin-top

  c、将元素浮动或者定位(元素浮动或定位时,不会出现margin合并)

margin-top塌陷

  在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:

  a、外部盒子设置一个边框

  b、外部盒子设置overflow:hidden

  c、使用伪元素类:

  .clearfix:before{

    content:‘‘;

    dispaly:table;

  }

技术分享技术分享

盒子模型之margin相关技巧!

标签:top   水平居中   src   com   isp   font   overflow   ima   一个   

原文地址:http://www.cnblogs.com/qijunjun/p/7105816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!