第4章_理解cssdiv网页样式与布局.pptVIP

主讲：rove w e b Copyright ? All Rights Reserved. * 本章学习目标 1 2 3 4 5 CSS+DIV布局方式剖析 点击添加标题 * 元素的定位 了解盒子模型 div标记与/span标记 4.1 div标记与span标记 * div标记早在html3.0的时代造就出现，但那个时候并不常用， 直到CSS的出现才逐渐发挥它的优势。而 span标记直到html4.0 ，它是专门针对样式设计的标记。 div(division)简单而言是一个区块容器标记，既div与/div之间 相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、 摘要和备注等各种html元素。因此div可以看做是一个独立的对象 用CSS控制。 4.1 div标记与span标记 * 10-1.html 4.1 div标记与span标记 * DIV与span的区别 10-2.html 4.1 div标记与span标记 * div与span的区别在于，div是一个块级(block-level)元素，它包围的元素会自动换行， 而span仅仅是个行内元素(inline elements),不会换行。span没有结构上的意义，当其 他元素都 不合适的时候可以换上他，同时div可以是包含span的反之则不行。 4.2 盒子模型的概念 * 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容要大。 4.2 盒子模型的概念 * 一个盒子模型由content(内容)、border(边框)、padding(间隙)、 和margin(间隙)这四部分组成。 一个盒子的实际宽度是有content+padding+border+margin组成的。 在CSS中可以通过width和height来控制content的大小，并且对于任何 一个盒子都可以设置四条边各自的border、padding和margin。只要利用好 盒子的这些属性，就能够实现各种各样的排版效果。 4.2 盒子模型的概念 * border一般用于元素分离，border的外围即为元素的最外围， 因此计算元素的实际宽度和高度的时候应考虑在内。 Border： padding content padding margin border color、width、style 4.2 盒子模型的概念 * Border： 注意：IE不支持border-style，so不推荐使用 10-3.html 4.2 盒子模型的概念 * padding： Padding用于控制content与border之间的距离。 10-6.html 4.2 盒子模型的概念 * Margin： Margin指的是元素与元素之间的距离。 10-8.html 4.2 盒子模型的概念 * Margin： 从直观上而言，margin用于控制块与块之间的距离，倘若将盒子比作 展览馆里展出的一副副画，那么content就是画面本身，padding就是 画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离！ 10-8.html 4.2 盒子模型的概念 * 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 盒子模型的概念 * position ： Position与float一样，定位块的位置，既块相对于父块的位置。 10-23.html------10-30.html练习 10-20.html、10-21.html、10-22.html、 做好预习和复习 P P T * * *