（1）内容区（content）：width设置内容区宽度，height设置内容区高度。

（2）内边距（padding）：纸盒子的内容区与边框之间的距离

（3）边框（border）

为元素设置边框必需指定三个样式：

border-width：边框的宽度 。如果指定了四个值，会分袂设置给上  右  下  左；如果指定了三个值，设置给上  摆布  下 ；如果两个值，设置给上下  摆布。

border-color：边框的颜色  。 法则同（border-width）

border-style：边框的样式（none没有边框     solid实线    dotted点状边框   dashed虚线     dobble双线）

（4）外边距（margin）                                                          

1、  如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值；垂直设置为auto，则外边距默认为0。

2、垂直外边距的重叠：在网页中垂直标的目的的相邻外边距会产生外边距重叠，取外边距中的最大值。

2、溢出值（overflow）

子元素默认在父元素内容区，如果子元素的巨细赶过了父元素内容区，则赶过的部分会在父元素以外的位置显示，赶过的那那内容，称为溢出内容，（默认在父元素外边显示）

可选值： visible：默认值，不会对溢出部分做措置惩罚惩罚。

hidden：溢出的部分，会被修剪，不会显示。

scroll：会为父元素添加滚动条，通过滚动来检察完整内容（岂论是否溢出，城市添加程度、垂直标的目的上的滚动条）

auto：会按照需求自动添加滚动条。

3、浮动（float）

（1）  块元素在文档流中默认垂直摆列，如果但愿块元素在页面中程度摆列，可以是块元素脱离文档流。当为一个元素设置浮动之后，元素会当即脱离文档流，其下边的元素会当即向上移动，直到遇到父元素的边框或者其他浮动元素遏制。如果浮动元素上边是一个没有浮动的元素，则不会赶过块元素。浮动元素不会赶过他的兄弟元素，最多一边齐。

可选值：none：默认值，元素默认在文档流中摆列

left：元素会当即脱离文档流，向页面左侧浮动

right：元素会当即脱离文档流，向页面右侧浮动

（2）浮动的元素不会挡住文字，文字会环绕在浮动元素的周围

（3）块元素脱离文档流后，高度宽度城市被内容撑开，内联元素脱离文档流后，会酿成块元素。

4、高度塌陷

在文档流中，父元素默认被子元素内容撑开，但是当子元素设置浮动时，导致父元素高度塌陷，由于父元素高度塌陷，父元素下的所有元素城市向上移动，导致页面构造混乱。

解决:按照W3C的标准，在页面中元素都有一个隐含属性叫做Block Formatting  Context简称BFC，该属性可以设置打开或者封锁。当开启元素的BFC以后，，元素会有以下特性：

1、父元素的垂直外边距不会和子元素重叠。

2、开启BFC的元素不会被浮动元素所笼罩

3、开启BFC的元素可以包罗浮动的子元素

5、文本输入项

（1）暗码输入项  <input   type="password" />

（2）单选按钮     <input  type="radio"   value="  "  checked="  "/>

(3) 多选按钮   <input type="checkbox"  value="  "  checked="  "/>

(4) 下拉列表   <select>

<option  value="  "  selected="  ">北京</option>

<option>上海</option>

</select>

（5）文本上传项   <input type="file" />

(6)  文本输入域   <textarea ><textarea>

（7）提交按钮  <input  type="submit"  value="  "/>

(8)普通按钮  <input type="button" value="  "/>

(9)重置按钮<input  type="reset"  value=" "/>

(10)隐藏项<input  type="hidden"/>

HTML学习6-盒模型