（转）margin的几种使用

最新推荐文章于 2022-02-13 09:59:32 发布

京金

最新推荐文章于 2022-02-13 09:59:32 发布

阅读量423

点赞数

分类专栏： html web

html 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

web

6 篇文章 0 订阅

订阅专栏

原文链接：
https://www.cnblogs.com/daizixiaobai/p/5724010.html

原文中给出4种使用：

1.关于margin的百分比特性。

2.关于margin的auto的作用机制。

3.关于margin的重叠。

4.关于margin的负值。

1.关于margin的百分比特性：

1.）如果子元素没有绝对定位，那么设置子元素的margin值为一个百分比值，它是根据父元素的width值计算的。
2.）如果子元素设置绝对定位，那么子元素的margin百分比值的计算根据最近一层的有position：relative或absolute的元素定位

2.margin的auto的使用

1.)使用margin:0 auto进行子元素在父级元素（都是块元素）中水平居中
2.）因为默认的是水平流式布局，所以只能水平居中，要变更，需要改变布局方式：
	writing-mode:vertical-lr;这样就可以垂直居中。
	当然可以使用其他方式，比方说display:inline-block之后进行vertical-align：middle

示例

    <style>
        .one{
         width:400px;
         height: 200px;
         border:1px solid blue;
        }
         .two{
          border:1px solid red;
          width:150px;
          height: 100px;
          display: inline-block;
         vertical-align:middle;

         }
         .three{
             height: 100%;
             display: inline-block;
             width:0;
             vertical-align:middle;
         }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>

继续

3.使用绝对定位
<div style="width: 500px; height: 300px; position: relative;">
    <div style=" width: 100px; margin: auto; height: 100px; position: absolute; top: 0; right: 0; left: 0; bottom: 0" ></div>
</div>
同样的可以使用一种类似,示例如下

示例：

<style>
        .one{
         width:400px;
         height: 200px;
         border:1px solid blue;
         position: relative;
        }
         .two{
          border:1px solid red;
          width:150px;
          height: 100px;
          position: absolute;
          top:50%;
          left:50%;
          margin-top:-50px;
          margin-left: -75px;
         }
        
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>

3.margin重叠问题：

margin的重叠现象:

前提条件的：

1.必须为block水平元素（不包括float和absolute元素）；

2.不考虑writing-mode，只发生在垂直方向；

margin重叠通常出现在三种情形下

第一种：相邻两个兄弟元素

第二种：父元素和第一个或者最后一个子元素
	解决：父元素加入overflow: hidden; 便可以清除重叠机制.或者padding和border
		margin-top重叠条件：
		
		1.父元素费块状格式化上下文元素
		
		2.父元素没有border-top和padding-top值
		
		3.父元素和第一子元素没有inline元素分隔
第三种：空的block元素；

京金

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（转）margin的几种使用

原文链接：https://www.cnblogs.com/daizixiaobai/p/5724010.html原文中给出4种使用：1.关于margin的百分比特性。2.关于margin的auto的作用机制。3.关于margin的重叠。4.关于margin的负值。1.关于margin的百分比特性：1.）如果子元素没有绝对定位，那么设置子元素的margin值为一个百分比值，它...
复制链接

扫一扫