原创力文档- 1、本文档共27页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第四讲：
DIV+CSS布局
CSS盒子模型
“盒子模型”的概念
设置边框
设置内边距
设置外边距
2
3
网页上的各个元素(图片、段落、单 元格。。。)均是以“盒子”的形式存在 的。在浏览器看来网页就是许多盒子排列 在一起或相互嵌套。
4
盒子模型是CSS控制页面时一个很重要
的概念。
只有很好地掌握了盒子模型以及其中每
个元素的用法，才能真正地控制好页面中的 各个元素。
本节主要介绍盒子模型的基本概念，并 讲解CSS定位的基本方法。
5
画框示意图
6
padding-top、
content
padding-bottom
border-bottom
margin-bottom
-width—
图2 盒子模型
margin-top
border-top
depping rig
padding-lefi
border-right
largin-rlght
margin-lett
border-]left
7
参考教材，掌握组合属性的写法：
方法是按照规定的顺序，给出2个、3个
或者4个属性值，它们的含义将有所区别，具 体如下。
8
(1)如果给出2个属性值，那么前者表示上下
padding 的属性，后者表示左右padding 的属性。
比如：padding:10px 20px;
(2)如果给出3个属性值，那么前者表
示上padding的属性，中间的数值表示左右平 padding的属性，后者表示下padding的属性。
(3)如果给出4个属性值，那么依次表
示上、右、下、左padding 的属性，即顺时 针排序。 9
要把border-width 、border-border-
color 和border-style 这3个属 性合在一起，
还可以用border 属性来简写。
1.3 在一行中同时设置边框的宽度、颜色和样式
10
例如：
border:2px green dashed
这行样式表示将4条边框都设置为2像素
的绿色虚线，这样就比分为3条样式来写方便 多了。
11
调整网页中的对齐方式，目标：
1、 理解盒子的各个属性
2、 理解空格的影响
3、理 解body标记的margin 属性
4、如何利用css控制页面特定的元素 (注意id和class属性的区别)
5、 在dreamweaver 中如何创建css
案例a
12
2.1 HTML与DOM(文档对象模型)
1.HTML
HTML标记是嵌套的层次式结构，每
个标记表示的元素可以视为“盒子”, 即盒子是嵌套关系。
2.DOM 树
用树形结构表示各个元素(对象)的 关系。
2 盒子之间的关系
13
DOM树与页面布局的对应关系
14
ul
li
ul
li
<body>
<ul>
<li>
<ul>
<li>
<li>
body
<li>
新的概念——“标准文档流”(Normal
Document Stream),或简称“标准流”。
所谓标准流，就是指在不使用其他与排
列和定位相关的特殊CSS规则时，各种元素 的排列规则。
2.2 标准文档流
15
如果要了解浏览器对元素的处理规则， 必须了解两类元素(标记):
1. 块级元素 2 . 行内元素
不管是哪种元素，同样可以视为一个盒子，不同
的是块级元素浏览器显示时在该元素的前后会自 动换行，因此多个块级元素不会排在一行。
而行内元素则默认显示在一行内，只有在最右端 才自动换行。
16
XHTML常见的块级元素有哪些呢?
◎ div -通用块级元素
◎ form - 交互表单
◎ h1- 大标题
◎ h2 - 副标题
◎ h3 -3级标题
◎ h4-4级标题
◎ h5-5级标题
◎ h6 -6级标题
◎ hr - 水平分隔线 ◎o1 - 排序表单
◎ p- 段落
◎table - 表格
◎ul - 非排序列表
XHTML常见的行内元素有哪些呢?
◎ a - 锚点
◎ b-粗体(不推荐)
◎ br - 换行
◎ font- 字体设定(不推荐)
◎ i-斜体
◎ img - 图片
◎ input - 输入框
◎ select- 项目选择
◎ span - 通用行级元素
◎ strong - 粗体强调
◎ textarea - 多行文本输入框
◎ var - 定义变量
17
举例演示行级元素和块级元
素的区别
1、 举例常见的标记
2、 分析案例C
18
( 1 ) 第1步。从 body 标记开始，body 元素就是一个最大的块级元素，应该包含所有的子元 素，依次把其中的子元素放到适当的位置。例如上面这段代码中， body 包含了两个ul, 就把这两 个块级
文档评论（0）