CSS布局与定位PPT课件
合集下载
第3章 CSS网页布局与定位
BeanSoft | 4
clear
语法： clear : none | left | right | both 取值： none : left : right : both : 默认值。允许两边都可以有浮动对象 默认值 不允许左边有浮动对象 不允许右边有浮动对象 不允许有浮动对象
BeanSoft | 5
第3章 CSS网页布局与定位
认识div 一列固定宽度 一列宽度自适应 二列固定宽度 二列宽度自适应 两列右列宽度自适应 二列固定宽度居中 三列浮动中间列宽度自适应 高度自适应 盒模型详解 深入浮动 绝对定位与相对定位
复习回顾
Div高度与图片高度一致，margin之后，图片下移 命名：以字母开头，后跟字母或数字，尽量不要与标签名一 样和属性名一样。 如果设置比图片高，则上下高度不一致。 注意margin和pading的使用，图片使用pading有时不管用， 尽量使用margin。 项目符号的使用
BeanSoft | 7
display
语法： display : block | none | inline 取值： block : CSS1 块对象的默认值。将对象强制作为块对象呈 递，为对象之后添加新行 none : CSS1 隐藏对象。与 visibility 属性的hidden值 不同，其不为被隐藏的对象保留其物理空间 inline : CSS1 内联对象的默认值。将对象强制作为内联 对象呈递，从对象中删除行
BeanSoft | 9
position
语法： 语法： position : static | absolute | relative 取值： 取值： 默认值。无特殊定位，对象遵循HTML HTML定位规则 static : 默认值。无特殊定位，对象遵循HTML定位规则 将对象从文档流中拖出， absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最 有定位设置的父对象进行绝对定位。 有定位设置的父对象进行绝对定位。如果不存在这样的父对 象，则依据 body 对象。而其层叠通过 z-index 属性定义 对象。 对象不可层叠， relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 注意：top、left、right、bottom的取值可以是正数、负数、百分数、或 零
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>：用百分比来定义距离顶部的偏移量。百分比参照 包含块的高度。可以为负值。
CSS与DIV构建网站(4)布局与定位
table : 将对象作为块元素级的表格显示
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
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课件
<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．元素未定义大小 在父元素和子元素中定义“边框”样式，如图所示。
CSS+Div布局 ppt课件
2021/3/26 CSS+Div布局 ppt课件
34
8.4 “左中右”布局
8.4.1 课堂案例-连锁餐厅 8.4.2 使用CSS样式布局
2021/3/26 CSS+Div布局 ppt课件
35
8.4.1课堂案例-连锁餐厅
案例学习目标：学习“左中右”布局的方法。
2021/3/26 CSS+Div布局 ppt课件
17
8.2.3 浮动方式
无浮动
2021/3/26 CSS+Div布局 ppt课件
18
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
2021/3/26 CSS+Div布局 ppt课件
27
8.3.1课堂案例-网页设计大赛
案例学习目标：学习“上中下”布局的方法。
案例知识要点：在【插入】面板【HTML】选 项卡中，使用【Div】按钮 创建网页布局结构； 在【CSS设计器】面板中，使用【添加选择器】 按钮 创建<div>标签的ID样式，并采用缺省的 【position】和【float】属性，完成“上中下” 的布局。
16822position定位属性absolute绝对定位方式网页元素丌再遵循html的标准定位规则脱离了前后相继的定位关系以该元素的上级元素为基准设置偏移量迚行定位
第8章 CSS+Div布局
Dreamweaver CC 标准教程
2021/3/26 CSS+Div布局 ppt课件
1
本章学习的主要内容：
CSS布局与定位PPT课件
第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注意：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
第3章 CSS布局中有一个非常重要的属性 position，这个单词要翻译为中文，也是定位的意思， 然而要使用CSS进行定位操作的手段，并不仅仅通过 择个属性来实现，因此不要把把二者混淆。
第3章 CSS布局与定位
static：这是默认的属性值，也就是该盒子按照标 准流（包括浮动方式）进行布局。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
CSS定位和布局属性PPT学习课件
HTML5+CSS3网页设计与制作案例教程
4. 吸附定位sticky
sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正 常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实 中我们见到的吸附效果。
sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外 边时，则会表现出fixed的吸附效果。
HTML5+CSS3网页设计与制作案例教程
2. 绝对定位absolute
绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中 所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位 的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子 偏移位置不影响常规文档流中的任何元素。
} #div3{
} b{ } .b2{
} </style>
left:30px; background:#cef091; color:#000;
position:static; /*静态定位*/ background:#70c17f; color:#FFF;
border:1px solid red;
position:absolut;
HTML5+CSS3网页设计与制作案例教程
【例13-4】使用固定定位（13-4.html） HTML5+CSS3网页设计与制作案例教程
部分代码如下：
<style type="text/css"> body{
height:700px; } header{
position:fixed; width:100%; height:100px; top:0px; right:0px; bottom:auto; left:0px; border:1px dashed black; color:#FFF; background-color:#5f6062; text-align:center; line-height:3; }
css课件
多列布局
多列布局允许您创建多列的页 面布局。
您可以使用CSS的多列属性（ column-count、columnwidth、column-gap等）来定 义列数、列宽和列间距。
多列布局常用于创建杂志、报 纸等类型的页面布局。
04
CHAPTER
CSS动画与过渡效果
动画效果
01
02
03
关键帧动画
通过定义关键帧，可以创 建复杂的动画效果。
背景大小
使用`background-size`属性设置背景 图片的大小，可以指定具体的像素值 或使用相对单位。
背景图片
使用`background-image`属性设置 背景图片，可以指定图片路径或使用 URL。
背景位置
使用`background-position`属性设 置背景图片的位置，可以指定像素值 或使用位置关键词（如`top`、 `bottom`、`left`、`right`等）。
文字效果
通过text-align、text-transform、text-decoration等属性，控 制文本的对齐方式、大小写和装饰效果。
响应式网页设计
媒体查询
通过媒体查询（media query） 技术，根据不同设备的屏幕尺寸 和分辨率，应用不同的CSS样式
。
弹性布局
使用flexbox或grid布局，实现元 素的灵活排列和分布。
流式布局
使用百分比宽度等流式布局技术， 实现元素的自适应布局。
06
CHAPTER
CSS常见问题与解决方案
CSS兼容性问题
不同浏览器对CSS属性的 支持程度不同，导致页面 显示效果不一致。
使用CSS3特性时，添加浏 览器前缀，如 `-webkit-` 、`-moz-`、`-ms-` 等。
第14章 元素的定位与布局[61页]
![第14章 元素的定位与布局[61页]](https://img.taocdn.com/s3/m/1a29c5b581c758f5f71f6759.png)
14
.d2{position:absolute;top:80px;left:420px}
章
img{position:absolute;top:80px;left:120px}
-->
</style>
</head>
<body> <h2>诗两首</h2>
<hr>
<img src="t1.jpg">
<div class="d1"> 白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。
<head> <title>应用定位方式</title>
<style type=text/css>
<!-h2{font-family:黑体;color:blue;font-size:24pt;
position:absolute;top:10px;left:200px}
第
.d1{position:absolute;top:80px;left:20px}
• 基本语法
position:static|absolute|relative
• 语法说明
➢ static表示为静态定位，是默认设置。
第 14
➢ absolute表示绝对定位，与14.1.2的位置属性 章
top、bottom、right、left等结合使用可实现对
元素的绝对定位。
➢ relative表示相对定位，对象不可层叠，但也要 依据top、bottom、right、left等属性来设置元 素的具体偏移位置。
《CSS网页布局》课件
详细描述
在固定布局中，网页的宽度和高度被设置为固定的像素值，浏览器窗口的大小变化不会影响网页的布 局。这种布局方式适用于设计一些需要保持固定尺寸和比例的网页，例如宣传网站、个人网站等。
流式布局
总结词
流式布局是指网页的宽度根据浏览器窗口的大小自动调整，高度则保持固定或自动调整 。
详细描述
流式布局中，网页的宽度会随着浏览器窗口的大小变化而变化，而高度则保持固定或自 动调整。这种布局方式适用于设计一些需要随着浏览器窗口大小变化的网页，例如博客
内容与边框之间的空间。
外边距
盒子与其他元素之间的空间。
05
04
边框
围绕内容和内边距的线。
定位
静态定位
默认定位方式，不可通过top、right、bottom、left属 性进行改变。
相对定位
元素相对于其正常位置进行定位，top、right、bottom 、left属性会使元素相对于其原始位置“偏移”。
CSS3变形与动画
CSS3 Transform
Transform属性可以对元素进行 旋转、缩放、倾斜和平移等操作 ，使元素在网页上呈现更加动态 和有趣的效果。
CSS3 Animation
Animation属性可以实现元素的 动画效果，包括关键帧动画、过 渡动画和渐变动画等，使网页更 加生动和吸引人。
Flexbox布局是一种灵活的布局方 式，可以轻松实现元素的对齐、 排序和分布，适用于各种屏幕尺 寸和设备。
CSS3 Grid
Grid布局是一种二维的布局系统 ，可以创建复杂的网页布局，包 括行和列，适用于构建复杂的网 页布局。
CSS3 响应式布局
响应式布局可以根据不同的屏幕 尺寸和设备类型自动调整网页布 局，使网页在不同设备上都能得 到良好的显示效果。
在固定布局中，网页的宽度和高度被设置为固定的像素值，浏览器窗口的大小变化不会影响网页的布 局。这种布局方式适用于设计一些需要保持固定尺寸和比例的网页，例如宣传网站、个人网站等。
流式布局
总结词
流式布局是指网页的宽度根据浏览器窗口的大小自动调整，高度则保持固定或自动调整 。
详细描述
流式布局中，网页的宽度会随着浏览器窗口的大小变化而变化，而高度则保持固定或自 动调整。这种布局方式适用于设计一些需要随着浏览器窗口大小变化的网页，例如博客
内容与边框之间的空间。
外边距
盒子与其他元素之间的空间。
05
04
边框
围绕内容和内边距的线。
定位
静态定位
默认定位方式，不可通过top、right、bottom、left属 性进行改变。
相对定位
元素相对于其正常位置进行定位，top、right、bottom 、left属性会使元素相对于其原始位置“偏移”。
CSS3变形与动画
CSS3 Transform
Transform属性可以对元素进行 旋转、缩放、倾斜和平移等操作 ，使元素在网页上呈现更加动态 和有趣的效果。
CSS3 Animation
Animation属性可以实现元素的 动画效果，包括关键帧动画、过 渡动画和渐变动画等，使网页更 加生动和吸引人。
Flexbox布局是一种灵活的布局方 式，可以轻松实现元素的对齐、 排序和分布，适用于各种屏幕尺 寸和设备。
CSS3 Grid
Grid布局是一种二维的布局系统 ，可以创建复杂的网页布局，包 括行和列，适用于构建复杂的网 页布局。
CSS3 响应式布局
响应式布局可以根据不同的屏幕 尺寸和设备类型自动调整网页布 局，使网页在不同设备上都能得 到良好的显示效果。
3-2.CSS的背景设置与定位.pptx
背景图像的位置由background-position-x和 background-position-y两个属性综合确定。 background-position-x定位背景图像的横坐标位置， 默认值为0%，其取值包括left、center、right和数 值。background-position-y定位背景图像的纵坐标 位置，默认值为0%，其取值包括top、center、 bottom和数值。当背景图像的位置坐标定义为数值时， 单位ge，则width和height是针 对于背景区域，不是背景图像大小。以父元素的百分 比来设置背景图像的宽度和高度，同样第1个值设置 宽度，第2个值设置高度。如果只设置1个值，则第2 个值会被设置为"auto"。
如果属性值为cover，则把背景图像扩展至足够大， 以使背景图像完全覆盖背景区域。背景图像的某些部 分也许无法显示在背景定位区域中。
《网页美化与布局》课程资源
数字媒体专业群教学资源库项目组
【知识预览】
2．CSS的背景设置与定位
（1）背景色的设置 CSS允许应用纯色作为背景，可以使用 background-color属性为元素设置背景色，这个属性 接受任何合法的颜色值。background-color属性用于 设置元素的背景颜色，其取值为指定的颜色或 transparent，默认值为transparent，即为透明色。 可以为网页中的任何元素设置背景颜色，也可以 为HTML的标签设置背景颜色。
⑤ background-origin background-origin属性用于规定背景图片的定位 区域，背景图片可以放置于content-box、paddingbox或border-box区域，示意图如图3-2所示。
图3-2 背景图片放置位置的示意图
divcss课件-第3章CSS网页布局与定位
浮动：
• Float:left/right
小技巧：要使多个块元素能排在同一行，则都要浮动
实例：导航条
定位
贵州新华电脑学院—电子商务专业
补充CSS常用属性 （课时视情况与其它章节调整）
CSS教程——字体属性
CSS教程——颜色与背景属性
CSS教程——文本属性
Em:12pixels 的 'M' 常用于印刷的单位
CSS教程——装饰超链接 伪类选择符
对链接的修饰
A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 a:focus 链接获得焦点时的状态 a :link{} a :visited{} a :active{} a :hover{} a :focus{}
Div+Css
第三章 CSS网页布局与定位
本章目标
本章重难点
重点 盒子模型
Байду номын сангаас
浮动问题
关于定位
关于DIV 特性。 作用。 并列与嵌套
盒子模型
Margin与padding的区别
关于margin与padding
• 区别？ • 何时用margin何时用padding • 简写 • Margin:10px;四边同 • Margin:10px 20px 30px 40px;(上右下左 ) • Margin:10px 20px;（上下、左右ng） • 盒子居中(左右间距设置为auto) • Padding
CSS教程——边距属性
CSS教程——填充属性
CSS教程——边框属性
CSS教程——盒模型
CSS教程——图文混排
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相对定位 如果对一个元素进行相对定位，它将出现在它所在的位 置上。然后，可以通过设置垂直或水平位置，让这个元素 “相对于”它的起点进行移动。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
布局的“模型”
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom
width
第3章 CSS布局与定位
3.2 盒模型尺寸的计算
div{ width:400px; height:70px; padding:50px 30px; margin:60px 40px; border:10px solid #4eb815; }
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注意：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
3.6 元素的垂直间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验2——块级元素之间的竖直margin 当两个不同外边距的元素进行垂直间距计算时，通 常以较大的外边距为准。 （例：5-8.html）
/*上
左右
下*/
第3章 CSS布局与定位
属性值的简写形式
简写方法是按照规定的顺序，给出2个、3个或者4个属性 值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属 性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性， 中间的数值表示左右边框的属性，后者表示下边 框的属性； 如果给出4个属性值，依次表示上、右、下、 左边框的属性，即顺时针排序。
solid double;
border: border-width border-style border-color
第3章 CSS布局与定位
3.4 内边距（padding）
#outerBox{ width: 128px; height: 128px;
padding: 20px 20px 10px; padding-left: 10px; border: 10px gray dashed; }
既然盒子可以装东西，于是就有了内容、内边距、 边框和外边距等概念。
第3章 CSS布局与定位
什么是“模型”——本质特征的抽象
第3章 CSS布局与定位
height
margin-right border-right padding-right
padding-left border-left margin-left
（3）外边距加倍(*) 例：5-4.html
第3章 CSS布局与定位
3.7 元素的水平间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验1——行内元素之间的水平margin
第3章 CSS布局与定位
3.1 盒子模型 3.2 盒模型尺寸的计算 3.3 边框 3.4 内ቤተ መጻሕፍቲ ባይዱ距 3.5 外边距 3.6 元素的水平间距 3.7 元素的垂直间距 3.8 嵌套div尺寸的计算 3.9 盒子的浮动
第3章 CSS布局与定位
3.1 盒子模型
盒模型是CSS布局中的一个核心概念，通俗一点讲， 盒模型就是将每一个XHTML元素都看成一个盒子。而所 谓的布局就是将指定数量的盒子按照不同的位置和顺 序摆放在一起，这就形成了网页布局。
span.left{ margin-right:30px; background-color:#a9d6ff;
} span.right{
margin-left:40px; background-color:#eeb0b0; }
span 1
margin-right
margin-left
span 2
第3章 CSS布局与定位
第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
动居中，即给margin属性赋值为“0 auto”。给 margin属性赋两个值，即分别定义其上下和左右的外 边距。
由于左右的外边距定义为auto，可以根据父元 素宽度自适应为相等大小，所以实现了元素的居中显 示。 例：5-2.html
第3章 CSS布局与定位
（2）外边距取负值 例：5-3.html
第3章 CSS布局与定位
3.9 盒子的浮动
流动布局、浮动布局和定位布局是CSS布局中最重 要的三项技术。
第3章 CSS布局与定位
1、流动布局 网页中的盒模型按前后顺序进行排列，形成了
一组上下关系，这就是文档流。通常所说的流动布局， 就是盒模型随着文档流由上而下进行的排列。如果中 间删除一个元素，在其后的元素就要填补这个空位； 如果中间插入一个元素，其后的元素就会向后依次移 动一个位置。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
第3章 CSS布局与定位
CSS代码所定义的宽度（width）和高度(height)是 指内容区域的宽度和高度，增加边界、边框和填充不会 影响内容区域的宽度和高度，但是会增加盒模型的总尺 寸。
上例中div区块的实际宽度 =40px+10px+30px+400px+30px+10px+40px=560px。