盒子模型
边框与背景()
#outerBox{ width:128px; height:128px; border:10px black dashed; background:silver; } <div id=“outerBox”></div>
盒子模型
设置内边距
#box{ width:128px; height:128px; padding:0 20px 10px; /*上 padding-left:10px; border:10px gray dashed; }
盒子的浮动与定位
属性position （3）absolute：绝对定位，盒子的位置以它的包 含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。 （4）fixed：称为固定定位，它和绝对定位类似， 只是以浏览器窗口为基准进行定位，也就是当 拖动浏览器窗口的滚动条时，依然保持对象位 置不变。
其中子块的margin将以父块的内容为参考， 如下图所示。
父div 父div的padding 子div的margin 子div 子div的padding 子div的内容
父子块的margin
图 父子块的margin
图 IE与Firefox对待父height的不同处理
盒子的浮动与定位
盒子的浮动:float(test05-10.html) 设置第1个浮动
对p标记设置外边距：5px
分析p实际的占据空间宽度和高度:
“盒子”与“模型”的概念探究
分析p实际的占据空间宽度和高度: 宽度：5px+1px+5px+内容宽度+5px+1px+5px 高度：5px+1px+5px+内容高度+5px+1px+5px 宽度(或高度)： Margin-top 内容+内边距+ Border-top Padding-top 边框+外边距
标准文档流
行内元素（inline） 对于文字这类元素，各个字母之间横向排列， 到最右端自动折行，这就是另一种元素，称为 “行内元素”（inline）。 思考：哪些标记是行内元素？
标准文档流
标准流：不使用其他排列和定位，按照css默认 规定的块级元素和行内元素的排列方式。 判断各种元素具体的排列位置： 从body标记开始，逐个查看其包含的子元素， 依次把其中的子元素按块级元素或行内元素的 方式放到适当的位置，分配区域及设置格式等， 直到所有的元素都检查一遍
清除浮动对左侧影响后的效果：对p设置clear属性
清除浮动对右侧影响后的效果：对p设置clear属性
扩展盒子的高度
包含浮动div的容器将不会适应高度：div的范围是由它里面的标 准流内容决定的，与里面的浮动内容无关
希望实现效果的方法：在3个div后面增加一个div，清除浮动的影响
盒子的浮动与定位
盒子之间的关系 (test05-05.htm)
body <li> <li> ult; li li li li <li> <body> <ul>
标准文档流
块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列， 不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且 和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level）， 即它们总是以一个块的形式表现出来，并且跟同级的 兄弟块依次竖直排列，左右撑满。 思考：哪些标记是块级元素？
盒子在标准流中的定位原则
盒子在标准流中的定位原则 行内元素之间的水平margin(test05-07) 块级元素之间的竖直margin(test05-08) 嵌套盒子之间的margin(test05-09)
行内元素之间的水平margin
下图所示为两个块并排的情况。
span1
Margin-right
content
“盒子”与“模型”的概念探究
盒子模型
盒子的宽(高)度：内容+内边距+边框+外边距 边框：border 内边距：padding 外边距：margin
Margin-top
设置部分内容， 从上方开始按 顺时针方向对应
Border-top Padding-top content
盒子之间的关系
设置绝对定位前的效果
将中间的div设置为绝对定位后的效果
设置偏移量后的效果
将父块设置为“包含块”后的效果
盒子的浮动与定位
z-index空间位置 盒子的display属性
用CSS设置表格样式
控制表格 表格中的标记 设置表格的边框、合并 美化表格 html结构 整体设置 单元格样式 斑马纹效果
盒子的定位 在CSS中有一个非常重要的属性position （1）static：这是默认的属性值，也就是该盒子 按照标准流（包括浮动方式）进行布局。 （2）relative：称为相对定位，使用相对定位的 盒子的位置常以标准流的排版方式为基础，然 后使盒子相对于它在原本的标准位置偏移指定 的距离。 相对定位的盒子仍在标准流中，它后面的盒 子仍以标准流方式对待它。
盒子模型
#outerBox{ width:200px; /*宽度和高度*/ height:100px; border:2px black solid; /*4个边框*/ border-left:4px green dashed; /* 左边框*/ border-color:red gray orange blue; /*上 右 下 左 */ border-right-color:purple; }
#box img{ border:1px blue solid; }
左右
下*/
盒子模型
设置外边距 body{ border:1px black solid; background:#cc0; }
.son1{ /* 这里设置son1的浮动方式*/ } 将.son1盒子设置为向左浮动，代码为： .son1{ /* 这里设置son1的浮动方式*/ float:left; }
注：Box-2的左边框与 Box-1的左边框重合， Box-1脱离标准流， Box-2顶到原来Box-1 的位置
设置第1个div浮动时的效果：标准流中的Box-2的文字在围绕着 Box-1排列，Box-1的宽度不再伸展，是容纳下内容的最小宽度
这个现象称为margin的“塌陷”（或称为“合并”） 现象，意思是说较小的margin塌陷（合并）到了较 大的margin中。
图 块元素之间的margin
嵌套盒子之间的margin
除了上面提到的行内元素间隔和块级元素间 隔这两种关系外，还有一种位置关系，它的 margin值对CSS排版也有重要的作用，这就 是父子关系。 当一个<div>块包含在另一个<div>块中时， 便形成了典型的父子关系。 margin的值也可以设置为负数
绝对定位
1．创建基础页面(test05-12.html) 2．使用绝对定位 #block2{ position:absolute; top:0px; right:0px; } 将父div增加一个定位样式： #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; position:relative; }
相对定位
一个div设置为相对定定位后的效果
以右侧和下侧为基准设置相对定定位
2．两个子块的情况
设置为相对定位前的效果
#block1{ position:relative; bottom:30px; right:30px; }
两个兄弟div的情况下， 其中一个设置为相对定位后的效果
绝对定位
各种position属性都需要通过配合偏移一定的 距离来实现定位，而其中核心的问题就是以 什么作为偏移的基准。 使用绝对定位的盒子以它的“最近”的一个 “已经定位”的祖先元素为基准进行偏移， 若没有已经定位的祖先元素，则以浏览器窗 口为基准进行定位
Margin-left
span2
行内元素之间的margin
块级元素之间的竖直margin
如果不是行内元素，而是竖直排列的块级元素， margin的取值情况就会有所不同。
两个块级元素之间的距离不是margin-bottom与 margin-top的总和，而是两者中的较大者，如下图 所示。
块级元素之间的竖直margin
改变浮动方向后的效果
div被挤到下一行时的效果
盒子的浮动与定位
再次改变浮动的方向：box-2为右浮动，box-3为左浮动
交换div位置时的效果
div被挤到下一行的效果
全部向左浮动
设置3个div浮动时的效果
div挤倒下一行被卡住时的效果
使用clear属性清除浮动的影响
设置浮动后文字环绕的效果
所有的元素都相当于一个盒子，占据一定的 页面空间(test05.html) 一个页面由各个盒子组成
“盒子”与“模型”的概念探究
在p标记外加div标记(test05-01.html) 观察以下css设置的页面效果
对p标记设置边框：1px的实线
设置div标记边框：1px的实线 对p标记设置内边距：5px
<div>与<span>标记
<div>与<span>标记的区别(test05-06.html)： <div>标记：是一个通用的块级元素，一般用于放 置各种元素方便排版，其他的块级元素一般具 有一定的逻辑语义 <span>标记：是一个行内元素，当其他行内元素 不合适时使用该标记，作用与<div>标记一样
