您现在的位置是：网站首页> 编程资料编程资料

CSS的margin属性在页面布局中的使用攻略浅谈css margin重叠CSS 之margin知识点(必看)css布局之负margin妙用及其他实现细说CSS中margin属性的使用 深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置CSS属性探秘系列(六)：margin解决margin 外边距合并问题

2023-10-22 261人已围观

简介 margin属性可以决定很多HTML元素的宽高度,因而在布局方面也能够有很重要的作用,接下来我们就来看一下CSS的margin属性在页面布局中的使用攻略

基础

1.元素containing-box宽高度等于内容宽度

HTML

XML/HTML Code复制内容到剪贴板
  1. <div class="wrap">  
  2.     <div class="item1">div>  
  3.     <div class="item2">div>  
  4. div>   

CSS

CSS Code复制内容到剪贴板
  1. .wrap {   
  2.    float: left;   
  3.    border: 2px solid #000;   
  4.  }   
  5. .item1 {   
  6.    width: 100px;   
  7.    height: 100px;   
  8.    background: #fdf;   
  9.    margin-left: 10px;   
  10.    margin-top: 10px;   
  11.    margin-right: 20px;   
  12.    margin-bottom: 30px;   
  13. }   
  14. item2 {   
  15.    width: 50px;   
  16.    height: 50px;   
  17.    background: #adf;   
  18. }  

2016526113404989.png (276×404)

能满足原理1的条件只有一种，元素不设宽度且不在文档流中，此时，父元素wrap产生的containing-box的宽高宽度等子元素border-box的宽高度加上外边距的宽高度，也就是说，子元素的margin值也是其containing-box的一部分。margin一共有两类参考线，第一类是margin-top与margin-left的参考线,第二类是margin-bottom与margin-right的参考线,第一类margin的参考线是以其所处的containing-box的边缘线为参考线,如上例所示,当调整元素.item1的margin-top与margin-left的值时,元素.item1所处的containing-box的大小也在发生变化因此其边缘线也在不断变化同时也就导致.item1元素自身的位置也在发生变化,看起来就是.item1自身发生了移动。第二类margin的参考线是以元素自身的边缘线(外边距的外侧为边缘线)为参考线,同样的,调整上例中的margin-bottom值,.item1的margin-bottom也在不断的发生变化,也就是说其自身边缘线在不断的移动,同时导致了.item2的移动。根据上面的论述,我们可以得出结论,外边距的调整也就等于让其自身相对的参考线的位置在发生移动,同时导致相对于参考线运动的元素发生移动。元素自身相对于containing-box的边缘线移动而移动,与元素自身为兄弟关系的元素相对于元素自身的边缘线移动而移动。参考线示意图如图所示,按箭头所指方向使参考线变化的margin值都为正值。
综上，我们可以利用margin对元素自身进行移动,同时也可让其相邻元素进行移动,移动的同时我们需要知道的是其所处的containing-box的大小也在发生变化。
2016526113425684.png (800×709)

综上，当元素宽高度等于内容宽高度时，可通过调整内容的margin值来调整其containing-box的大小，因为containing-box的变化也就会导致元素本身的移动，也就是说既可以移动元素，也可调整元素与元素之间的间距。

2.元素内容宽度等于其containing-box的宽度

XML/HTML Code复制内容到剪贴板
  1. <div class="wrap">  
  2.    <div class="wrap-inner">div>  
  3. div>  
CSS Code复制内容到剪贴板
  1. .wrap {   
  2.     width: 100px;   
  3.     border: 2px solid #000;   
  4.     margin: 0 auto;   
  5. }   
  6. .wrap-inner {   
  7.     height: 50px;   
  8.     background: #fdf;   
  9. }  

2016526113532427.png (432×228)

上例中,元素wrap-inner的border-box宽度加上margin的大小等于其containing-box的宽度,因此当containing-box宽度固定,根据公式'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block,调整其自身margin-left或margin-right值,便会使wrap-inner自身大小发生变化,margin-left为正值且值逐渐变大,则wrap-inner自身宽度逐渐变小,若margin-left为负值且逐渐变小,则wrap-inner自身宽度逐渐变大,margin-right同理。一定要注意这里的宽度继承和width:100%是有本质区别的，因为width:100%就等于它的containing-box的100%和它的margin，border或者padding都木有关系，具体可看我的关于宽度与高度讨论的系列文章三里的例子，罗嗦了一点，但是这里是容易犯错误的地方。一定要注意，一定要注意，一定要注意！！！。重要的事情说三遍。

将margin-left和right调整为-10px,如图,根据计算,wrap-inner变宽
2016526113558261.png (538×220)

将margin-left和right调整为10px,如图,根据计算,wrap-inner变窄
2016526113614987.png (430×228)

综上，当元素宽或高度等于其containing-box的宽度或高度时,且containing-box的宽度固定我们便可以利用margin对其进行自身宽度大小的调整。也就是说宽高度和containing-box有关系时，我们利用margin可进行内里元素大小的调整。

不同元素margin的计算
行内级元素
Inline，非置换元素:如果margin值为auto，则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
Inline-block,非置换元素在文档流中:同上
块级元素
块级非置换元素，在文档流中
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
下面的情况下，如果margin值为auto

如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。
块级置换元素，在文档流中
同块级非置换元素一样。

小结
行内级置换元素和非置换元素，在margin值为auto时，margin-left和margin-auto的计算值都为0。
块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
如果width是auto值，那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto，使用的值相等，那么就相对于包含块水平居中。

利用Margin进行布局
通常在布局中我们会遇到那些问题呢？下面是我自己实践中遇到的一些问题

问题1
当我们拿到一份设计稿，然后这份设计稿有像下面这样的布局，整体居中，里面元素排一排，当然布局的方式会有很多种，那么如果我们采用浮动布

上一篇：CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)HTML5的video标签的浏览器兼容性增强方案分享Win10 Edge浏览器无缝兼容Chrome扩展主流浏览器css兼容问题汇总浅谈JavaScript中浏览器兼容的问题

下一篇：图解CSS3制作圆环形进度条的实例教程css制作收缩圆环旋转效果实例代码css3 clip实现圆环进度条的示例代码CSS实现圆环旋转加载动画实现CSS圆环的5种方法(小结)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网