margin

定义:

margin为盒子的外边距。（盒子包括块级元素，行内元素，行内快元素。还包括由display转换后的盒子元素，浮动之后的盒子元素，定位之后的盒子元素）

属性名:属性值

margin: x px

margin: x px y px

margin: top px y px bottom px

margin: top px right px bottom

px left px

规律:从盒模型的上边距按照顺时针依次赋值，如果没有值，则看对面取值。

margin-top: x px

margin-bottom: x px

margin-right: x px

margin-left: x px

应用:

块级元素-嵌套关系

margin-top引起塌陷

<div class="father">

        <div class="son" style="margin-top: 20px"></div>

</div>

现象:父盒子和子盒子一起向下移动20px

解决方式:给父盒子设置上边框或者上内边距或者overflow:hidden或者转化成行内块元素或者浮动。

块级元素-并列关系

都为左浮动，左右margin相加。

其中一个浮动，有层级关系，如果盒子没有内容，则直接覆盖，如果盒子有内容，则盒子被覆盖，内容不愿意被遮挡，而被挤出盒子外显示。

标准流，上下margin取最大值。

行内元素-并列关系

标准流，左右外边距相加。

都浮动，左右外边距相加。

其中一个浮动，层级不同，所以是内容不愿意被遮挡，而显示。

标准流，上下外边距失效。

行内块-并列关系

标准流，左右外边距相加。

都浮动，左右外边距相加。

其中一个浮动，又层级关系，因为内容不愿意被遮挡，而显示。

标准流，上下外边距相加。

混合元素-并列关系

a标签和div元素，div紧贴a标签左浮动。设置divmargin，a标签现象上与div分离。实则因为文字元素不被浮动块级元素覆盖。

本节错题:

margin-top塌陷现象，合并现象，行内元素上下外边距失效。文字与浮动块级元素分离现象。