2.3-盒模型-矩形区域

 1、宽度（width）--表示盒子内容的宽度

单位：px；移动端也会有百分比；rem

未设置（1）块级元素（div，h系列、li等）自动撑满（非继承）

（2）行内元素（a、span等）随着内容撑开

2、高度（height）--表示盒子内容的高度

单位：px；移动端也会有百分比；rem

未设置时：默认为0，被其内容自动撑开

3、内边距（padding）--盒内元素到盒子的距离

作用：

• (1）用来调整内容(子元素)在容器（父元素）中的位置关系 

• (2）用来调整子元素在父元素中的位置关系。

  • 注：padding 属性需要添加在父元素上。

• (3）padding 值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的 padding 值大小。

padding：上下左右（单值）--或padding-top、padding-bottom、padding-left、padding-right

padding：上下  左右（双值）

padding：上  左右  下（三值）

padding：上  右  下  左（四值）

叠加写法：用小属性叠加大属性

eg.padding:40px;  padding-bottom:0; 除了 padding-bottom外，其他都为40px。

注意：padding不能为负数

4、外边距(margin）--盒子到盒子的距离

（1）

margin：上下左右（单值）--或margin-top、margin-bottom、margin-left、margin-right

margin：上下  左右（双值）

margin：上  左右  下（三值）

margin：上  右  下  左（四值）

（2）上下塌陷现象：

若一个大盒子中包含一个小盒子,给小盒子设 margin-top,大盒子会一起向下平移。

解决方案：i、给大盒子加一个边框。 ii、给大盒子设置一个 overflow 属性（overflow: hidden; ）  iii、浮动也可以（float：left、right）

（3）margin合并

1.不要行内元素设置上下的 margin 和 padding，上下 margin 和 padding 会被忽略。左右 margin 和 padding 会起作用。

2.外边距合并 i、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。ii、合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。iii、应用：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

（4）左右居中：margin：0 auto；

（5）清除默认值 

*{margin：0；padding：0；} （*--通配符选择器表示选择所有元素）

注意：margin可以为负数

5、尺寸大小（box-sizing）

border-box 表示盒子实际宽高，padding，border变为内缩

content-box定义内容的宽高

6、边框（border）

• (1）边框宽度:border-width：value + 单位

• (2）边框样式:border-style：solid（实线） | dashed（虚线） | dotted（点线） | double（双线）

• (3）边框颜色:border-color：颜色

• (4）总写：border：1px solid red;顺序不固定，i 表示给 4 个边都添加边框样式

• (5）还可以这样写：border-left|top|right|bottom

7、拓展：容器溢出设置

1、overflow （容器溢出）

属性值：

• visible:默认值，内容不会被修剪，会呈现在元素框之外；

• hidden：内容会被修剪，并且其余内容是不可见的；

• scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

• auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

• inherit：规定应该从父元素继承 overflow 属性的值。

2、white-space (空白空间)

属性值：

• normal：默认值，多余空白会被浏览器忽略只保留一个；

• pre：空白会被浏览器保留；

• pre-wrap：保留一部分空白符序列，但是正常的进行换行；

• pre-line:合并空白符序列，但是保留换行符；

• nowrap:文本不会换行，文本会在同一行上继续，直到遇到 标签为止;

扩展：怪异盒模型

• box-sizing

问题1：按钮有默认的1px的padding和2px的border，但是按钮中的padding和border不会添加在height之上，而是在宽高以为，也就是说添加的padding和border值不会把容器撑大，如果需要添加padding和border 在宽高之上去添加

解决：content-box 表示设置的宽高 只有内容的宽高，如果在设置padding和border时候，会在宽高之上去添加，也就是padding和border会把容器撑大

问题2：input有默认的1px的padding和2px的border，padding和border都会添加在height上

解决：border-box 当设置box-sizing：border-box的时候，表示设置的宽高已经包含了border和padding值

为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。