CSS DIV美化和布局篇.ppt

理解CSS定位与div布局 目标 div标记与span标记 盒子模型 元素定位 div标记与span标记 div简单而言是一个区块容器标记，即div与/div之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素 声明时只需对div进行相应的控制，其中的各标记元素都会因此而改变 div标记与span标记 span标记与div标记一样，在span与/span中间同样可以容纳各种HTML元素，从而形成独立的对象。 div和span起到的作用都是独立出各个区块 div与span的区别 div是一个块级元素，它包围的元素会自动换行；span是一个行内元素，在它的前后不换行 span标记可以包含于div标记；反过来不成立 经验之谈:通常情况下，对于页面中大的区块使用div标记，而span标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片和一个超链接等 盒子模型 盒子模型是控制页面一个很重要的概念。只要很好的掌握了盒子模型以及其中每个元素的用法，才能真正控制页面中的各元素的位置 盒子模型的概念 border padding margin 盒子模型的概念 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间 可以通过调整盒子的边框和距离等参数，来调节盒子的位置 一个盒子模型由content(内容)、padding(间隙)、 border(边框)、 margin(间隔)这四个部分组成 一个盒子的实际宽度（高度）是由content+padding+border+margin组成的 在CSS中可以通过设定width和height的值来控制content的大小 技术背景：在浏览器中，width和height的值都是width+padding或者height+padding的值，因此在实际做网页时需要特别注意。另外在页面具体排版时，如果div块中包含子div块，情况会比较复杂。 border 一般用于分离元素，border的外围即为元素的最外围，因此计算元素的实际的宽和高时，将border纳入 border属性：color、width、style width即border的粗细程度，可以设定为thin、medium、thick和具体值。默认值为medium，一般的浏览器都将其解析为2px宽 style属性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等 注：对于groove、inset、outset和ridge这几种值，IE支持不理想，不推荐使用 border 如果希望在某段文字结束后加上虚线用于分割，而不是用border将这段话框起来，可以通过单独设置border-bottom来完成 注意：在特定情况下给元素设置background-color背景色时，IE作用的区域为content+padding，而firefox则是content+padding+border padding padding用于控制content与border之间的距离 技术背景：在浏览器中如果使用width或是height属性指定了父块的宽或高，由于width或height值中包含padding，content会受到padding的挤压。在网页设计中，也可以利用这一点实现许多效果。在CSS排版中需要同时设置4个方向的padding值时，可以将4个语句合成到一起 margin margin：指元素与元素之间的距离 两个块并排（块级元素） margin 父子关系：当一个div块包含在另一个div块中间时，将形成典型的父子关系。其中子块的margin将以父块的content为参考 margin 当将margin设置为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上 行内元素 margin 块级元素 父子关系 元素的定位 用CSS方法对页面中块元素进行定位float 、position、z-index float：left、right、none（默认值）。当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。 块son1浮动到最左端的位置是父块的padding-left加上自己的margin-left，而不是父块的边界border 元素的定位 将son1的margin设置为负数，子块能浮动到的最左端依然是父块的padding-left加上这个负数 元素的定位 经验之谈：除了margin-left和margin-right，margin-top与margin-bottom也都可以设置为负数。类似将margin设置为负数的方法在实际排版中十分常见，也可以很好