第4章_理解CSS+DIV网页样式与布局.ppt

第四章理解CSS DIV网页样式与布局 主讲 rove w e b Copyright AllRightsReserved 1 本章学习目标 2 元素的定位 了解盒子模型 标记与标记 4 1div标记与span标记 3 标记早在html3 0的时代造就出现 但那个时候并不常用 直到CSS的出现才逐渐发挥它的优势 而标记直到html4 0 它是专门针对样式设计的标记 division 简单而言是一个区块容器标记 既与之间相当于一个容器 可以容纳段落 标题 表格 图片 乃至章节 摘要和备注等各种html元素 因此div可以看做是一个独立的对象用CSS控制 4 1div标记与span标记 4 10 1 html 4 1div标记与span标记 5 DIV与span的区别 10 2 html 4 1div标记与span标记 6 div与span的区别在于 div是一个块级 block level 元素 它包围的元素会自动换行 而span仅仅是个行内元素 inlineelements 不会换行 span没有结构上的意义 当其他元素都不合适的时候可以换上他 同时div可以是包含span的反之则不行 4 2盒子模型的概念 7 所有页面中的元素都可以看成是一个盒子 占据着一定的页面空间 一般来说这些被占据的空间往往都要比单纯的内容要大 4 2盒子模型的概念 8 一个盒子模型由content 内容 border 边框 padding 间隙 和margin 间隙 这四部分组成 一个盒子的实际宽度是有content padding border margin组成的 在CSS中可以通过width和height来控制content的大小 并且对于任何一个盒子都可以设置四条边各自的border padding和margin 只要利用好盒子的这些属性 就能够实现各种各样的排版效果 4 2盒子模型的概念 9 border一般用于元素分离 border的外围即为元素的最外围 因此计算元素的实际宽度和高度的时候应考虑在内 Border padding content padding margin border color width style 主要属性 4 2盒子模型的概念 10 Border 注意 IE不支持border style so不推荐使用 10 3 html 4 2盒子模型的概念 11 padding Padding用于控制content与border之间的距离 10 6 html 4 2盒子模型的概念 12 Margin Margin指的是元素与元素之间的距离 10 8 html 4 2盒子模型的概念 13 Margin 从直观上而言 margin用于控制块与块之间的距离 倘若将盒子比作展览馆里展出的一副副画 那么content就是画面本身 padding就是画面与画框之间的留白 border就是画框 而margin就是画与画之间的距离 10 8 html 4 2盒子模型的概念 14 Float 八仙过海的实例练习当中运用了float属性 从而方便定位了图片和文字的相对位置 实例10 14 html 10 15 html 10 16 html 10 17 html 10 18 html 10 19 html 属性 left right none 4 2盒子模型的概念 15 position Position与float一样 是css中非常重要的概念 从字面上理解就可以看出是指定块的位置 既块相对于其父块的位置 共有四个属性值 Static 默认值Absolute 表示绝对位置 16 4 2盒子模型的概念 Z index Z index属性用于调整定位时重叠块的上下位置 z index值大的页面将位于其值小的上方 10 28 html 17 4 2盒子模型的概念 1 Margin没有加具体方向的时候 我们以上为界顺时针旋转取值 为 上 右 下 左 补充 2 当我们在上面的布局用到float时 在下面的面板当中希望清楚float对下面块的影响的时候那么我们可以在其模块中加入clear both来清楚影响 详见实例10 19 html 3 当我们用margin属性的时候 如果是几个模块嵌套那么你采用margin left right topBottom时候它们设置的值都是相对于上级块的值 4 当position取值为relative时候 你