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生成元素，然后设置偏移量