html margin属性,CSS margin属性详解

我发现当我想写好一篇博文的时候，希望以后能有人看到，会对别人也有一定的帮助，这时候对于其中的内容就变得深思熟虑起来，让自己查阅尽可能多的资料，这样的方式正好可以弥补我某些方面的不足，让我能够深入了解一些可能平常不太注意的知识点，哈哈，但可能还是会存在局限性：P。如果能坚持写博文的话，一定会是一件超棒的事情。这些就只是我自己的碎碎念：)~

盒子模型

讲到margin，不可避免的就又要说到盒子模型，盒子模型包括了：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性(这里只说W3C标准的盒子模型)。如下图所示：

margin相关属性

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性，也就是说给父元素设置的margin值并不会自动传递到子元素中。

一个参数margin: 10px;所有4个外边距都是10px

两个参数margin: 10px 5px;上外边距和下外边距是10px

右外边距和左外边距是5px

三个参数margin: 10px 5px 15px;上外边距是10px

右外边距和左外边距是5px

下外边距是15px

四个参数margin: 10px 5px 15px 20px;上外边距是10px

右外边距是5px

下外边距是15px

左外边距是20px

设置四个外边距的顺序是上、右、下、左，请记住顺时针即可。

margin外边距合并块级元素的垂直相邻外边距会合并

如下图所示：

margin

div {

margin: 20px;

color: #fff;

}

.top {

background: green;

}

.bottom {

background: orange;

}

margin: 20px

margin: 20px

且其垂直相邻外边距合并之后的值为上元素的下外边距和下元素的上外边距的较大值。

如下图所示：

margin

div {

color: #fff;

}

.top {

background: green;

margin: 40px;

}

.bottom {

background: orange;

margin: 20px;

}

margin: 40px

margin: 20px

而行内元素实际上不占上下外边距。

如下图所示：

margin

span {

margin: 20px;

background: orange;

color: #fff;

}

margin: 20px

行内元素的的左右外边距不会合并。

如下图所示：

margin

span {

margin: 20px;

background: orange;

color: #fff;

}

margin: 20px

margin: 20px

浮动元素的外边距也不会合并。

如下图所示：

margin

div {

float: left;

margin: 20px;

background: orange;

color: #fff;

}

margin: 20px

margin: 20px

margin: 20px

margin: 20px

margin: 20px

margin: 20px

margin: 20px

margin负值

左右固定，中间自适应(双飞翼)

双飞翼布局的好处：

1、主要的内容先加载的优化；

2、在浏览器上的兼容性非常好，IE6及以上都支持；

3、实现不同的布局方式，可以通过调整相关CSS属性即可实现。

实现效果如下图所示：

margin

* {

margin: 0;

padding: 0;

}

div {

color: #fff;

height: 200px;

}

.center {

float: left;

width: 100%;

}

.center .content {

margin: 0 210px 0 110px;

background: orange;

}

.left {

float: left;

width: 100px;

margin-left: -100%;

background: green;

}

.right {

float: left;

margin-left: -200px;

width: 200px;

background: green;

}

center

left

right

用于水平垂直居中

margin

div {

width: 100px;

height: 100px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -50px;

margin-top: -50px;

background: orange;

}

这种使得元素居中的方法的缺点就是：你必须知道这个绝对定位元素宽度以及高度才能通过设置负margin值，使其相对于浏览器窗口(父元素)居中，若对于不确定宽度和高度，则不能用这种方法，可以使用：transform: translate3d(-50%,-50%,0);

对于margin负值来说，不止有这两个实现，还会有其他各种用途，这里暂不一一细讲。