《CSS DIV美化和布局篇》由会员分享，可在线阅读，更多相关《CSS DIV美化和布局篇（29页珍藏版）》请在金锄头文库上搜索。
1、理解CSS定位与div布局目标 标记与标记 盒子模型 元素定位div标记与span标记简单而言是一个区块容器标记，即与之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注 等各种HTML元素声明时只需对进行相应的控制，其中的各标记元素都会因此而改变 div font-size:18px; font-weight:bold; font-family:Arial; color:#FF0000; background-color:#FFFF00; text-align:center; width:300px; height:100px; div标记与span标记 标记与标记一样，
2、在与 中间同样可以容纳各种HTML元素，从而 形成独立的对象。 和起到的作用都是独立出各个区块与的区别 是一个块级元素，它包围的元素会自动换行 ；是一个行内元素，在它的前后不换行 标记可以包含于标记；反过来不成 立 经验之谈:通常情况下，对于页面中大的区块使用 标记，而标记仅仅用于需要单独设 置样式风格的小元素，例如一个单词、一幅图片 和一个超链接等盒子模型 盒子模型是控制页面一个很重要的概念。 只要很好的掌握了盒子模型以及其中每个 元素的用法，才能真正控制页面中的各元 素的位置 盒子模型的概念 border padding margin盒子模型的概念 所有页面中的元素都可以看成是一个盒子，占
3、据着一定的 页面空间 可以通过调整盒子的边框和距离等参数，来调节盒子的位 置 一个盒子模型由content(内容)、padding(间隙)、 border( 边框)、 margin(间隔)这四个部分组成 一个盒子的实际宽度（高度）是由 content+padding+border+margin组成的 在CSS中可以通过设定width和height的值来控制content 的大小 技术背景：在浏览器中，width和height的值都是 width+padding或者height+padding的值，因此在实际做 网页时需要特别注意。另外在页面具体排版时，如果 块中包含子块，情况会比较复杂。bor
4、der 一般用于分离元素，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 如果希望在某段文字结
5、束后加上虚线用于分割，而不是用 border将这段话框起来，可以通过单独设置border-bottom 来完成 注意：在特定情况下给元素设置background-color背景色 时，IE作用的区域为content+padding，而firefox则是 content+padding+border.cell border:10px dashed #000000; text-align:center; background-color:#e799f8; padding padding用于控制content与border之间的距离 技术背景：在浏览器中如果使用width或是height属性指定 了
6、父块的宽或高，由于width或height值中包含padding， content会受到padding的挤压。在网页设计中，也可以利 用这一点实现许多效果。在CSS排版中需要同时设置4个 方向的padding值时，可以将4个语句合成到一起.outside padding:10px 30px 50px 100px /*同时设置，顺时针*/ margin margin：指元素与元素之间的距离 两个块并排（块级元素 ）span1span2margin-rightmargin-left 两个块并排(行内元 素)div1div2div1的 margin-bottomdiv2的 margin-topmar
7、gin-right+margin-left 两者中较大者margin-bottommargin 父子关系：当一个块包含在另一个 块中间时，将形成典型的父子关系。 其中子块的margin将以父块的content为参 考父div子div margin子div父div contentmargin 当将margin设置为负数时，会使得被设为 负数的块向相反的方向移动，甚至覆盖在 另外的块上 行内元素span.left margin-right:30px; background-color:#a9d6ff; span.right margin-left:-53px;/* 设置为负数 */ backgro
8、und-color:#eeb0b0; margin 块级元素 父子关系块元素1 块元素2父div子divmargin-left：0pxmargin-left：-60px元素的定位用CSS方法对页面中块元素进行定位float 、position、z-index float：left、right、none（默认值）。当设置了元素向左或者向右浮 动时，元素会向其父元素的左侧或右侧靠紧。块son1浮动到最左端的位置是父块的padding-left加上自己的margin- left，而不是父块的边界border.son1 padding:10px;/* 子块son1的padding */ margin:
9、5px;/* 子块son1的margin */ background-color:#70baff; border:1px dashed #111111; float:left;/* 块son1左浮动 */ 元素的定位 将son1的margin设置为负数，子块能浮动到的最左端依然 是父块的padding-left加上这个负数.son1 padding:10px;/* 子块son1的padding */ margin:5px 0px 0px -35px;/* 负数margin */ background-color:#70baff; border:1px dashed #111111; float
10、:left;/* 块son1左浮动 */ 父块的padding子块的margin子块float:left元素的定位 经验之谈：除了margin-left和margin-right，margin-top与 margin-bottom也都可以设置为负数。类似将margin设置 为负数的方法在实际排版中十分常见，也可以很好的利用 ，制作出各式各样的页面版式position position：指定块的位置，即块相对于父块的位置和相对 于它自身应该在的位置 position:static(默认)、absolute、relative和fixed static:表示块保持在原本应该在的位置，即该值没有任何
11、移动效果 absolute:表示绝对位置，设置为absolute时，子块已经不 再从属于父块，其左边框相对于页面左边的距离 为20px，这个距离已经不是相对父块的左边框的距离了 技术背景：top、right、bottom和left这4个CSS属性，它 们都是配合pasition属性使用的，表示的是块的各个边界 离页面边框（当position设置为absolute）的距离，或各个 边界离原来位置（当position设为relative）的距离#block background-color:#fff0ac; border:1px dashed #000000; padding:10px; posi
12、tion:absolute; /* absolute绝对定位 */ left:20px; /* 块的左边框离页面左边界20px */ top:40px; /* 块的上边框离页面上边界40px */ position top、right、bottom和left这4个属性不但可 以设置为绝对像素，还可以设置为百分数 经验之谈：鉴于浏览器之间的差异，建议 在设计时只设置left和right这两个属性中的 一个，以及top和bottom这两个属性中的一 个position 一个父块包含两个子块的情况，首先将其中一个子块的 position属性设置为absolute，此时块1不再属于父块 #father
13、，子块2称为父块中的第1个子块#block1 background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:absolute;/* absolute绝对定位 */ left:30px; top:35px; position 如果将两个子块的position同时设置为 absolute，这时两个子块都不再从属于父块 ，都相对于页面定位 技术背景：之所以块2位于块1上方，是因 为CSS默认后加入到页面中的元素会覆盖 之前的元素，在页面中一层层往上写#block1 background-color:#fff0a
14、c; border:1px dashed #000000; padding:10px; position:absolute;/* absolute绝对定位 */ left:30px; top:35px; #block2 background-color:#ffbd76; border:1px dashed #000000; padding:10px; position:absolute;/* absolute绝对定位 */ left:50px; top:60px; positionposition设置为relative时，子块是相对于其父块来进行定位的，同样 配合top、right、botto
15、m和left这4个属性如果希望子块的宽度仅仅为其内容加上自己的padding值，可以将它 的float属性设置为left，或者指定其宽度width#block1 background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative;/* relative相对定位 */ left:15px;/* 子块的左边框距离它原来的位置15px */ top:10%; position 将其中一个块的position设置为relative#block1 background-color:#fff0ac; bo
16、rder:1px dashed #000000; padding:10px; position:relative;/* relative相对定位 */ left:15px;/* 子块的左边框距离它原来的位置15px */ top:10%; position 同时设置两个子块的position属性为relative#block1 background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative;/* relative相对定位 */ left:15px;/* 子块1的左边框距离它原来的位置15px */ top:30px;/* 子块1的左边框距离它原来的位置30px */ #block2 background-color:#ffc24c;
