CSS第十章理解CSS定位与DIV布 (课件).pdfVIP

第十章 第十章 理解CSS定位与DIV布局 理解CSS定位与DIV布局 10.1div标记与span标记 10.1div标记与span标记 div div div是一个区块容器标记，即div与/div之间相当 div是一个区块容器标记，即div与/div之间相当 于一个容器，可以容纳段落、标题、表格、图片，乃至 于一个容器，可以容纳段落、标题、表格、图片，乃至 章节、摘要和备注等各种HTML元素。因此，可以把 章节、摘要和备注等各种HTML元素。因此，可以把 div与/div中的内容视为一个独立的对象，用于CSS div与/div中的内容视为一个独立的对象，用于CSS 的控制。 的控制。 span span 在span与/span中间同样可以容纳各 在span与/span中间同样可以容纳各 种HTML元素，从而形成独立的对象。 种HTML元素，从而形成独立的对象。 div与span的区别 div与span的区别 div与span的区别在于，div是一个 div与span的区别在于，div是一个 块级元素，它包围的元素会自动换行。而 块级元素，它包围的元素会自动换行。而 span仅仅是一个行内元素，在它的前后 span仅仅是一个行内元素，在它的前后 不会换行。此外，span标记可以包含于 不会换行。此外，span标记可以包含于 div标记之中，成为它的子元素，而反过 div标记之中，成为它的子元素，而反过 来则不成立，即span标记不能包含div 来则不成立，即span标记不能包含div 标记。 标记。 例52 例52 html html head head titleDIV与SPAN区别/title titleDIV与SPAN区别/title /head /head body body p style=color:#CC0000;font-size:40px; div标记不同行：/p p style=color:#CC0000;font-size:40px; div标记不同行：/p divimg src=01.jpgborder=0/div divimg src=01.jpgborder=0/div divimg src=01.jpgborder=0/div divimg src=01.jpgborder=0/div divimg src=01.jpgborder=0/div divimg src=01.jpgborder=0/div p style=color:#CC0000;font-size:40px; span标记同行：/p p style=color:#CC0000;font-size:40px; span标记同行：/p spanimg src=01.jpgborder=0/span spanimg src=01.jpgborder=0/span spanimg src=01.jpgborder=0/span spanimg src=01.jpgborder=0/span spanimg src=01.jpgborder=0/span spanimg src=01.jpgborder=0/span /body /body /html /html 10.2盒子模型 10.2盒子模型 盒子模型的概念 盒子模型的概念 盒子模型就是指CSS布局中的每一个元素， 盒子模型就是指CSS布局中的每一个元素， 在浏览器的解释中，都被当作一个盒状物。 在浏览器的解释中，都被当作一个盒状物。 一个盒子模型由content （内容） 一个盒子模型由content （内容） border （边框） padding （间隙） border （边框） padding （间隙） margin （间隔）4部分组成。 margin