任务3.2使用盒子模型编辑网页.pptxVIP

任务3.2使用盒子模型编辑网页

任务介绍已有的唐诗网页进一步进行修饰

任务分析通过css样式表能够对文本添加效果，那么对于做布局的表格呢？如何把表格变成圆形？如何给表格添加渐变的颜色？

1盒子模型◎初识盒子模型◎盒子模型的层次与的宽高

相关知识--盒子模型什么是盒子模型？

联想一下生活中常见的盒子模型？它们的共同特点相关知识—认识盒子模型

以手机盒子为例，分析盒子模型

边框内边距外边距在CSS中边框属性包括边框样式、边框宽度、边框颜色、单侧边框以及边框的综合属性内边距指元素内容与边框之间的距离。包括上边距、下边距、左边距、右边距。外边距指元素边框与相邻元素间的距离。包括上边距、下边距、左边距、右边距。基础属性：宽width，高height

2盒子模型◎初识盒子模型◎盒子模型的层次与的宽高

边框border属性边框属性控制元素所占用空间的边缘。语法：Border:border-styleborder-widthborder-color边框属性主要包括边框宽度、边框样式、边框颜色等，此外还有border的综合属性，在CSS3中添加了圆角边框、图片边框属性。border为复合属性,为了分割页面中不同的盒子，常常需要给元素设置边框效果，在CSS中边框属性中包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）在复合属性中，边c框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通过border-top、border-right、border-bottom、border-left分别设置。

border:宽度,样式,颜色?border-top:上边框宽度样式颜色;?border-right:右边框宽度样式颜色;?border-bottom:下边框宽度样式颜色;?border-left:左边框宽度样式颜色;边框复合属性注意：宽度、样式、颜色顺序任意，不分先后.

语法：border-width:上边框宽度值[右边框宽度值下边框宽度值左边框宽度值];按顺时针顺序采用值复制,一个值为4边相同、两个值为上下/左右相同，三个值为上/左右/下。1.边框宽度-border-width为边框指定宽度有两种方法：可以指定长度值，不可为负值,比如2px或0.1em(单位为px,pt,cm,em等)，或者使用3个关键字之一，它们分别是thick、medium（默认值）和thin。设置边框宽度注意：em是像百分比一样的相对值，它需要根据父元素大小进行缩放

2.边框样式border-style边框样式属性用以定义边框的风格呈现样式，这个属性必须用于指定的边框。语法：border-style:上边框样式[右边框样式下边框样式左边框样式];样式值可以取的值共有9种，见表所示属性含义属性含义none不显示边框，为默认属性值groove边框带有立体感的沟槽dotted点线ridge边框成脊形dashed虚线inset使整个方框凹陷，即在外框内嵌入一个立体边框solid实线outset使整个方框凸起，即在外框内嵌外一个立体边框double双实线??3.边框颜色-border-color边框颜色属性用于定义边框的颜色。语法：border-color:上边框颜色值[右边框颜色值下边框颜色值左边框颜色值];border-color的属性值同样复合颜色的定义法：预定义的颜色值、十六进制#RRGGBB和RGB代码rgb（r，g，b）三种，其中十六进制#RRGGBB使用的最多。案例

圆角边框语法：border-radius:半径值1/半径值2;border-radius的属性值包含2个参数，取值可以为像素值或百分比。其中“半径值1”表示圆角的水平半径，“半径值2”表示圆角的垂直半径，两个参数之间用“/”隔开。当水平半径和垂直半径相同时，可以写一个值在CSS3中，使用border-radius属性实现了矩形边框的圆角化。border-radius:10px20px0px30pxborder-radius:50px/15px等价于:border-top-left-radius:2em5em;border-top-right-radius:2em5em;border-bottom-right-radius:2em5em;border-bottom-left-radius:2em5em;注意：类似于border的值的设定，一个值为4角相同、两个值为斜对角相同，三个值为左上/右上左下/右下。案例

图片边框的属性与含义在CSS3中，使用图片边框border-image