CSS中布局margin-right: auto;啥意思,对布局有何作用

html-css021

CSS中布局margin-right: auto;啥意思,对布局有何作用,第1张

DIV块右侧留空自动取得margin-right: auto,操作方法如下:

1、首先新建HTML文件,创建HTML标签和内容,如下图所示。

2、然后预览效果如图。

3、然后设置文本的右外边距margin-right: 2cm,如下图所示。

4、接着设置文本的右外边距margin-right:100px,如下图所示。

5、最后预览效果如图,就完成了。

css(二) 一些基本概念 提到了盒子,替换元素里讲了一下content,这边我们来聊一聊剩下的三个盒子

padding内间距,他是4个盒子中最温和的,基本不会出现什么反认知的现象。

说几个比较有意思的使用。

第一个直接用了padding,分隔符高度会比较高,第二个是通过伪元素+padding,可以实现分隔符长短的控制

margin负责外间距,通常块与块之间都会通过margin来分隔一下,虽然同样都是负责间距,相比于padding,margin就不太温和了,特异之处不少。

和 padding 属性一样,margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

首先,margin是支持负值的,这其实还是比较好理解的。

在这,margin在某些情况下是可以改变元素尺寸的,之前说盒子的时候提到过,box-sizing有两种,border-box和content-box,都是不包含margin的,那么margin是如何改变元素尺寸的呢。

如下图负的margin-left或者margin-right都会使子元素宽度变大。

在开发过程中或多或少应该都有过margin合并的经历,只是当时还不知道是啥原因,也不知道margin合并这个词,这不是个bug,而是故意这么设计的。margin合并有三种情况:

给子元素设置margin-top时,一开始是没有任何变化的,直到12px时才有变化,但不是子元素离父元素顶部具体增加,而是父元素离上面的margin距离增加。这边就有父子margin合并和相邻兄弟元素margin合并。

一般感觉我给子元素设置margin-top,那么应该是子元素距离父元素更远,但因为父子margin合并,导致效果是父元素具体上面的元素更远。如果不希望合并发生,有几种解决方法(以下是针对父元素和第一个子元素margin-top合并的解决方式,父元素和最后一个子元素margin-bottom合并的解决方式同理):

相邻兄弟元素合并与父子(第一个子/最后一个子)合并

父元素设置overflow: hidden,父子的margin合并现象就消失了

空块级元素的 margin 合并:

margin:auto 的填充规则如下。

绝对定位可以实现水平垂直居中

hover时只要改color,就可以把border颜色一起改变

除了作为边框,border也有一些妙用

另:margin+padding 可以实现等高布局,border 属性也可以实现等高布局。