CSS定位和布局属性PPT学习课件
合集下载
CSSDIV页面布局PPT课件
教育创造学生价值
1.2 div与span的区别
Neusoft Institute of Information
• 区别： • <div>是一个块级（block-level）元素，它包围的元素会自动换行。 • <span>是一个行内（inline ）元素，在它的前后不会换行。 • 此外，<span>标记可以包含于<div>标记中，成为它的子元素。反过
• 一个盒子模型由content（内容）、border（边框）、padding（内 边距）、margin（外边距）这4个部分组成。
height
margin-right border-right padding-right
padding-left border-left marginr-top padding-top
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
span 1
margin-right
margin-left
span 2
教育创造学生价值
• 实例：14-5.html
• 在设置4个方向的padding时也可以简写。 • 实例：14-6.html
教育创造学生价值
2.5 margin
Neusoft Institute of Information
• margin是指元素与元素之间的距离。同样在实例14-4的基础上，加 入margin-bottom的语句，实现如下效果。
• <div>（division）是一个区块容器标记，即<div>与</div>之间相 当于一个容器，可以容纳各种HTML元素。可以把<div>与</div>之 间的内容视为独立的对象，只要对<div>进行控制，其中的各标记元 素都会因此而改变。
1.2 div与span的区别
Neusoft Institute of Information
• 区别： • <div>是一个块级（block-level）元素，它包围的元素会自动换行。 • <span>是一个行内（inline ）元素，在它的前后不会换行。 • 此外，<span>标记可以包含于<div>标记中，成为它的子元素。反过
• 一个盒子模型由content（内容）、border（边框）、padding（内 边距）、margin（外边距）这4个部分组成。
height
margin-right border-right padding-right
padding-left border-left marginr-top padding-top
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
span 1
margin-right
margin-left
span 2
教育创造学生价值
• 实例：14-5.html
• 在设置4个方向的padding时也可以简写。 • 实例：14-6.html
教育创造学生价值
2.5 margin
Neusoft Institute of Information
• margin是指元素与元素之间的距离。同样在实例14-4的基础上，加 入margin-bottom的语句，实现如下效果。
• <div>（division）是一个区块容器标记，即<div>与</div>之间相 当于一个容器，可以容纳各种HTML元素。可以把<div>与</div>之 间的内容视为独立的对象，只要对<div>进行控制，其中的各标记元 素都会因此而改变。
css定位、布局、外边距、内边距、边框概述
margin
• 设置对象四边的外延边距 • 语法：margin：[ <length> | <percentage> | auto ]{1,4} • auto：水平（默认） • <length>：用长度值来定义外边距，可以为负值 • <percentage>：用百分比来定义外边距，可以为负值
• 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下
2016/12/8
overflow
• 指定如果内容溢出一个元素的框，会如何处理 • 语法：overflow：<overflow-style> • <overflow-style> = visible | hidden | scroll | auto
• visible：对溢出内容不做处理，内容可能会超出容器 • hidden：隐藏溢出容器的内容且不出现滚动条 • scroll：溢出的内容将以卷动滚动条的方式呈现 • auto：按需出现滚动条
2016/12/8
例子： .z1 {z-index: 1;background: #000;} .z2 {z-index: 2;top: 30px;left: 30px;background: #C00;} .z3 {z-index: 3;top: 60px;left: 60px;background: #999;} <div class="z1">z-index:1</div> <div class="z2">z-index:2</div>
• auto：无特殊定位， • <length>：用长度值来定义距离顶部的偏移量。可以为负值。 • <percentage>：用百分比来定义距离顶部的偏移量。百分比参照 包含块的高度。可以为负值。
第12章 有关CSS的PPT
4.4.2 显示属性 4.5 列表属性 list-style-type 属性可以用来设置项目符号和编号的样式，取 值如表 6-1 所示。
表 6-1
样式 disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none
</HEAD> <BODY> <H1 class="title">惜春</H1> <DIV class="content"> <P>黑发不知勤学早，白首方悔读书迟。</P> <P class="author">——颜真卿</P> </DIV> <DIV class="content"> <P>莫等闲白了少年头，空悲切。</P> <P class="author">——岳飞</P> </DIV> </BODY> </HTML>
4.3.1 页面元素周围的空白 以下示例可以显示出这三种空白的区别，效果如图 6-5 所示 （A 表示边界、B 表示边框、C 表示填充）。
A
Bห้องสมุดไป่ตู้
C
图 6-5 元素周围空白的区别
<HTML> <HEAD><TITLE>边界、边框和填充的区别</TITLE> <STYLE> <!-P{margin:0.25in; border:0.25in solid black; padding:0.25in; background:gray} --> </STYLE> </HEAD> <BODY> <P>生命中的成功之道是，一个人应妥善准备，以待时机的到来。 </P> <P> 不一则不专，不专则不能。</P> </BODY> </HTML>
CSS定位属性(与“定位”有关优秀PPT文档)
不论原来它在正常流中生成何种类型的框。
第7页，共10页。
（5）CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到 包含框或另一个浮动框的边框为止。由于浮动框不在文 档的普通流中，所以文档的普通流中的块框表现得就像 浮动框不存在一样。
CSS中，我们使用float属性实现元素的浮动。
第8页，共10页。
第4页，共10页。
表8-1 position属性值的含义
position 属 性值
static relative
absolute
fixed
使用说明
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分， 行内元素则会创建一个或多个行框，置于其父元素中 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的 空间仍保留 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文 档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占 的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块 级框，而不论原来它在正常流中生成何种类型的框 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视 窗本身
《网页美化与布局》课程资源
数字媒体专业群教学资源库项目组
第1页，共10页。
【知识预览】
1．CSS定位属性（Positioning）
第2页，共10页。
CSS定位(Positioning)属性允许对元素进行定位，CSS为
定位和浮动提供了一些属性，利用这些属性，可以建立多
列式布局，也可以将布局的一部分与另一部分重叠。 表8-1 position属性值的含义
第5页，共10页。
（3）CSS相对定位 如果对一个元素进行相对定位，它将出现在它所在的位 置上。然后，可以通过设置垂直或水平位置，让这个元素 “相对于”它的起点进行移动。
第7页，共10页。
（5）CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到 包含框或另一个浮动框的边框为止。由于浮动框不在文 档的普通流中，所以文档的普通流中的块框表现得就像 浮动框不存在一样。
CSS中，我们使用float属性实现元素的浮动。
第8页，共10页。
第4页，共10页。
表8-1 position属性值的含义
position 属 性值
static relative
absolute
fixed
使用说明
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分， 行内元素则会创建一个或多个行框，置于其父元素中 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的 空间仍保留 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文 档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占 的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块 级框，而不论原来它在正常流中生成何种类型的框 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视 窗本身
《网页美化与布局》课程资源
数字媒体专业群教学资源库项目组
第1页，共10页。
【知识预览】
1．CSS定位属性（Positioning）
第2页，共10页。
CSS定位(Positioning)属性允许对元素进行定位，CSS为
定位和浮动提供了一些属性，利用这些属性，可以建立多
列式布局，也可以将布局的一部分与另一部分重叠。 表8-1 position属性值的含义
第5页，共10页。
（3）CSS相对定位 如果对一个元素进行相对定位，它将出现在它所在的位 置上。然后，可以通过设置垂直或水平位置，让这个元素 “相对于”它的起点进行移动。
CSS实现页面布局实用PPT课件
落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落 文字段落文字</p> <p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段 落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落 文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p> <p id="p_pos_top">段落文字段落文字段落文字段落文字段落文字段落文字段 落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落 文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文 字段落文字</p>
设置元素上方光标的样式。 help、wait、move、pointer等。
设置元素在其父级元素中如何浮动。 left、right、none。
设置元素的哪边不允许出现浮动元素。 left、right、both、none。
第12页/共21页
分类属性示例
<style type="text/css"> body {cursor:move;} p {display:inline;} #mydiv {display:none;}
m段ar落g文in字:5段px落; 文字段落文字段落文字段落文字段落文字段落文字段落
}
文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字 段落文字</p>
#my<uul lliid{="myul">
</style>
</body>
第10页/共21页
定位属性示例
<style type="text/css">
设置元素上方光标的样式。 help、wait、move、pointer等。
设置元素在其父级元素中如何浮动。 left、right、none。
设置元素的哪边不允许出现浮动元素。 left、right、both、none。
第12页/共21页
分类属性示例
<style type="text/css"> body {cursor:move;} p {display:inline;} #mydiv {display:none;}
m段ar落g文in字:5段px落; 文字段落文字段落文字段落文字段落文字段落文字段落
}
文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字 段落文字</p>
#my<uul lliid{="myul">
</style>
</body>
第10页/共21页
定位属性示例
<style type="text/css">
CSS教学课件PPT
20
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
CSS定位和布局属性 ppt课件
<style type="text/css"> div{
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2 left:30px;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
<body> <div id="div1"><p>div1</p></div> <div id="div2">
CSS3部分
【例13-1】正常流向（13-1.html）示例
HTML5+CSS3网页设计与制作案例教程
CSS3部分
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2 left:30px;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
<body> <div id="div1"><p>div1</p></div> <div id="div2">
CSS3部分
【例13-1】正常流向（13-1.html）示例
HTML5+CSS3网页设计与制作案例教程
CSS3部分
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
CSS与页面布局PPT课件
第14页/共42页
19.6.1 浮动元素与固定元素
• 在CSS布局中，如果为元素定义了浮动属性，元素会从元素所在行中分离出来，在另一个层次中按照 浮动的参数显示，而在浮动元素之后的非浮动元素，会忽略浮动元素继续显示，但是IE浏览器和常用 的Firefox浏览器对这个属性的解释并不相同。下面通过示例，讲解浮动元素后面含有非浮动元素的显示效果。
• 1．使用文本对齐属性定义居中
第12页/共42页
19.5.2 使用CSS定义内容水平居中
• 2．使用边界属性定义居中 • 使用边界属性定义页面内容水平居中时，要将边界属性定义在需要水平居中的元素之中，具体操作如下所示。
第13页/共42页
19.6 浮动与清除
• 在使用CSS布局的页面中，一般不使用AP Div进行页面的布局。多数页面都使用浮动属性进行页面元素的布 局。但是不同的浏览器，对浮动的解释并不相同。有时候为了要显示某种效果，还要使用清除浮动属性，使 元素某个方向不能含有浮动元素。
• 1．使用style属性定义CSS样式
第7页/共42页
19.3 CSS样式的优先级
• 2．CSS样式的优先级
第8页/共42页
19.4 页面属性与CSS样式
• 在文档中，页面属性的部分参数，会使用CSS样式进行定义，其中包括外观、标题、链接等选项。页面属性 的样式会定义在文档的头部，如图
第9页/共42页
第22页/共42页
19.7.3 嵌套元素之间的距离
• 嵌套元素，当同时定义父元素的“填充”属性，同时定义了子元素的“边界”属性时，两个元素 边框间的距离和两个元素是否定义了大小有关，下面分别进行介绍。
• 1．元素未定义大小 在父元素和子元素中定义“边框”样式，如图所示。
19.6.1 浮动元素与固定元素
• 在CSS布局中，如果为元素定义了浮动属性，元素会从元素所在行中分离出来，在另一个层次中按照 浮动的参数显示，而在浮动元素之后的非浮动元素，会忽略浮动元素继续显示，但是IE浏览器和常用 的Firefox浏览器对这个属性的解释并不相同。下面通过示例，讲解浮动元素后面含有非浮动元素的显示效果。
• 1．使用文本对齐属性定义居中
第12页/共42页
19.5.2 使用CSS定义内容水平居中
• 2．使用边界属性定义居中 • 使用边界属性定义页面内容水平居中时，要将边界属性定义在需要水平居中的元素之中，具体操作如下所示。
第13页/共42页
19.6 浮动与清除
• 在使用CSS布局的页面中，一般不使用AP Div进行页面的布局。多数页面都使用浮动属性进行页面元素的布 局。但是不同的浏览器，对浮动的解释并不相同。有时候为了要显示某种效果，还要使用清除浮动属性，使 元素某个方向不能含有浮动元素。
• 1．使用style属性定义CSS样式
第7页/共42页
19.3 CSS样式的优先级
• 2．CSS样式的优先级
第8页/共42页
19.4 页面属性与CSS样式
• 在文档中，页面属性的部分参数，会使用CSS样式进行定义，其中包括外观、标题、链接等选项。页面属性 的样式会定义在文档的头部，如图
第9页/共42页
第22页/共42页
19.7.3 嵌套元素之间的距离
• 嵌套元素，当同时定义父元素的“填充”属性，同时定义了子元素的“边界”属性时，两个元素 边框间的距离和两个元素是否定义了大小有关，下面分别进行介绍。
• 1．元素未定义大小 在父元素和子元素中定义“边框”样式，如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3网页设计与制作案例教程
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
} #div3{
} b{ } .b2{
} </styl91; color:#000;
position:static; /*静态定位*/ background:#70c17f; color:#FFF;
border:1px solid red;
position:relative; /*相对定位*/ left:80px; top:60px;
第13章
CSS定位和布局属性
HTML5+CSS3网页设计与制作案例教程
13.1 CSS定位属性 13.2 CSS布局属性 13.3综合案例——幼儿园页面设计
HTML5+CSS3网页设计与制作案例教程
CSS盒子布局和定位
本章学习目标： （1）理解网页中BOX的正常流向。 （2）会使用top、bottom、right和left属性配合position属性定义偏移量。 （3）掌握CSS元素的定位方法，重点掌握static、relative和absolute定位，理 解fixed 和 sticky定位。 （4）盒子发生堆叠时，会使用z-index控制堆叠次序。 （5）理解盒子内容的裁切。 （6）能控制盒子的可见性和溢出方式。 （7）能够使用display改变常见元素的显示方式。 （8）能够使用float和clear控制浮动定位。
top: auto | 长度 | 百分比; bottom: auto | 长度 | 百分比; right: auto | 长度 | 百分比; left: auto | 长度 | 百分比;
语法说明：
• auto：无特殊定位，根据HTML定位规则在文档流中分配。 • 长度：用长度值来定义偏移量，可以为负值。 • 百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。
<style type="text/css"> div{
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2{ position:relative; /*相对定位*/ top:60px; left:30px;
【例13-1】正常流向（13-1.html）示例 HTML5+CSS3网页设计与制作案例教程
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
position : static | relative | absolute | fixed | center | page | sticky;
HTML5+CSS3网页设计与制作案例教程
1. 相对定位relative
静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移 属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。
相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一 个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。
HTML5+CSS3网页设计与制作案例教程
【例13-2】使用相对定位（13-2.html） HTML5+CSS3网页设计与制作案例教程
部分代码如下：
相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通 常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设 置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占 的空间仍保留，元素移动后可能会覆盖其它元素。
HTML5+CSS3网页设计与制作案例教程
<body> <div id="div1"><p>div1</p></div> <div id="div2">
<p>div2</p> <b>b元素1</b> <b class="b2">b元素2</b> <b>b元素3</b> </div> <div id="div3"><p>div3</p></div> </body>
background:#ba9578; color:#FFF;
background:#cef091; color:#000;
background:#70c17f; color:#FFF;
HTML5+CSS3网页设计与制作案例教程
13.1.2 定位偏移属性top、bottom、right、left
基本语法：
换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的 方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里 可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。
在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行 内元素盒子则会按照由左至右的顺序排列。
HTML5+CSS3网页设计与制作案例教程
HTML5+CSS3网页设计与制作案例教程
13.1.3 定位方式position
定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元 素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类 型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。 基本语法：
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
} #div3{
} b{ } .b2{
} </styl91; color:#000;
position:static; /*静态定位*/ background:#70c17f; color:#FFF;
border:1px solid red;
position:relative; /*相对定位*/ left:80px; top:60px;
第13章
CSS定位和布局属性
HTML5+CSS3网页设计与制作案例教程
13.1 CSS定位属性 13.2 CSS布局属性 13.3综合案例——幼儿园页面设计
HTML5+CSS3网页设计与制作案例教程
CSS盒子布局和定位
本章学习目标： （1）理解网页中BOX的正常流向。 （2）会使用top、bottom、right和left属性配合position属性定义偏移量。 （3）掌握CSS元素的定位方法，重点掌握static、relative和absolute定位，理 解fixed 和 sticky定位。 （4）盒子发生堆叠时，会使用z-index控制堆叠次序。 （5）理解盒子内容的裁切。 （6）能控制盒子的可见性和溢出方式。 （7）能够使用display改变常见元素的显示方式。 （8）能够使用float和clear控制浮动定位。
top: auto | 长度 | 百分比; bottom: auto | 长度 | 百分比; right: auto | 长度 | 百分比; left: auto | 长度 | 百分比;
语法说明：
• auto：无特殊定位，根据HTML定位规则在文档流中分配。 • 长度：用长度值来定义偏移量，可以为负值。 • 百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。
<style type="text/css"> div{
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2{ position:relative; /*相对定位*/ top:60px; left:30px;
【例13-1】正常流向（13-1.html）示例 HTML5+CSS3网页设计与制作案例教程
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
position : static | relative | absolute | fixed | center | page | sticky;
HTML5+CSS3网页设计与制作案例教程
1. 相对定位relative
静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移 属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。
相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一 个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。
HTML5+CSS3网页设计与制作案例教程
【例13-2】使用相对定位（13-2.html） HTML5+CSS3网页设计与制作案例教程
部分代码如下：
相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通 常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设 置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占 的空间仍保留，元素移动后可能会覆盖其它元素。
HTML5+CSS3网页设计与制作案例教程
<body> <div id="div1"><p>div1</p></div> <div id="div2">
<p>div2</p> <b>b元素1</b> <b class="b2">b元素2</b> <b>b元素3</b> </div> <div id="div3"><p>div3</p></div> </body>
background:#ba9578; color:#FFF;
background:#cef091; color:#000;
background:#70c17f; color:#FFF;
HTML5+CSS3网页设计与制作案例教程
13.1.2 定位偏移属性top、bottom、right、left
基本语法：
换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的 方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里 可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。
在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行 内元素盒子则会按照由左至右的顺序排列。
HTML5+CSS3网页设计与制作案例教程
HTML5+CSS3网页设计与制作案例教程
13.1.3 定位方式position
定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元 素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类 型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。 基本语法：