html盒子代码div6,项目六-div+css布局网页.pptx

项目六 DIV+CSS布局网页; 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大，因为盒子可以有边框，盒子内外都可以有边距，可以通过调整盒子的边框和边距等参数，来调节盒子的位置。一个盒子模型由content(内容)、border(边框)、padding(填充也叫内边距)和margin(外边距)这4个部分组成。如图所示。;Padding与margin都有上、右、下、左四个值。当这些属性被赋值后，会影响盒子的宽度与高度。1、盒模型的宽度盒模型的宽度 = margin-left(左外边距)+border-left(左边框)+padding-left(左内边距)+width(内容宽度)+padding-right(右内边距)+border-right(右边框)+margin-right(右外边距)2、盒模型的高度盒模型的高度 = margin-top(上外边距)+border-top(上边框)+padding-top(上内边距)+height(内容高度)+padding-bottom(下内边距)+border-bottom(下边框)+margin-bottom(下外边距)【实例】 盒模型宽高计算 ;DIV的宽度 = 30px+20px+20px+100px+20px+20px+30px=240pxDIV的高度 = 30px+20px+20px+100px+20px+20px+30px=240px;6.1.2 元素类型;

块元素

块元素在显示时会独占一行，常见的块元素有p、ul、li...

行内元素

行内元素在一行内显示，常见的行内元素有strong、a、span...

在浏览器中预览效果如图所示。

3、块元素与行内元素转换块元素与行内元素可以通过“区块”分类中display属性的block(块)与inline(行内)进行互相转换。

;

(division)是一个区块容器标记，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。

与

之间可以放置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器而已。 DIV块作为一个独立的对象，在CSS样式控制下有着灵活的表现形式，形成另外一种组织布局形式DIV+CSS。;3)在ID处输入“top”，点击“确定”按钮，在Dreamweaver设计窗口出现如图所示DIV块。表明插入了一个id名为top的DIV标签。

;方框分类属性点击“方框”分类，如图所示。

1)width：设置DIV的宽度。2)height：设置DIV的高度。在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。3)padding：设置DIV的内边距，也就是内容到边框的距离。4)margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距离。设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。;5)float：浮动，定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围。HTML中元素在浏览器中显示是按照流方式显示，行内元素从左到右，块元素从上到下。 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将脱离文档流的显示方式，不再独自占据一行，可以向左或向右移动，直到它的外边缘碰到包含它的边框或另一个浮动块的边框为止，后面的元素会围绕它显示。float属性有四个可用的值：left 和right 分别浮动元素到各自的方向，none (默认) 使元素不浮动，inherit 将会从父级元素获取float值。;【实例】float属性