盒子模型
| 属性 | 属性值 | 说明 |
|---|---|---|
| margin | 当设置一个值时，为四边的边距，2个值时为上下和左右的边距，3个值时为上,左右,下，4个值上右下左 | 外边距 |
| 可分别对left/top/right/bootom分别进行设置 | ||
| padding | 当设置一个值时，为四边的边距，2个值时为上下和左右的边距，3个值时为上,左右,下，4个值上右下左 | 内边距 |
| 可分别对left/top/right/bottom分别进行设置 |
border同样可以设置上边线(border-top)，下边线(border-bottom)，左边线(border-left)，右边线(border-right)
| 属性 | 属性值 | 说明 |
|---|---|---|
| border | solid | 实线 |
| double | 双实线 | |
| dashed | 虚线 | |
| dotted | 点线 |
元素显示类型
元素类型的分布,依据CSS的显示
| 块元素(block element) | 行内(内联)元素 | 行内块元素 |
|---|---|---|
| (A) 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为 矩形区域, (B)默认情况下,块状元素都会占据一行;默认情况下,块状元素会顺序 自上而下排列。 ©块状元素都 可以定义自己的宽度和高度。 (D)块状元素一般都 作为其他元素的容器,他可以容纳其他内联元素和其他块状元素。我们可以吧这种容器比喻为一个盒子 | (A)内联元素的表现形式是始终以行内诸葛进行显示;横着排列。 (B)内联元素没有自己的形状, 不能定义他的宽和高,他显示的宽度,高度只能根据所包含内容的高度和宽度来确定,他的最小内容单元也会呈现矩形形状; ©内联元素也会遵循盒模型基本原则,但是对于margin和padding个别属性值不生效 | 内联块状元素(inline-block)就是同时具备内联元素,块状元素的特点 |
| 例如：div p ul li ol li dl dt dd h1-h6等 | 例如：a b em i span strong等 | 例如：img input等 |
浮动属性
浮动
| 属性 | 描述 | 说明 |
|---|---|---|
| float | float:left; | 元素靠左边浮动 |
| float | float:right; | 元素靠右边浮动 |
| float | float:none; | 元素不浮动 |
| 浮动的作用1 | 定义网页中其他文本如何环绕改元素显示 | |
| 浮动的作用2 | 就是让竖着的东西横着来 |
清除浮动
| 属性 | 描述 | 说明 |
|---|---|---|
| clear | Clear:none; | 允许有浮动对象 |
| clear | Clear:right; | 不允许右边有浮动对象 |
| clear | Clear:left; | 不允许左边有浮动对象 |
| clear | Clear:both; | 不允许有浮动对象 |
| 清除浮动只是改变元素的排列方式，改元素还是漂浮着，脱离文档流 |
