CSS盒子模型、浮动及定位.pptVIP

CSS --盒子模型、浮动与定位 “盒子”与“模型”的概念探究 页面中的元素都由html标记定义 html, head, title, style, link, body等 h1~h6, p, marquee, ol, li, ul, bgsound, a, div(区块容器标记), span(容器标记), frameset, table, tr, td等 img, br, hr, frame等 所有的元素都相当于一个盒子，占据一定的页面空间(test05.html) 一个页面由各个盒子组成 “盒子”与“模型”的概念探究 在p标记外加div标记(test05-01.html) 观察以下css设置的页面效果 对p标记设置边框：1px的实线 设置div标记边框：1px的实线 对p标记设置内边距：5px 对p标记设置外边距：5px 分析p实际的占据空间宽度和高度: “盒子”与“模型”的概念探究 分析p实际的占据空间宽度和高度: 宽度：5px+1px+5px+内容宽度+5px+1px+5px 高度：5px+1px+5px+内容高度+5px+1px+5px 宽度(或高度)： 内容+内边距+ 边框+外边距 盒子模型 盒子的宽(高)度：内容+内边距+边框+外边距 边框：border 内边距：padding 外边距：margin 设置部分内容， 从上方开始按 顺时针方向对应 盒子之间的关系 盒子之间的关系 (test05-05.htm) 标准文档流 块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。 思考：哪些标记是块级元素？ 标准文档流 行内元素（inline） 对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 思考：哪些标记是行内元素？ 标准文档流 标准流：不使用其他排列和定位，按照css默认规定的块级元素和行内元素的排列方式。 判断各种元素具体的排列位置： 从body标记开始，逐个查看其包含的子元素，依次把其中的子元素按块级元素或行内元素的方式放到适当的位置，分配区域及设置格式等，直到所有的元素都检查一遍 div与span标记 div与span标记的区别(test05-06.html)： div标记：是一个通用的块级元素，一般用于放置各种元素方便排版，其他的块级元素一般具有一定的逻辑语义 span标记：是一个行内元素，当其他行内元素不合适时使用该标记，作用与div标记一样 盒子在标准流中的定位原则 盒子在标准流中的定位原则 行内元素之间的水平margin(test05-07) 块级元素之间的竖直margin(test05-08) 嵌套盒子之间的margin(test05-09) 行内元素之间的水平margin 下图所示为两个块并排的情况。 块级元素之间的竖直margin 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。 两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如下图所示。 块级元素之间的竖直margin 这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。 嵌套盒子之间的margin 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。 当一个div块包含在另一个div块中时，便形成了典型的父子关系。 margin的值也可以设置为负数 其中子块的margin将以父块的内容为参考，如下图所示。 盒子的浮动与定位 盒子的浮动:float(test05-10.html) 设置第1个浮动 盒子的浮动与定位 设置第2个浮动 盒子的浮动与定位 设置第3个浮动 盒子的浮动与定位 改变浮动的方向:box-3为右浮动 盒子的浮动与定位 再次改变浮动的方向：box-2为右浮动，box-3为左浮动 全部向左浮动 使用clear属性清除浮动的影响 扩展盒子的高度 盒子的浮动与定位 盒子的定位 在CSS中有一个非常重要的属性position （1）static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 （