CSS盒子模型PPT课件

让IT教学更简单，让IT学习更有效,第四章CSS盒子模型,盒子模型相关属性,块元素与行内元素的区别,目录,4.1【案例7】音乐盒,音乐可以陶冶情操，为我们带来听觉上的享受，随着互联网的普及，在网络上听音乐变得越来越方便。本节将通过盒子模型及其边框属性制作一个音乐盒，如下图所示。,案例引入,4.1【案例7】知识引入,知识引入,4.1【案例7】知识点讲解,所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。,1、认识盒子模型,4.1【案例7】知识点讲解,div是英文division的缩写，意为“分割、区域”。标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。与之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在标记中，中还可以嵌套多层。标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。,2、标记,4.1【案例7】知识点讲解,3、边框属性,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、边框属性,pborer-style:dashedsolidsolidsolid;,pborder-style:solid;/*综合设置四边样式*/pborder-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】知识引入,知识引入,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】知识引入,知识引入,4.3【案例9】知识点讲解,在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。了解了背景颜色属性background-color，下面来演示其用法。,1、设置背景颜色,4.3【案例9】知识点讲解,背景不仅可以设置为某种颜色，在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。以【demo4-6】为基础，准备一张背景图像，如下图所示。将图像放在【demo4-6】文件所在的文件夹中，然后更改body元素的CSS样式代码：,2、设置背景图像,bodybackground-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）使用预定义的关键字：指定背景图像在元素中的对齐方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。,4、设置背景图像的位置,“background-position:20px20px;”,4.3【案例9】知识点讲解,（3）使用百分比：按背景图像和元素的指定点对齐。0%0%表示图像左上角与元素的左上角对齐。50%50%表示图像50%50%中心点与元素50%50%的中心点对齐。20%30%表示图像20%30%的点与元素20%30%的点对齐。100%100%表示图像右下角与元素的右下角对齐，而不是图像充满元素。如果只有一个百分数，将作为水平值，垂直值则默认为50%。,4、设置背景图像的位置,4.3【案例9】知识点讲解,如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用background-attachment属性来设置，其属性值如下：scroll：图像随页面元素一起滚动（默认值）。fixed：图像固定在屏幕上，不随页面元素滚动。,5、设置背景图像固定,4.3【案例9】知识点讲解,同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：在上面的语法格式中，各个样式顺序任意，中间用空格隔开，不需要的样式可以省略。但实际工作中通常按照背景色、url(图像)、平铺、定位、固定的顺序来书写。,6、综合设置元素的背景,background:背景色url(图像)平铺定位固定;,4.3【案例9】案例实现,4.4【案例10】图标导航栏,导航菜单是网站的重要组成部分，关系着网站的可用性和用户体验。一个有吸引力的图标导航栏不仅可以给用户带来良好的体验，而且使网站看上去更加生动、有趣。本节将使用“块元素”与“行内元素”间的转换来制作一款图标导航栏，如下图所示。,案例引入,4.4【案例10】知识引入,知识引入,4.4【案例10】知识点讲解,HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用CSS设置样式和布局打下基础，具体如下：,1、元素的类型,4.4【案例10】知识点讲解,块元素块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有、等，其中标记是最典型的块元素。,1、元素的类型,4.4【案例10】知识点讲解,行内元素行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有、等，其中标记是最典型的行内元素。,1、元素的类型,4.4【案例10】知识点讲解,与一样，也作为容器标记被广泛应用在HTML语言中。和标记不同的是是行内元素，与之间只能包含文本和各种行内标记，如加粗标记、倾斜标记等，中还可以嵌套多层。标记常用于定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的表现格式，只有应用样式时，才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用标记。,2、标记,4.4【案例10】知识点讲解,如果希望行内元素具有块元素的某些特性，例