CSS盒子模型PPT课件

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