盒子模型
特点
结构
==================================
外边距
margin：- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
示例
margin-top: 3 px
margin-right : 5 px
margin-bottom : 7 px
margin-left : 4 px
margin :3px 5px 7px 4px;
margin :3px 5px 7px (5px);
margin :3px 5px (3px 5px);
margin :8px (8px 8px 8px);
注意：
margin: 上 右 下 左; （顺时针方向）
==================================
边框
border：
==================================
内边距
padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- padding
示例：
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:30px 8px 10px (8px) ;
padding:10px 5px;
padding:10px;
注意：
padding: 上 右 下 左; （顺时针方向）
==================================
盒子模型总尺度
盒子模型总尺度 = border + padding +margin + 内容尺寸(宽/高)
外边距可用于网页居中显示
- margin-left: auto;
- margin-right:auto;
块元素才能完全适用于盒子模型
使用display属性来相互转化
- none（元素隐藏，不可见）
- block（转为块元素，独占一行）
- inline（转为内联元素，不换行）
==================================
浮动属性
float
取值：
- left 左浮动
- right 右浮动
- none 不浮动
作用
- 块元素同行排列显示，一般用于排版、分栏显示
- 设置浮动属性后，脱离文档流向指定的左或右边对齐 直到父元素的边界或浮动的元素
注意 :
使用浮动后要及时清除，以免影响其后的网页元素
==================================
清除浮动
清除浮动必要性- 浮动后，脱离了文档流不占网页空间
- 浮动后的网页元素会影响同级元素
clear属性清除浮动
取值
- left
- right
- both
- none
表明容器框的哪边不挨着浮动框
==================================
overflow属性
overflow
作用
- 定义溢出元素内容区的内容会如何处理
取值
- visible （默认）
- auto
- hidden
- scroll
==================================
定位属性
position属性
relative（相对定位）
相对它原来的位置，通过指定偏移，到达新的位置。
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
absolute（绝对定位）
相对已设定非static定位属性的父元素计算偏移量
fixed（相对浏览器固定定位，IE6不支持）
static（默认）
偏移量设置
- X轴(left、right 属性)与Y轴（top、bottom属性）
- 可取值：像素或百分比
