Box模型及CSS布局

HTML元素分类

HTML标签： HTML标签指用尖括号括起来的关键字，比如< div>< /div>即是两个标签，其中不以斜杠（/）开头的标签称为开始标签，以斜杠（/）开头的标签称为结束标签，单标签既是开始标签又是结束标签
HTML元素： HTML元素指从开始标签到结束标签之间的所有代码；开始标签与结束标签之间的内容称为HTML元素内容
按照是否换行分为块级元素和行内元素
块级元素特点：自动换行且默认情况下占满整个父元素，如：table，p，ol，ul，li，form，div，hr，hn
行内元素又称内联元素，特点：不会自动换行，相邻行内元素可以排在同一行，如：i，b，del，img，a，span，input，select，textarea，label

常用CSS样式属性

display样式属性：设置样式生成框的类型，该属性有多个值：none此元素不会被显示；block此元素将显示为块级元素；inline默认，此元素会被显示为行内元素；inline-block行内块级元素，此元素可以使用块级元素才能使用的样式属性，但前后没有换行符
position样式属性：用于定义建立元素布局所用的定位类型，该属性有多个值：static默认值，没有定位，元素出现在正常流中；fixed生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动条的滚动而滚动。元素位置通过left，top，right以及bottom属性进行规定；relative生成相对定位的标签，相对于标签原来位置进行定位；absolute生成绝对定位的标签，相对于标签本身第一个position为非static的父元素进行定位，如果该标签所在的父标签均没有设置position为非static则相对于浏览器窗口进行定位，但此时元素会随着滚动条的滚动而滚动
z-index样式属性：设置元素的堆叠顺序，拥有更高堆叠顺序的标签总是会处于堆叠顺序较低的标签的上面，该属性有多个值：auto默认值，堆叠顺序与父标签相等；number设置标签的堆叠顺序
注意：a，z-index样式属性的属性值可以是负值
b，z-index仅能在定位标签上奏效（如：position:absolute;）
width和height属性：分别用于设置元素内容区的宽度和高度，该属性的属性值有length：使用px，cm等单位定义宽度或高度；%：通过定义基于直接父标签宽度或高度的百分比来定义该标签的宽度和高度
margin属性：用于在一个声明中设置所有的外边距的宽度或者设置各边上外边距的宽度
margin-top属性：设置元素的上外边距
margin-right属性：设置元素的右外边距
margin-bottom属性：设置元素的下外边距
margin-left属性：设置元素的左外边距
注意：块级元素的垂直相邻外边距会合并（外边距合并指的是当两个垂直外边距相遇时，合并后的外边距高度等于两个外边距高度中的较大者），而行内元素实际上不占上下外边距；行内元素的左右外边距不会合并；浮动元素的外边距也不会合并
另margin属性可以有1~4个值：
margin:10px;表明所有外边距都是10px
margin:10px 5px;表明上下外边距为10px，左右外边距为5px
margin:10px 5px 15px;表明上外边距为10px，左右外边距为5px，下外边距为15px
margin:10px 5px 15px 20px;表明上外边距为10px，右外边距为5px，下外边距为15px，左外边距为20px
margin:0 auto;居中显示
*{margin:0;}取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置
padding属性：在一个声明中设置元素所有内边距或者设置各边上内边距的宽度，此属性可以有1~4个值：
padding:10px;所有内边距都是10px
padding:10px 5px;上下内边距为10px，左右内边距为5px
padding:10px 5px 15px;上内边距为10px，左右内边距为5px，下内边距为15px
padding:10px 5px 15px 20px;上内边距为10px，由内边距为5px，下内边距为15px，左内边距为20px
padding-top属性：设置元素上内边距
padding-right属性：设置元素右外边距
padding-bottom属性：设置元素下外边距
padding-left属性：设置元素左外边距
*{padding:0;}取消浏览器为HTML文档中各标签设置的padding默认值，方便以后设置
left和right样式属性： left属性规定元素的左边缘，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移； right 属性规定元素的右边距，该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
注意：如果不使用”position”属性或者”position”属性的值为”static”，那么设置”left”属性和”right” 属性不会产生任何效果。
float样式属性：设置元素浮动方向， 该属性有多个值：left元素向左浮动；right元素向右浮动；none默认值，元素不浮动，并会显示其在文本中出现的位置
clear样式属性：用于设置元素的哪个边上不允许出现浮动元素，该属性有多个值：left在左侧不允许浮动元素；right在右侧不允许浮动元素；both在左右两侧均不允许浮动元素；none默认值，允许浮动元素出现在两侧
Box模型：为了方便HTML元素布局，每个HTML元素都包含在一个盒子里，这些矩形的盒子嵌套或者并列在一起形成了页面。
一个盒子模型从内到外分内容区（content）或称元素（element）、内边距(padding)、边框(border)和外边距(margin)4部分
内容区：内容区又称元素，用于包含其他HTML元素，相当于生活中盒子内的物品
内边距：内容区和边框之间的空间，相当于生活中盒子的防震泡沫
边框：边框用于标识盒子的边界，介于内边距和外边距之间， 相当于生活中盒子的“壁”
外边距：外边距位于边框外部，用于设定边框与周围其它元素之间的空间， 相当于生活中盒子与其他盒子之间的间距