CSS盒子模型优质PPT.pptx
《CSS盒子模型优质PPT.pptx》由会员分享，可在线阅读，更多相关《CSS盒子模型优质PPT.pptx（38页珍藏版）》请在冰豆网上搜索。
border-top-style:
上边框样式;
border-right-style:
右边框样式;
border-bottom-style:
下边框样式;
border-left-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语言中。
和标记不同的是是行内元素，与之间只能包含文本和各种行内标记，如加粗标记、倾斜标记等，中还可以嵌套多层
升级会员 