CSS（四）溢出、盒子模型

一、溢出

        溢出是指当为一个元素设置好宽高后，由于内容较多，导致内容超出元素原有的高度，超出部分即称为内容溢出。

1. 溢出属性

overflow: hidden;	溢出隐藏
overflow: scroll;	x轴y轴都出现拖动条
overflow: auto;	只有溢出的方向出现拖动条
overflow: visible;	溢出默认展示

        也可单独设定 x 轴或者 y 轴如：overflow-x: auto;  overflow-y: hidden;

2.overflow 与 BFC

        BFC(Block formatting context) 直译为"块级格式化上下文"，是一个独立的渲染区域，与区域外部毫不相干；内部元素除非脱离文档流，否则无论如何设置都不会影响父级。

        scroll、auto、hidden可以触发元素的 BFC 特性；visible 不会。

        应用：a 清除子元素浮动影响 父元素设置 overflow：auto/scroll/hidden；b 避免 margin 穿透/重叠问题。

二、盒子模型

        每个元素的盒模型都包括四个部分：元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

1. 元素内容

        元素的内容可以是元素内的文字，也可以是元素的宽度和高度，大部分内联元素设置宽高无效，只能依靠内容撑开，因此内容就是内联元素中的文字。

2. 内边距 —— padding  

        宽高之外到边框以内的距离，可以设置长度（不支持负值），常用属性有：

padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

        内边距的值：

1个值	用于全部四边；padding: 20px;
2个值	上下，左右；padding: 10px 40px;
3个值	上，左右，下
4个值	上、右、下、左

要点：      

（1）内边距设置后会拥有元素的背景颜色；

（2）元素中的文字和其他元素不能占据该元素的内边距位置；       

（3）内联元素的上下内边距无效，但颜色会出现；

（4）行内块内边距四个方向都生效。

3. 外边距 —— margin

        指盒子的外边距，是当前元素和其他兄弟元素之间的距离。可以设置长度，正值时是增大该方向外边距，负值时是缩小该方向外边距（支持负值），取值与内边距相同。常用属性：

margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

要点：

（1）块级元素所有方向外边距都生效；

（2）内联元素左右生效，上下不生效，但行内块元素四个方向都生效；

（3）margin: auto;  块级元素在其父元素内水平居中的方式，上下外边距不存在，该值写给自己；

（4）margin为负值是在x或y轴方向，向左或向右移动自己，可能遮盖其他元素；

（5）兄弟元素之间外边距会合并；

（6）行内块两个垂直元素的上下外边距会累加；

（7）两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

        外边距溢出：外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界合并。解决方法有五种：

• 父元素中增加 padding-top（会增加父元素实际高度）；
• 增加父元素的边框（会增加父元素实际高度）；
• 使用空<table></table>放在第一个子元素前和最后一个子元素后，分隔与父级的粘连；
• 父元素增加 overflow: hidden/auto;（父元素会不再显示溢出内容）；
• 使用 CSS3 伪元素给父元素添加内容（空table）；如

.box::before {
   content: "";
   display: table;
 }

4. 不同元素的盒子模型

（1）内联元素盒模型

        宽度高度是 auto，靠内容撑开；设置宽度高度无效；设置上下内外边距无效；排列方式为从左至右。

（2）块级元素盒模型

        块级元素可以设置宽度和高度；只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度；内外边距设置均有效果；排列方式为从上至下。

5. 盒子模型的计算方式

（1）标准盒子模型 - box-sizing: content-box;

元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

（2）怪异盒子模型 - box-sizing: border-box;

        在怪异盒子的使用中，只要给定元素宽高，无论再为其设置padding还是border，内部会自动计算，给定的总宽高不会改变。

设置的宽度width = 左右border + 左右padding + 内容的宽度
设置的高度height = 上下border + 上下padding + 内容的高度