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

猜你喜欢

转载自blog.csdn.net/the_light_/article/details/79311853