03_CSS加DIV布局.pptVIP

Page * 03_CSS加DIV布局 内容提要 行内元素与块级元素 其貌不扬的家伙：层（DIV） 盒子模型 间距 边距 边框 CSS中的定位和浮动 课堂小结 课后练习 学习思路 (01) CSS+DIV是网页布局中一个难点，其实说难只是在于刚上手的时候，熟练后就会觉得很容易，可以节省大量HTML代码，也更利于维护。 学习DIV+CSS首先要对行级元素和块级元素有较深理解，要知道哪些属性是只有行级元素拥有的。 然后要对盒子模型有清楚的认识，要知道如何控制块级元素内的边距尺寸和块级元素之间的距离。 然后要对定位属性（position）有较深理解，对其重要的四个属性的作用进行反复试验。 学习思路 (02) 然后我们要对浮动属性（float）有较深理解，要知道什么时候要用浮动、什么时候要清楚浮动（clear属性） 最后，我们要勤加练习布局，全力以赴做出一两个布局后，就能慢慢体会到CSS+DIV的精妙之处。 要注意的是：CSS+DIV在各浏览器中表现有时不一样，不要因此感到灰心，我们后面会介绍如何处理浏览器兼容性问题的方法，现阶段我们以IE7为准。学好CSS的诀窍在于反复的练习、总结，经验慢慢丰富了，布局就越做越好了。 行内元素与块级元素 行内元素：行内就是在一行内的元素，一行可以放置多个行内元素对象。行内元素就好像一个单词。常见的行内元素有：span、a、img、input等。 用display:inline;设置选择器指向的元素为行内显示。可以强制设置某些行内元素显示为块级。 块级元素：块级元素就是一个四方块，块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。常见的块级元素有：table、p、div等 用display:block;设置选择器指向的元素为块级显示。可以强制设置某些行内元素显示为块级。 行内元素与块级元素的不同点： 块级元素会占一行显示，而行内元素可以在一行并排显示 行内元素不能应用width、height属性 行内元素设置padding时，但只有padding-left和padding-right生效。 margin属性也是和padding属性一样，对行内元素左右有效，上下无效。 其貌不扬的家伙：层（DIV） DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 Div本身没有太多显示格式效果，换行是 div 固有的唯一格式表现。 Div常用属性： 尺寸：width、height overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）； Display属性 z-index 盒子模型 (01) 盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。 基本概念：所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。 一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成。 如果将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。 所有的块级元素都可以看作盒子 盒子模型 (02) 盒子模型 (03) 盒子模型 (04) 上面两个图从平面和立体上详细展示了盒子模型的细节，用来做盒子容器的可以是一切块级元素，但最常用的还是div，当然table也可以。 盒子模型常用的属性有： 间距(margin)：指的是元素与元素之间的距离。 边距(padding)：用于控制content与border之间的距离。 边框(border)：一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。border主要有3个属性，分别是color（颜色）、?width（粗细）、?style（样式）。 注：详细的属性内容和值范围见手册 CSS中的定位和浮动 (01) 问题：网页中元素的位置由什么决定？ 普通流：网页默认的解析和显示顺序我们成为普通流，亦称文本流。其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的。 我们通过float和position两个属性可以将元