css之margin

最新推荐文章于 2022-07-22 19:32:12 发布

Jancy1072

最新推荐文章于 2022-07-22 19:32:12 发布

阅读量618

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/shelly1072/article/details/61935286

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.可视尺寸clientWidth:contentWidth+paddingWidth-滚动条宽度
占据尺寸outerWidth(true):contentWidth+paddingWidth+borderWidth+marginWidth
2.margin影响元素的clientWidth
width为auto的普通块级元素，不是float、absolute、fixed、inline、table-cell元素。只会影响水平方向的，不会影响垂直方向的。margin正值，尺寸变小，margin负值，尺寸变大。
应用—两栏自适应布局

.left{
    width: 120px;
    height: 70px;
    background-color: red;
    float: left;
}
.right{
    margin-left: 120px;//改成padding-left:120px或者overflow:hidden也行
}
<div class="box">
    <div class="left"></div>
    <div class="right">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    </div>
</div>

3.margin影响元素的占据尺寸
block和inline-block都元素均适用；
与有无设定宽高无关；
适用于水平和垂直方向；

<div class="box">
    <div class="left"></div>   
</div>
.left{
    width: 120px;
    height: 70px;
    background-color: red;
    margin-bottom: 50px;
}
.box{
    background-color: blue;
    border:1px solid;//解决margin塌陷问题
}

这里写图片描述
margin-bottom: 50px;改成margin-bottom: -50px;

应用—滚动容器内上下留白

.left{
    width: 120px;
    height: 170px;
    background-color: red;
    margin: 50px 0;
}
.box{
    width: 120px;
    height: 150px;
    background-color: blue;
    overflow: scroll;
}   
<div class="box">
    <div class="left"></div>   
</div>

4.margin与百分比单位
普通元素水平方向百分比和垂直方向百分比都是相对于父元素的宽度计算的。
绝对定位元素水平方向百分比和垂直方向百分比都是相对于有定位（absolute、relative、fixed）的父元素的宽度计算的。

<div class="box">
    <div class="box2">
        <div class="left"></div>    
    </div>
</div>
.box{
    position: relative;
    width: 800px;
    height: 500px;
    background-color: red;

}
.box2{
    width: 500px;
    height: 500px;
    background-color: green;
    margin-left: 150px;
}
.left{
    width: 300px;
    height: 500px;
    position: absolute;
    margin: 10%;
    background-color: blue;
}

这里写图片描述
蓝色框距离绿色框的宽度是80px=800px*10%

应用–宽高2：1自适应矩形

.box{
    overflow: hidden;
    width: 80px;
    background-color: red;
}
.box2{
    margin: 50%;
}
<div class="box">
    <div class="box2">
    </div>
</div>

这里写图片描述
将margin:50%改为100%，就能得到一个正方形。
原因：空元素的margin-top和margin-bottom会合并，父元素overflow:hidden使得父元素与子元素之间避免margin塌陷，父元素会被撑开。
5.margin塌陷/重叠
- margin重叠只发生在block水平元素上。（不包括float和absolute元素）

不考虑writing-mode,只发生在垂直方向上。（margin-top和margin-bottom）

margin重叠的三种情形：

相邻的兄弟元素
父级和第一个或最后一个子元素（父子）
空的block元素（自己与自己)

父子margin重叠的其他条件：
margin-top重叠：

父元素非块状格式化上下文元素
父元素没有border-top设置
父元素没有padding-top设置
父元素和第一个子元素之间没有inline元素分隔
解决margin-top重叠：
overflow：hidden、设置border-top、设置padding-top、父元素与第一个子元素之间添加 内联元素

margin-bottom重叠：

父元素非块状格式化上下文元素
父元素没有border-top设置
父元素没有padding-top设置
父元素和最后一个子元素之间没有inline元素分隔
父元素没有height、min-height、max-height限制
解决margin-bottom重叠：
overflow：hidden、设置border-bottom、设置padding-bottom、父元素与最后一个子元素之间添加 内联元素、设置height

空的block元素发生margin重叠的其他条件：
没有border设置、没有padding设置、里面没有inline元素（可以有空的div）、没有height和min-height设置。
解决方法：设置border、设置padding、里面添加文字、设置height等

重叠的计算规则：
正正取大值；
正负值相加；
负负最负值；

空的block元素自身margin重叠，如果margin都是负值，高度为0，但是会影响兄弟元素的布局和定位。

margin重叠的意义：网页诞生之初，为了排版自然而设定默认情况下会出现margin重叠。
连续段落或列表之类，如果没有margin重叠，收尾项间距会和其他兄弟标签1：2关系，排版不自然。（兄弟元素margin重叠的原因）
一个守则：web中任何地方嵌套或直接放入任何裸div（没有设置css的div），都不会影响原来的布局。（父子margin重叠的原因）
遗落的空任意多个p元素，不要影响原来的阅读排版。（block空元素的margin重叠）

应用—-表单的各个项同时设置margin-top和margin-bottom，这样当删除最后一个项时，不会影响布局。如果只设置margin-top，那么最后一个元素往往要再设置margin-bottom，当删除最后一个元素时，会影响布局。

6.margin auto
元素有时候没有设置宽高，仍然会自动填充。
元素有时候没有设置宽高，仍然会自动填充对应的方位。

<div class="box2">
    我的
</div>
.box2{
    background-color:red;
}



<div class="box">
    <div class="box2">
        我的
    </div>
</div>
.box{
    position: relative;
}
.box2{
    position: absolute;
    left: 0;
    right:0;//使得div宽填满有定位父元素
    background-color:red;
}

如果设置宽高，自动填充特性就会被覆盖。原本应该填充的尺寸被width/height强制变更，margin auto就是为了填充这个变更的尺寸而设计的。auto是用来分配剩余空间的。
如果一侧是定值，一侧auto，auto为剩余空间大小；如果两侧均为auto，则平分剩余空间。

图片为何不居中？

img{width:200px;margin:0 auto;}

因为图片是inline水平，就算没有width，也不会占据整个容器，更没有剩余空间来分配。只要设置display：block，就能居中。即便没有设置宽度也会占据整个容器，其他元素不能跟他同一行。
图片、按钮、视频是替换元素，跟普通元素有些区别。

为什么margin：auto 0；不能垂直居中？
高度不会自动填充，没有剩余空间可以分配。

子元素大于父元素，margin：auto是不能居中的。因为auto为负值。

垂直方向居中的方法：
法1：改变流的方向为垂直方向。margin：auto垂直方向居中，水平方向不居中。

.father{
    height:200px;width:100%;writing-mode:vertical-lr;
}
.son{
    height:100px;widht:500px;margin:auto;
}

法2：绝对定位元素

.father{height:200px;postition:relative;}
.son{position:absolute;left:0;top:0;bottom:0;right:0;}

没有width/height，absolute元素自动填满了容器。自动拉伸特性。这时设置子元素的宽高，元素被强制变更宽度高度，有了剩余空间。此时加上margin：auto就能实现水平和垂直居中。兼容IE8+。

.father{height:200px;postition:relative;}
.son{position:absolute;left:0;top:0;bottom:0;right:0;width:50px;height:50px;margin:auto;}

这里写图片描述

7.margin负值
margin能改变元素尺寸的应用：两端对齐

.box{
    width: 1200px;
    margin: auto;
    background-color: blue;
}
ul{
    overflow: hidden;
    list-style: none;
    padding: 0;
}
li{
    width: 380px;
    height: 100px;
    margin-right: 20px;
    float: left;
    background-color: red;
}
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

这里写图片描述
以上代码右边留有间隙，如何解决？

.box{
    width: 1180px;//缩小宽度，本来第三个li会因为空间不够而换行，但由于ul宽度变大，不会换行
    margin: auto;
    background-color: blue;
}
ul{
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin-right: -20px;//ul宽度为auto，margin负值使得ul宽度变大
}
li{
    width: 380px;
    height: 100px;
    margin-right: 20px;
    float: left;
    background-color: red;
}

//以上代码相当于

.box{
    width: 1180px;
    margin: auto;
    background-color: blue;
}
ul{
    overflow: hidden;
    list-style: none;
    padding: 0;
    width: 1200px;//ul宽度1200px
}
li{
    width: 380px;
    height: 100px;
    margin-right: 20px;
    float: left;
    background-color: red;
}

margin能改变元素占据空间的应用–margin负值下的等高布局。
引入：margin能改变元素占据空间

<div> 
    <p>9999</p>
</div>
div{
    overflow:hidden;
}
p{
    margin-bottom: -300px;
}
//文字会看不见，因为div加了overflow:hidden;形成BFC，不影响div外的元素，但是当p元素margin-bottom负值太多了，p元素占据空间变小，会使div高度为0

margin负值下的等高布局

<div class="box">
    <div class="left">
     <h3>标题1</h3>  
     <h3>标题1</h3>
     <h3>标题1</h3>   
    </div>
    <div class="right">
        <p>内容1</p>
    </div>
</div>
.box{
    overflow: hidden;
}
.left{
    width: 50%;
    background-color: blue;
    float: left;
    margin-bottom: -600px;
    padding-bottom: 600px;
}
.right{
    width: 50%;
    background-color: red;
    float: left;
    margin-bottom: -600px;
    padding-bottom: 600px;
}

margin-bottom太大值，会使元素消失，用padding-bottom补回来，这时左边的高度就是元素本身的高度，而右边的背景色是可以在padding的区域显示的，不能在margin的区域显示。（审查元素看一看会更清晰）

应用–margin负值实现两栏自适应布局
以前的实现方法：

<div class="box">
    <div class="right"></div>
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>
.box{
    overflow: hidden;
}
.right{
    width: 150px;
    height:100px;
    background-color: blue;
    float: right;
}
p{
  margin-right: 150px;
}

缺点：DOM顺序与最终呈现视觉顺序不符合。
修改为：

.box{
    width: 100%;
    float: left;
}
.right{
    width: 150px;
    height:100px;
    background-color: blue;
    float: left;
    margin-left: -150px;//叠加在.box上
}
p{
  margin-right: 150px;
}
<div class="box">
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>
<div class="right"></div>

如果不考虑兼容性，使用css3的calc

.box{
    width: calc(100% - 150px);
    float: left;
}
.right{
    width: 150px;
    height:100px;
    background-color: blue;
    float: left;
}
<div class="box">
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>
<div class="right"></div>

8.margin失效的情形

inline水平元素的垂直margin失效。前提：不是替换元素（如不是img元素、button），是正常的书写模式，没有修改writing-mode
margin重叠
display：table-cell和table-row等声明的元素margin无效。前提：不是替换元素（如不是img元素、button）

img元素，display：table-cell，margin仍然起作用。
button元素，display：table-cell，margin仍然起作用。
替换元素设置display：table-cell，chrome浏览器下用js获取display，会得到inline-block。在火狐浏览器下，浏览器下用js获取display，会得到table-cell，但实际上还是inline-block，不会发生margin重叠。IE浏览器下用js获取display，会得到table-cell，实际上也是table-cell，有margin重叠现象。实际应用中我们也不会将替换元素设置为display：table-cell。

<div></div>
div{
    width: 60px;
    height: 60px;
    display: table-cell;
    margin:50px;//margin无效
}

绝对定位元素非定位方位的margin值无效（看似无效，实则有效）。定位方位的margin值有效，会影响自身定位。看似无效是指不会改变自身的定位，也不会影响相邻元素定位。实则有效是指会影响自身占据的空间。

img{
    position:absolute;
    left:10px;
    top:10px;
    margin-right:20px;//无效
    margin-left:20px;//有效
}



<div>
    <img src="1.png" alt="">
</div>
div{
    position: relative;
    height: 160px;
    background-color: red;
    overflow: scroll;
}
img{
    position: absolute;
    margin: 100px;
}

这里写图片描述
出现滚动条，图片上方和下方都有留白。

鞭长莫及导致margin失效

.box{
    overflow: hidden;
}
.right{
    width: 150px;
    height:100px;
    background-color: blue;
    float: right;
}
p{
  overflow: hidden;
  margin-right: 10px;//margin-right无效，当margin-right大于150px时，就能起作用
}
<div class="box">
    <div class="right"></div>
    <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>
</div>

内联特性导致margin无效

img{
    margin-top: -1000px;//当margin-top小到一定值之后，不会再改变位置
}

div{
    background-color: red;
    margin-top: 100px;
}
<div>
    <img src="1.png" alt="">
</div>

这里写图片描述
因为图片后面有一个空白节点，图片要与空白节点基线对齐，空白节点始终在div中，所以图片无法继续向上偏移。

9.margin-start和margin-end
目前只兼容火狐和chrome浏览器
margin-start与文档流的方向有关，表示文档流开始方位的margin值。
正常的流向，margin-start等同于margin-left，两个同时设置时，不累加，以后面那个为准。

img{
    -webkit-margin-start:200px;
    margin-left: 100px;
}
//表现为margin-left: 100px;

如果水平流是从右到左，margin-start等同于margin-right，在垂直流下（writing-mode：vertical-*）,margin-start等同于margin-top
10.margin-collapse，目前只在chrome浏览器下能用
-webkit-margin-collapse
取值有：collapse（默认，margin重叠）、separate（分隔，margin不重叠）、discard（取消，margin重叠部分置为0，没有margin）

Jancy1072

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之margin

1.可视尺寸clientWidth:contentWidth+paddingWidth-滚动条宽度占据尺寸outerWidth(true):contentWidth+paddingWidth+borderWidth+marginWidth 2.margin影响元素的clientWidth width为auto的普通块级元素，不是float、absolute、fixed、inline、tabl
复制链接

扫一扫