css基础——盒子模型

盒子模型概述 link

• 盒子组成，包括元素内容、内边距、边框 和 外边距
• 内边距呈现了元素的背景，内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
• 内边距、边框和外边距都是可选的，默认值是0
• 外边距可以是负值，而且在很多情况下都要使用负值的外边距
• width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响盒子的容积，但是会增加盒子的总尺寸
• 盒子自身的尺寸：内容的宽高+两侧内边距+两侧边框
• 盒子在页面中占位的尺寸：内容的宽高+两侧内边距+两侧边框+两侧外边距

宽高属性 link

• width 设置元素的宽度
• max-width 设置元素的最大宽度
• min-height 设置元素的最小高度
• 宽和高只设置一个时，另一个自动为 auto，以上属性不能为负

CSS 边框属性 link

• border 属性连写，边框样式必写，如果没有样式，将没有边框
• border-style 设置边框样式，可单独为各边设置不同边框样式，如果没有样式，将没有边框
• border-width 设置边框宽度，可单独为各边设置不同边框宽度
• border-color 设置边框颜色，可单独为各边设置不同边框颜色

内边距padding link

• padding 属性定义元素边框与元素内容之间的空白区域
• padding 属性接受长度值或百分比值，但不允许使用负值
• 可以同时设置4个相同内边距，也可以分别设置4个不同内边距
• 内外边距的百分比数值是相对于其父元素的 width 计算的
• 行内元素只能定义左右内外边距

外边距margin link

• 围绕在边框外的空白区域是外边距，外边距会在元素外创建额外的“空白”
• margin 属性接受任何长度单位、百分数值甚至负值
• 可以同时设置4个相同外边距，也可以分别设置4个不同外边距
• 内外边距的百分比数值是相对于其父元素的 width 计算的
• 设置元素水平居中： margin:x auto
• margin负值让元素位移及边框合并
• 垂直方向外边距合并。即两个盒子一个设置下外边距，一个设置上外边距，取设置较大的值

外边距合并 link

• 外边距合并指的是，当两个垂直外边距相遇时，它们将合并成一个外边距
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
• 结论，只要 margin 直接接触，就会发生合并

合并案例（比较诡异）

• 一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上padding会发生合并（正常）
• 一个元素包含在另一个元素中时 (父元素无padding和border)，它们的上和上padding也会发生合并（诡异）
• 一个空元素，它有外边距，但是没有边框，填充以及padding，在这种情况下，上外边距与下外边距就碰到了一起，发生合并
• 综上所述总结，只要 margin 直接接触，就会发生合并

margin-top 塌陷（也不算bug）

• 在两个盒子嵌套时候，在父盒子无padding和border的情况下，内部的盒子设置的margin-top会加到父盒子上，导致内部的盒子margin-top设置失败
• 根本原因是 margin 直接接触，发生了外边距合并，就是合并案例2

解决方法

• 外部盒子设置一个border 或 padding，不让 margin 直接接触
• 外部盒子设置 overflow:hidden
• 外部盒子使用伪元素类：（最常用）

.clearfix:before{
    content: '';
    display:table;
}

css元素溢出

当子元素的尺寸超过父元素（父元素设置了高度）的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

元素溢出示例：