当前位置:文档之家› CSS盒子模型

CSS盒子模型


4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
1、认识盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一 个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框( border)和外边距(margin)组成。
4.1 【案例7】知识点讲解
2、外边距属性
网页是由多个盒子排列而成的,要想拉开盒子与盒子之间的距离,合理地布 局网页,就需要为盒子设置外边距,所谓外边距指的是元素边框与相邻元素之间 的距离。 在CSS中margin属性用于设置外边距,它是一个复合属性,与内边距 padding的用法类似,设置外边距的方法如下: • margin-top:上外边距; • margin-right:右外边距; • margin-bottom:下外边距; • margin-left:左外边距; • margin:上外边距 [右外边距 下外边距 左外边距];
让IT教学更简单,让IT学习更有效
2、<div>标记
div是英文division的缩写,意为“分割、区域”。<div>标记简单而言就是一 个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和 布局。<div>与</div>之间相当于一个容器,可以容纳段落、标题、图像等各种网 页元素,也就是说大多数HTML标记都可以嵌套在<div>标记中,<div>中还可以 嵌套多层<div>。 <div>标记非常强大,通过与id、class等属性配合,然后使用CSS设置样式
4.3 【案例9】知识点讲解
让IT教学更简单,让IT学习更有效
2、设置背景图像
背景不仅可以设置为某种颜色,在CSS中,还可以将图像作为网页元素的背 景,通过background-image属性实现。 以【demo4-6】为基础,准备一张背景图像,如下图所示。
将图像放在【demo4-6】文件所在的文件夹中,然后更改body元素的CSS样
4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
3、边框属性
(3)设置边框颜色(border-color)
边框的默认颜色为元素本身的文本颜色,对于没有文本的元素,其默认边框
颜色为父元素的文本颜色。与边框样式和宽度相同,边框颜色的单边与综合设置 如下:
• border-top-color:上边框颜色;
4.2 【案例8】案例实现
让IT教学更简单,让IT学习更有效
4.3 【案例9】咖啡店banner
让IT教学更简单,让IT学习更有效
随着生活水平的提高以及生活节奏的加 快,咖啡走进了人们的日常生活,优雅的咖啡
案例引入
店也逐渐成为人们商务、休闲的首选场所。本 节将使用如下图所示的素材,结合盒子模型的 背景属性,制作一款咖啡店banner。
4.3 【案例9】知识点讲解
让IT教学更简单,让IT学习更有效
4、设置背景图像的位置
background-position属性的取值有多种,具体如下: (1)使用不同单位(最常用的是像素px)的数值:直接设置图像左上角在 元素中的坐标。 例如: “background-position:20px 20px;” (2)使用预定义的关键字:指定背景图像在元素中的对齐方式。 水平方向值:left、center、right。 垂直方向值:top、center、bottom。
常用属性值
上边框
下边框
左边框
右边框
样式综合设置 宽度综合设置 颜色综合设置
边框综合设置
border:四边宽度 四边样式 四边颜色;
4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
3、边框属性
(1)设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下: • none:没有边框即忽略所有边框的宽度(默认值) • solid:边框为单实线 • dashed:边框为虚线 • dotted:边框为点线 • double:边框为双实线
ቤተ መጻሕፍቲ ባይዱ
4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
3、边框属性
(2)设置边框宽度(border-width)
border-width属性用于设置边框的宽度,其常用取值单位为像素px。同边框
样式一样,边框宽度也可以针对四条边分别设置,或综合设置四条边的宽度,具 体如下: • border-top-width:上边框宽度; • border-right-width:右边框宽度; • border-bottom-width:下边框宽度; • border-left-width:左边框宽度; • border-width:上边框宽度 [右边框宽度 下边框宽度 左边框宽度];
是复合属性,其相关设置如下:
• padding-top:上内边距; • padding-right:右内边距;
• padding-bottom:下内边距;
• padding-left:左内边距; • padding:上内边距 [右内边距 下内边距 左内边距];
4.2 【案例8】知识点讲解
让IT教学更简单,让IT学习更有效
4.3 【案例9】知识引入
让IT教学更简单,让IT学习更有效
设置背景颜色
知识引入
设置背景图像
设置背景图像平衡 设置背景图像的位置 设置背景图像固定
综合设置元素的背景
4.3 【案例9】知识点讲解
让IT教学更简单,让IT学习更有效
1、设置背景颜色
在CSS中,网页元素的背景颜色使用background-color属性来设置,其属性 值与文本颜色的取值一样,可使用预定义的颜色值、十六进制#RRGGBB或RGB 代码rgb(r,g,b)。background-color的默认值为transparent,即背景透明,这时子 元素会显示其父元素的背景。 了解了背景颜色属性background-color,下面来演示其用法。
让IT教学更简单,让IT学习更有效
音乐可以陶冶情操,为我们带来听觉上
案例引入
的享受,随着互联网的普及,在网络上听音 乐变得越来越方便。本节将通过盒子模型及 其边框属性制作一个音乐盒,如下图所示。
4.1 【案例7】知识引入
让IT教学更简单,让IT学习更有效
知识引入
认识盒子模型
<div>标记 边框属性
• border-left:左边框宽度 样式 颜色;
• border:四边宽度 样式 颜色;
4.1 【案例7】案例实现
让IT教学更简单,让IT学习更有效
4.2 【案例8】用户中心
让IT教学更简单,让IT学习更有效
注册和登录一些网站时,经常需要填写用 户信息。“用户中心”模块用于对用户个人信
案例引入
4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
3、边框属性
(1)设置边框样式(border-style)
使用border-style属性综合设置四边样式时,必须按上右下左的顺时针顺
序,省略时采用值复制的原则,即一个值为四边,两个值为上下/左右,三个值 为上/左右/下。
例如<p>只有上边为虚线dashed,其他三边为单实线solid,可以使用
3、边框属性
(4)综合设置边框
使用border-style、border-width、border-color虽然可以实现丰富的边框效
果,但是这种方式书写的代码繁琐,且不便于阅读,其实CSS提供了更简单的边 框设置方式,具体如下:
• border-top:上边框宽度 样式 颜色;
• border-right:右边框宽度 样式 颜色; • border-bottom:下边框宽度 样式 颜色;
让IT教学更简单,让IT学习更有效 让IT教学更简单,让IT学习更有效
第四章 CSS盒子模型
• 盒子模型相关属性
• 块元素与行内元素的区别

目录
让IT教学更简单,让IT学习更有效
【案例7】:音乐盒 【案例8】:用户中心 【案例9】:咖啡店banner 【案例10】:图标导航栏
4.1 【案例7】音乐盒
,来替代大多数的文本标记。
4.1 【案例7】知识点讲解
让IT教学更简单,让IT学习更有效
3、边框属性
设置内容 样式属性
border-top-style:样式; border-top-width:宽度; border-top-color:颜色; border-top:宽度 样式 颜色; border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度 样式 颜色; border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度 样式 颜色; border-right-style:样式; border-right-width:宽度; border-right-color:颜色; border-right:宽度 样式 颜色; border-style:上边 [右边 下边 左边]; border-width:上边 [右边 下边 左边]; border-color:上边 [右边 下边 左边]; none无(默认)、solid单实线、dashed 虚线、dotted点线、double双实线 像素值 颜色值、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%)
• border-right-color:右边框颜色; • border-bottom-color:下边框颜色;
相关主题