css：margin，border，padding总结

css中一个重要的模型，即盒子模型；如下图

               

  一、margin

 I、 margin是外边距，一个元素到另一个元素的之间的距离。

 a、 margin可以改变容器的尺寸（即元素的可视属性），但有一定的适用范围：

 1、要想改变容器的尺寸，margin适用于没有设定width/height的普通得块级水平元素。

  2、只能用于对水平方向的尺寸进行修改；

b、margin可以改变占据尺寸的大小

  1、使用block/inline-block水平的元素。

  2、该元素有无设定width/height都不所谓。

  3、适用于水平方向和垂直方向。

II、margin和百分比单位之间的一些总结

a、对于普通元素的百分比

 元素此时的margin是相对于容器（它的父级元素）的宽而计算的。

b、对于绝对定位元素的百分比

元素此时的margin是相对于第一个定位元素（relative，absolute，fixed）的宽而计算的。

III、marign重叠

1、不是任何元素都会发生重叠，也不是在任何方向上都可以发生重叠

a、只发生在block级别的元素（不包括float，absolute元素）

b、在不考虑writing-mode的前提下，重叠只发生在垂直方向。

2、发生margin重叠的三种情况：

a、相邻的兄弟元素。

b、父级元素和第一个元素，父级元素和最后一个元素。{给第一个孩子设置margin-top就相当于给父亲设置margin-top，两者共用一个。对于margin-bottom也同理}

3、margin重叠时的计算规则

a、正正取大值

b、正负值相加

c、负负最负值

4、margin的重叠性有什么意义？

a、web中任何地方嵌套或直接放入任何裸的div，都不会影响原来的布局，此时是相邻的块状兄弟元素，margin是会重叠的。

b、遗落的<p>标签不会影响原理的阅读。

5、善用margin重叠

既然margin有重叠是特性，我们可以善用margin重叠。

例如：.list{ margin-top:15px;margin-bottom:15px}

像上面这个例子，使得网页更具有健壮性，最后一个元素的移除或者位置调换均不会破坏原来的布局。

IV、margin:auto;

1、作用：本来一个元素会自动扩充到的空间，但是被width/height等限制了空间，使得本来自动扩充的空间，有了剩余的空间。而margin：auto；就是为了分配这个剩余空间的。

2、

a、如果一侧是固定值，一侧是auto，auto就为剩余空间的大小。

b、若两侧都是auto，就会平分剩余空间。

3、

a、水平居中

不会出现居中效果的特殊例子：

<div>

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

</div>

此时的图片不布局中的原因：

img是行级元素，即使不设置这个图片的宽度，它也不会自动扩充到整行，实际上说就是它并没有剩余空间，也就无法居中

让上面这个例子居中的方法：

让图片block化，这样如果设定宽度时，他就会自动扩展，在此时如果给图片限制一个宽度，那么剩余空间就是整个页面宽度减去图片的宽度，这样就可以就可以让其水平居中了。

b、垂直居中

<div class=“父亲” style=“height:200px”>

img{height:100px;margin:0 auto;}   

</div>

此时即使图片block化，他也不会垂直居中。因为block化是，是会让水平方向自动扩充，而即使图片的高度不设置，它可以不会自动垂直扩充的，所有就没有实际的剩余空间。

方法：

1、利用writing-mode改变流的方向。给要垂直居中的元素的父亲元素设置该属性。

正常的流方向是水平的，所有块级元素水平扩充，但如果设置writing-mode：vertical-lr；此时流的方向是垂直，它就会垂直方法自动扩充，这样marign：auto；可以使得是元素垂直居中，但此时，就不会水平居中了。

2、IE8+以上的浏览器可以利用绝对布局

使用了绝对布局，它不论在水平方向还是垂直方向，如不限定宽，高。都会自动扩充，这样，如何元素设定宽高，就会剩余空间，就可以实现，垂直居中，同时也可以实现水平居中。

举例：

.father{height:200px;position:relative}

.son{position:absolute;top:0;right:0;bottom:0;left:0;width:500px,height:100px;margin:auto}

二、border常用知识

1、border是一个元素的边框，border-width是不支持百分比的，因为它受到语义和使用场景的决定，比如，一个平板和一个手机，虽然屏幕大小差了很多，但是他们的边框并没有太大的差异。

2、border-width:12px;除了用数字表示以外，还可以使用thin，medium（默认值），thick。

3、border-style

border-style:solid; (实现)   border-style:dashed;(虚线)    border-style:dotted;(点线)

border-style:double;(双线)利用这个方法可以得到三条杠；

注：border：solid；全框   border-top：solid；分上下左右框。

<div id='a'></div>

4、border-color

其实border-color就是color，如果边框没有设置颜色，color所设置的颜色就是边框的颜色。

三、padding

1、当padding值特别大时，一定会影响容器的尺寸；

2、当Width为非auto，padding会影响容器尺寸；

3、当width为auto，box-size：border-box，并且padding值不是特别大时，不会影响容器的尺寸。

4、水平的padding会影响尺寸，垂直方向的padding不会影响尺寸，但是会影响背景色的占据空间。

5、padding不支持任何形式的负值。

6、padding的百分比均是相对于宽度计算的。例子：要实现一个移动端的正方形头图：

div{padding：50%}；

注意：这个方法对于内联元素是不适用的，如果内联元素中有内容，可能会造成断线，即使没有内容，可以形成不了正方形。

7、哪些标签有内置padding，哪些没有？常见的几个

  所有浏览器的input/textarea输入框都有内置padding。

  所有浏览器的button都有内置padding。但是它的padding最难控制。

  无论怎么设置，button中的字都和整体有一部分空余，可以使用（button：：-moz-focus-inner{padding：0}）这个方法解决。

  部分浏览器下的select下拉框有内置padding，如firefox，ie8+；

  所有浏览器的radio/checkbox都无内置padding，所以无论怎样改变padding都无用。

  8、一个css元素：background-clip：content-box

   含义：设置让背景只在内容区显示。