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
- 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。