运用盒模型网页布局
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 6px;
2. 边框样式border-style 边框样式属性用以定义边框的风格呈现样式，这个属性必须用于指定的边框。
网页设计与制作(HTML+CSS+Javascript)
运用盒模型网页布局
网页设计与制作课程组
目标 TARGET
知识目标
掌握盒子模型的原理； 掌握盒子模型的层次与的宽高计算； 掌握盒子模型的层次与的宽高计算； 掌握盒子的CSS3新增属性；
掌握元素的类型与转换。
பைடு நூலகம்
1 初识盒子模型 2 盒子模型的常用属性
举例 演示
【实例6-1】认识盒子模型。
认识盒子模型
盒子模型的基本结构
作用：盒子模型便于网页的布局，其实就是就是多个盒子嵌套排列。例如，常用的div元素，就是英 文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网 页分割为独立的、不同的部分，以实现网页的规划和布局。
3 元素的浮动与定位
Part
1
盒子模型
◎初识盒子模型 ◎ 盒子模型的层次与的宽高
1 初识盒子模型
盒子模型就是所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设 计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距 和实际内容。
【实例6-1】中盒子的宽度和高度
宽度360像素，计算方法为200+30*2+10*2+40*2=360像素 高度420像素，计算方法为260+30*2+10*2+40*2=420像素
Part
2
盒子模型的常用属性
◎边框border属性 ◎边距属性 ◎ CSS3新增属性
1 边框border属性
边框属性控制元素所占用空间的边缘。
边框成脊形
使整个方框凹陷，即在外框内嵌入一个立体边框 使整个方框凸起，即在外框内嵌外一个立体边框
border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。 border-style也可以分别定义border-top-style、border-right-style、border-bottom-style、 border-left-style的样式。 橙色背景的solid（实线）dashed（虚线）、dotted（点线）、double（双实线）较为常用。
3. 边框颜色-border-color 边框颜色属性用于定义边框的颜色。 语法： border-color:上边框颜色值[右边框颜色值 下边框颜色值 左边框颜色值];
border-color的属性值同样复合颜色的定义法：预定义的颜色值、十六进制#RRGGBB和RGB代码rgb （r，g，b）三种，其中十六进制#RRGGBB使用的最多。 border-color的值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值，省略的值与对 边相等；设置了4个值，按照上、 右、下、左的顺序显示结果。 同样，border-color也可以按照border-top-color:颜色值、border-right-color:颜色值、borderbottom-color:颜色值、border-left-color:颜色值逐个定义。
并且遵循值复制的原则，值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值， 省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果 。
举例：
“border-width:3px;” 表示4个边框的宽度都为3像素。
“border-width:3px 6px;” “border-width:3px 6px 9px;”
边框属性主要包括边框宽度、边框样式、边框颜色等，此外还有border的综合属性，在 CSS3中添加了圆角边框、图片边框属性。 1. 边框宽度-border-width 边框宽度用于设置元素边框的宽度值。 语法： border-width:上边框宽度值[右边框宽度值 下边框宽度值 左边框宽度值];
语法中，宽度由数字和单位组成的长度值，不可为负值，常用取值单位为像素px。
语法： border-style: 上边框样式[右边框样式 下边框样式 左边框样式];
样式值可以取的值共有9种，见表所示 属性 none 含义 不显示边框，为默认属性值 属性 groove 含义 边框带有立体感的沟槽
dotted
dashed solid double
点线
虚线 实线 双实线
ridge
inset outset
2 盒子模型的层次与宽高
盒子结构的纵深顺序，自下而上为：外边距、背景颜色、背景图像、内边距、内容、边框。
CSS代码中的宽width和高height，指的是填充以内的内容范围。 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。 举例：“border-width:3px 6px 9px;” 等同于
4. 边框综合属性-border border为复合属性是边框宽度border-width、样式border-style和颜色border-color的简写方式。 语法： border:<边框宽度>|<边框样式>|<颜色>；
例如“border:1px solid #F00;”表示元素的4个边框都是1像素红色的实线。当网页中只需要元 素的底部边框为1像素红色的实线时，代码修改为“border-bottom:1px solid #F00;”。
2. 边框样式border-style 边框样式属性用以定义边框的风格呈现样式，这个属性必须用于指定的边框。
网页设计与制作(HTML+CSS+Javascript)
运用盒模型网页布局
网页设计与制作课程组
目标 TARGET
知识目标
掌握盒子模型的原理； 掌握盒子模型的层次与的宽高计算； 掌握盒子模型的层次与的宽高计算； 掌握盒子的CSS3新增属性；
掌握元素的类型与转换。
பைடு நூலகம்
1 初识盒子模型 2 盒子模型的常用属性
举例 演示
【实例6-1】认识盒子模型。
认识盒子模型
盒子模型的基本结构
作用：盒子模型便于网页的布局，其实就是就是多个盒子嵌套排列。例如，常用的div元素，就是英 文division的缩写，意为“分割、区域”。<div>标记简单而言就是一个区块容器标记，可以将网 页分割为独立的、不同的部分，以实现网页的规划和布局。
3 元素的浮动与定位
Part
1
盒子模型
◎初识盒子模型 ◎ 盒子模型的层次与的宽高
1 初识盒子模型
盒子模型就是所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设 计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距 和实际内容。
【实例6-1】中盒子的宽度和高度
宽度360像素，计算方法为200+30*2+10*2+40*2=360像素 高度420像素，计算方法为260+30*2+10*2+40*2=420像素
Part
2
盒子模型的常用属性
◎边框border属性 ◎边距属性 ◎ CSS3新增属性
1 边框border属性
边框属性控制元素所占用空间的边缘。
边框成脊形
使整个方框凹陷，即在外框内嵌入一个立体边框 使整个方框凸起，即在外框内嵌外一个立体边框
border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。 border-style也可以分别定义border-top-style、border-right-style、border-bottom-style、 border-left-style的样式。 橙色背景的solid（实线）dashed（虚线）、dotted（点线）、double（双实线）较为常用。
3. 边框颜色-border-color 边框颜色属性用于定义边框的颜色。 语法： border-color:上边框颜色值[右边框颜色值 下边框颜色值 左边框颜色值];
border-color的属性值同样复合颜色的定义法：预定义的颜色值、十六进制#RRGGBB和RGB代码rgb （r，g，b）三种，其中十六进制#RRGGBB使用的最多。 border-color的值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值，省略的值与对 边相等；设置了4个值，按照上、 右、下、左的顺序显示结果。 同样，border-color也可以按照border-top-color:颜色值、border-right-color:颜色值、borderbottom-color:颜色值、border-left-color:颜色值逐个定义。
并且遵循值复制的原则，值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值， 省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果 。
举例：
“border-width:3px;” 表示4个边框的宽度都为3像素。
“border-width:3px 6px;” “border-width:3px 6px 9px;”
边框属性主要包括边框宽度、边框样式、边框颜色等，此外还有border的综合属性，在 CSS3中添加了圆角边框、图片边框属性。 1. 边框宽度-border-width 边框宽度用于设置元素边框的宽度值。 语法： border-width:上边框宽度值[右边框宽度值 下边框宽度值 左边框宽度值];
语法中，宽度由数字和单位组成的长度值，不可为负值，常用取值单位为像素px。
语法： border-style: 上边框样式[右边框样式 下边框样式 左边框样式];
样式值可以取的值共有9种，见表所示 属性 none 含义 不显示边框，为默认属性值 属性 groove 含义 边框带有立体感的沟槽
dotted
dashed solid double
点线
虚线 实线 双实线
ridge
inset outset
2 盒子模型的层次与宽高
盒子结构的纵深顺序，自下而上为：外边距、背景颜色、背景图像、内边距、内容、边框。
CSS代码中的宽width和高height，指的是填充以内的内容范围。 盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。 举例：“border-width:3px 6px 9px;” 等同于
4. 边框综合属性-border border为复合属性是边框宽度border-width、样式border-style和颜色border-color的简写方式。 语法： border:<边框宽度>|<边框样式>|<颜色>；
例如“border:1px solid #F00;”表示元素的4个边框都是1像素红色的实线。当网页中只需要元 素的底部边框为1像素红色的实线时，代码修改为“border-bottom:1px solid #F00;”。