margin

作者: 裁尘的人儿 | 来源:发表于2020-09-14 21:41 被阅读0次

盒模型相关知识点总结
css第三节（2）
css学习之margin属性
4.CSS布局篇之margin负值问题
css中的内外边距和背景
CSS外边距
html css
margin
margin
margin

1. margin left用法：
margin-left:10px; 这个意思距离左元素块距10像素，可跟百分比如（margin-left:10%; 距离左元素块10%的距离）

2. margin right用法：
margin-right:10px; 这个意思距离右边元素块距10像素，可跟百分比如（margin-right:10%; 距离右边元素块10%的距离）；

3. margin top用法：
margin-top:10px; 这个意思距离顶边元素块距10像素，可跟百分比如（margin-top:10%; 距离顶边元素块10%的距离）

4. margin bottom用法：
margin-bottom:10px; 这个意思距离低边元素块距10像素，可跟百分比如（margin-bottom:10%; 距离底边元素块10%的距离）

margin简写：

margin:10px; 意思就是上下左右元素块距离就是10px（10像素）
等于
margin-top:10px; 
margin-bottom:10px; 
margin-left:10px; 
margin-right:10px; 
一样效果简写；

margin:5px 10px; 意思上下元素块距离为5px，左右的元素块距离为10px
等于
margin-top:5px; 
margin-bottom:5px; 
margin-left:10px; 
margin-right:10px; 
一样效果简写；

margin:5px 6px 7px; 意思上元素块距离5px，下元素块距离为7PX，左右元素块距离为6px，
等于
margin-top:5px; 
margin-bottom:7px; 
margin-left:6px; 
margin-right:6px; 
一样效果简写；

margin:5px 6px 7px 8px;  意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，
等于
margin-top:5px; 
margin-right:6px; 
margin-bottom:7px; 
margin-right:8px; 
一样效果简写；

margin:auto你真的理解么？

含义

margin:auto是具有强烈计算意味的关键字，用来计算元素对应方向应该获得的剩余空间大小

填充规则

(1) 如果一侧定值，一侧auto，则auto为剩余空间大小
(2) 如果两侧均是auto，则平分剩余空间

<style>
    .father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-right: 80px;
      margin-left: auto;
      background-color: #cd0000;
    }
  </style>

<div class="father">
    <div class="son"></div>
  </div>

image

左边距是20px,右边距是80px。这里son宽度是200px，容器是300px，总剩余空间大小是100px，其中margin-right使用了80px，那么margin-left的‘auto’计算值就是剩余的20px了

margin-left:auto代替float:right实现右对齐

.father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-left: auto;
      background-color: #cd0000;
    }

<div class="father">
    <div class="son"></div>
  </div>

image

magin:atuo配合绝对定位实现水平和垂直方向居中

.father {
      width: 300px;
      height: 150px;
      background-color: #f0f3f9;
      position: relative;
    }

    .son {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #cd0000;
      margin: auto;
    }

<div class="father">
    <div class="son"></div>
  </div>

image

CSS中：margin:auto与margin: 0 auto;有什么区别

1、意思不同。margin:auto=margin:auto auto auto auto，表示上du下左右都为auto；margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；

2、居中方式不同。

margin:auto 表示横竖都居中，
margin: 0 auto 表示横居中，竖dao不居中；

margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px

margin的应用问题：

一、margin在同级元素（非父子关系）之间的应用：水平方向和竖直方向的外边距的合并问题

（1）水平方向的外边距合并
两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。

（2）竖直方向的外边距合并
两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

二、margin--在父元素和子元素之间margin的应用。

这一部分，我们同样从两个方面来讨论。

一方面是子元素设置水平方向上的margin值；
另一方面是子元素设置竖直方向的margin值。

（1）在子元素中设置水平方向的margin值
子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。

margin: 0 auto;为何会居中呢???

一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中

但是后来就很好奇

margin: auto 0;为何不能垂直居中?
margin: 0 auto 0 0;如果只设置一个margin会发生什么?

现在我们就开始学一下

首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度,margin:0 auto的auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200/2)

<code-box id="4FnkYA" style="position: relative;display: block;"><pre code-id="4FnkYA" class="hljs css mCustomScrollbar _mCS_1 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;">

<code-pre class="code-pre" id="pre-DjdYkG">div{
height: 200px;
width: 200px;
background: red;
margin: 0 auto;
}</code-pre>

</pre></code-box>

image

那么如果只有一侧设置了auto会产生什么效果

<code-box id="7EcwTM" style="position: relative;display: block;"><pre code-id="7EcwTM" class="hljs css mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;">

<code-pre class="code-pre" id="pre-K3i3yx">div{
height: 200px;
width: 200px;
background: red;
margin-left: auto;
}</code-pre>

</pre></code-box>

image
他竟然靠在了右侧

因为他只设置了左侧为auto,那么父元素剩余的空间都会分给左侧,就实现了float:left;的效果
做到了这一步我感觉实在是太神奇了啊,他竟然可以代替浮动的效果

那么如何垂直方向居中呢

这里面我要强调一下,垂直方向不可以margin: auto 0
主要的原因就是垂直方向,我们没有剩余的空间
那么我们就不能垂直方向居中了吗???,当然是可以的,我们来试一下

<code-box id="meHEAy" style="position: relative;display: block;"><pre code-id="meHEAy" class="hljs css mCustomScrollbar _mCS_3 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;">

<code-pre class="code-pre" id="pre-nnDhEm">div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 200px;
width: 200px;
background: red;
}</code-pre>

</pre></code-box>