盒子模型与位.ppt

4. 盒子的浮动与定位 盒子的定位 Relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 盒子的浮动与定位 盒子的定位 Absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。 4. 盒子的浮动与定位 盒子的定位 Fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。 4. 盒子的浮动与定位 盒子的display属性 body divBox-1/div divBox-2/div divBox-3/div spanBox-4/span spanBox-5/span spanBox-6/span divBox-7/div spanBox-7/span /body 盒子的浮动与定位 盒子的display属性 body div style=display:inlineBox-1/div div style=display:inlineBox-2/div div style=display:inlineBox-3/div span style=display:blockBox-4/span span style=display:blockBox-5/span span style=display:blockBox-6/span div style=display:noneBox-7/div span style=display:noneBox-8/span /body 商业网页设计与制作 第四讲 深入理解盒子模型 深入理解盒子模型 什么是“模型”——本质特征的抽象 布局的“模型” 深入理解盒子模型 什么是“模型”——本质特征的抽象 布局的“模型” 深入理解盒子模型 div{ border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; } 深入理解盒子模型 属性值的简写形式? 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： ? 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； ? 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； ? 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 深入理解盒子模型 属性值的简写形式? border-color: red green border-width:1px 2px 3px; border-style: dotted dashed solid double; 深入理解盒子模型 内边距（padding） #outerBox{ width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; } 深入理解盒子模型 外边距（margin） #outerBox{ width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; } body{ border:1px black solid; background:#cc0; } 深入理解盒子模型 HTML与DOM 深入理解盒子模型 标准文档流 深入理解盒子模型 块元素 块元素(block element)一般是其他元素的容器元素， div即是常见块元素，其他如段落标签“p”、标题“h”。 行内元素 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他行内元素，常见内联元素 span 、 a、图片元素 img 。 元素 说明 div 层 ol 排序表单 ul 非排序列表 p 段落 center 居中对齐块 h h1 - 大标题、h2 - 副标题、h3 - 3级标题… hr 水平分隔线 常见的块元素 深入理解盒