欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 编程资源 > 编程问答 >内容正文

编程问答

html外边距的复合属性是,margin -凯发k8官方网

发布时间:2024/10/14 编程问答 25 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 html外边距的复合属性是,margin 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

margin

margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是:margin的top和bottom属性对非替换内联元素无效,例如和。

浏览器支持

浏览器都支持margin

语法margin:

margin:/*<二值语法>纵向横向*/举例: margin: 5% auto;

margin:/*<三值语法>上横向下*/举例: margin: 1em auto 2em;

margin:/*<四值语法>上右下左*/举例: margin: 2px 1em 0 auto;

margin:inherit

接受1~4个可选参数,每个参数取值如下:只有一个值时,这个值会被指定给全部的四个边

两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右

三个值时,第一个值被匹配给上,第二个值被匹配给左和右,第三个值被匹配给下

四个值时,会依次按上、右、下、左的顺序匹配(即顺时针顺序)

取值:| | autoauto:浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。

:获知可用的计数单位。

:相对于该元素的包含块的宽度(相对于该块的百分比)。该值可以为负数。

实例

在现代浏览器中,如果要把一些东西水平居中,使用display:flex;justify-content: center;然而,在一些老的浏览器,如ie8-9,这些是不可用的。想要把一个元素在其父元素中居中,使用margin: 0 auto;margin: 5%; /* 所有的边都是 5% 的边距 */

margin: 10px; /* 所有的边都是 10像素 的边距 */

margin: 1.6em 20px; /* 上和下边是 1.6字距, 左和右是 20像素 边距 */

margin: 10px 3% 1em; /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */

margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */

margin: 1em auto; /* 上和下边 1字距 边距, 该盒子是水平居中的 */

margin: auto; /* 该盒子是水平居中的, 上下边距为0 *///html

margin: auto;

background: gold;

width: 66%;

margin: 20px 0 0 -20px;

background: gold;

width: 66%;

//css

.ex1 {

margin: auto;

background: gold;

width: 66%;

}

.ex2 {

margin: 20px 0px 0 -20px;

background: gold;

width: 66%;

}

总结

以上是凯发k8官方网为你收集整理的html外边距的复合属性是,margin的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

网站地图