标签：

5.6 断根元素的默认表里边距(重要)

为了更灵活便利地控制网页中的元素，制作网页时，我们需要将元素的默认表里边距断根

代码： 0

* { padding:0; /* 断根内边距 */ margin:0; /* 断根外边距 */ }

注意：

行内元素为了赐顾帮衬兼容性， 尽量只设置摆布表里边距， 不要设置上下表里边距。

5.7 外边距合并(这是一个非常严重的问题，你必需要了解和解决)

使用margin界说块元素的垂直外边距时，可能会呈现外边距的合并。

(1). 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

对付两个嵌套关系的块元素，如果父元素没有上内边距及边框

父元素的上外边距会与子元素的上外边距产生合并

合并后的外边距为两者中的较大者

解决方案：

可以为父元素界说上边框。

可以为父元素界说上内边距

可以为父元素添加overflow:hidden。

还有其他要领，好比浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

6. 盒子模型构造不变性

学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？

大部分情况下是可以混用的。 就是说，，你用内边距也可以，用外边距也可以。 你感受哪个便利，就用哪个。

我们按照不变性来分，建议如下：

凭据 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

width > padding > margin

原因：

margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

padding 会影响盒子巨细， 需要进行加减计算（麻烦） 其次使用。

width 没有问题（嗨皮）我们经常使用宽度残剩法 高度残剩法来做。

拓展@

以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面构造， 只是样式更都雅了而已。

1.圆角边框(CSS3)

语法：

border-radius:length;

此中每一个值可以为 数值或百分比的形式。

技巧： 让一个正方形 酿成圆圈

border-radius: 50%;

以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是暗示高度和宽度的一半。

而我们这里矩形就只用 用 高度的一半就好了。精确单位。

2. 盒子暗影(CSS3)

语法:

box-shadow:程度暗影 垂直暗影 模糊距离（虚实） 暗影尺寸（影子巨细） 暗影颜色 内/外暗影；

前两个属性是必需写的。其余的可以省略。

外暗影 (outset) 是默认的 但是不能写 想要内暗影可以写 inset

div { width: 200px; height: 200px; border: 10px solid red; /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */ /* box-shadow:程度位置 垂直位置 模糊距离 暗影尺寸（影子巨细） 暗影颜色 内/外暗影； */ box-shadow: 0 15px 30px rgba(0, 0, 0, .4); } CSS书写规范

开始就形成良好的书写规范，是你专业的开始。

空格规范

【强制】 选择器 与 { 之间必需包罗空格。

示例：

.selector { }

【强制】 属性名 与之后的 : 之间不允许包罗空格， : 与 属性值 之间必需包罗空格。

示例：

font-size: 12px; 选择器规范

【强制】 并集选择器，每个选择器声明必需独有一行。

示例：

/* good */ .post, .page, .comment { line-height: 1.5; } /* bad */ .post, .page, .comment { line-height: 1.5; }

【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */ #username input {} .comment .avatar {} /* bad */ .page .header .login input {} .comment div * {} 属性规范

【强制】 属性界说必需另起一行。

示例：

/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }

【强制】 属性界说后必需以分号结尾。

示例：

/* good */ .selector { margin: 0; } /* bad */ .selector { margin: 0 }

CSS——05核心：盒子模型2