HTML、CSS笔记（网页排版）

一、使用结构标签
HTML网页不仅需要div标签，还需要以下几类标签来完善结构
1）<h1>~<h6>
2）<p>
3）<ul><ol><li>等
4）<table><tr><td>等
5）<form><input><textarea>等
6）<span>
HTML结构嵌套的常用规则
1）body元素能够直接包含的元素有ins、del、script和块状元素
2）ins和del两个元素可以直接块状元素和行内元素等不同类型的元素
3）p、h1~h6元素可以直接包含行内元素和纯文本元素，但是不能直接包含块状元素。
4）dl元素只能够包含dt和dd元素，不能包含其他元素。同时，dt只能包含行内元素
5）form元素不能直接包含input元素。因为input元素是行内元素，而form元素仅能够包含块状元素。
7）table元素能够直接包含caption、colgroup、col、thead、tbody、tfoot，但是不能够包含tr以及其他元素。caption元素和dt元素一样，只能包含行内元素。tr只能包含th和td，而th和td能包含任何元素。
H5结构元素：article、header、footer、section、aside、nav、main、hgroup

二、浮动显示
1）定义浮动显示
float:none | left | right
浮动元素以块状显示，可以设置width和height
2）消除浮动（不允许与浮动元素并排）
clear属性可以清除浮动，取值为left、right、both、none
3）浮动嵌套
若浮动嵌套浮动，父元素没定义宽高，则会调整自身尺寸来适应子元素
若浮动嵌套入流动，不会适应。可以在包含元素内的最后一行添加一个清除元素
4）混合浮动布局
左栏浮动，右栏流动，想要调整左右栏间距就调整浮动栏的盒子模型
上下栏间距，可以给上栏的浮动元素设置一个清除元素<div class="clear"></div>，撑开上栏包含框。

三、定位显示
position:static | relative | absolute | fixed
static：表示不定位，元素遵循默认的流动模型
absolute：表示绝对定位，对于其最接近的一个具有定位属性的父定义包含框进行绝对定位，层叠顺序由z-index属性定义。
fixed：表示固定定位，它的定位包含框是视图本身。（目前没有得到IE支持）
relative：表示相对定位，按static生成元素，然后设置偏移量