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 属性也可以实现等高布局。