DIV-CSS布局解析

DIV+CSS布局一、网页布局方式表格框架Div+CSS二、DIVCSS基本属性1.divDIV全称division，意为“分区”，使用DIV的方法跟使用其他tag的方法一样。如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用P/P是一样的。DIV本身就是容器性质的，不但可以内嵌table还可以内嵌文本和其它的HTML代码注意：div标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如：paadivbb/divcc/p的结果是不确定的。什么是DIV+CSSDIV+CSS布局div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。DIV+CSS标准的优点结构化HTML，提高易用性结构清晰，表现和内容相分离更好的控制页面布局结构的重构性强，缩短改版时间大大缩减页面代码，提高页面浏览速度，缩减带宽成本结构清晰，容易被搜索引擎搜索到SPANSPAN的用法与DIV一样div这是DIV标记/divspan这是SPAN标记/spanDIV与SPAN的区别DIV是块元素，使用会产生分行SPAN是一个行内元素，使用不会产生分行例：styletype=text/cssdiv{background-color:#090}span{background-color:#06C}/stylediv这是DIV标记/divspan这是SPAN标记/span盒子模型每个HTML元素都可以看作一个装了东西的盒子盒子具有宽度（width）和高度（height）盒子里面的内容到盒子的边框之间的距离即填充（padding）盒子本身有边框（border）盒子边框外和其他盒子之间，还有边界（margin）例：1.htmlDIV的宽度=width+padding+border+marginDIV的宽度=width+margin在Firefox、Opera、Google、IE8、IE7浏览器中，宽度的计算公式是：IE6的宽度计算是：Width包含了padding、border大小div.html：Div宽度示例IE6.0效果Firefox效果Margin边界属性Margin：margin-top、margin-right、margin-bottom、margin-left，外边距顺序依次是上、右、下、左例如：Margin:20px;/*各边界均为20px*/margin-top:20px;margin-right:10px;margin-bottom:10px;margin-left:20px;Margin:20px10px10px20px;margin:0pxauto；/*上下为0，左右边界自动调整，可以使层自动居中*/margin:2em4em;/*上下为2em，左右为4em*/行内元素之间的水平marginspan1span2Margin-rightMargin-left块级元素之间的竖直margin块元素1Margin-bottom:50pxMargin-top:30px块元素二块元素1Margin-bottom:50px块元素二元素间垂直间距的计算1.垂直相邻的边界会发生重叠，针对所有浏览器，计算两个相邻元素的实际间距时，首先应判断最大边界值，然后用最大边界值参与实际的计算，即上下元素的边界发生重叠时，小的边界将被大的边界覆盖;2.当元素浮动时，相邻元素的边界不会发生重叠现象，即当计算元素间的垂直间距时应把上下边界、上下补白、上下边框全部计算进去。Padding填充距属性Padding：padding-top、padding-right、padding-bottom、padding-left，内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左border边框属性Style边框样式•hidden:隐藏边框。IE不支持•dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线•dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线•solid:实线边框•double:双线边框。两条单线与其间隔的和等于指定的border-width值•groove:根据border-color的值画3D凹槽•ridge:根据border-color的值画菱形边框•inset:根据border-color的值画3D凹边•outset:根据border-color的值画3D凸边书写示例border:1pxsolidred;border-top:1pxsolidred;border-bottom:1pxdottedblue;border-left:1pxdottedgreen;border-right:1pxdottedyellow;Float浮动属性float属性定义元素浮动到左侧或右侧。在CSS中，任何元素都可以浮动，浮动元素会生成一个块级元素。元素对象设置了float属性之后，将不再独自占据一行，浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。float值：Left和Right：分别浮动元素到各自的方向None(默认的)：使元素不浮动Inherit：将会从父级元素获取float值例：2.htmlClear清除属性设定是否允许浮动元素之存在，一般和float配合使用；Clear取值：clear:left;清除左浮动clear:right;清除右浮动clear:none;左右都可以有浮动clear:both;左右都不可以有浮动Display显示属性控制对象的形状或类型以及是否显示取值：block：对象被指定为块元素，作为一个新段落，换行显示none：不显示inline：对象以内嵌方式显示在当前段落，不换行list-item：对象以列表形式显示，换行float:left;clear:left;width:600px;height:400px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;位置位置属性就是指定元素的位置，它是CSS-P（CascadingStyleSheetsPositioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。positionstatic：静态，默认值relative：相对定位，需要通过top、bottom、left、right配合absolute：绝对定位，将对象元素定位在页面任意位置，以浏览器左上角的距离为参照物leftrighttopbottomz-indexposition:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px2px3px4px);left:auto;top:5px;right:5px;bottom:5px;height:400px;width:600px;三、常用网页结构布局实例单列结构3.html上下结构4.html上中下结构5.html左右结构6.html左中右结构7.html两行两列结构8.html两行三列结构9.html混合结构10.html经典应用：blog网站采用div+css构架内容和样式的分离在重构页面布局或者更换皮肤的时候，只用针对每一个div元素重新定义其具体位置、样式。DIV+CSS应用四、编写DIV+CSS布局页面结构图五、Dreamw中创建DIV+CSS布局页面文件-新建-空白页-HTML：选择一种布局六、AP元素布局AP元素：绝对定位元素，是分配有绝对位置的HTML页面元素，就是div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。Dreamweaver将带有绝对位置的所有div标签视为AP元素（分配有绝对位置的元素）。所有AP元素（不仅仅是绝对定位的div标签）都将在“AP元素”面板中显示。Dreamweaver中利用AP进行布局插入工具栏-布局-绘制APDIV