（本科）Web3-8-CSS的盒模型ppt课件.pptx

《（本科）Web3-8-CSS的盒模型ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）Web3-8-CSS的盒模型ppt课件.pptx（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程主讲人：Web3-8-CSS的盒模型昆明理工大学计算中心昆明理工大学计算中心WebWeb设计与应用设计与应用3.8 CSS的盒子模型Web设计与应用盒子模型就是所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和实际内容。初识盒子模型【实例1】认识盒子模型。作用：盒子模型便于网页的布局，其实就是就是多个盒子嵌套排列。例如，常用的div元素，就是英文division的缩写，意为“分割、区域”。标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网

2、页的规划和布局。盒子结构的纵深顺序，自下而上为：外边距、背景颜色、背景图像、内边距、内容、边框。CSS代码中的宽width和高height，指的是填充以内的内容范围。盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和图中盒子的宽度为360像素，计算方法为200+30*2+10*2+40*2=360像素高度为420像素，计算方法为260+30*2+10*2+40*2=420像素边框属性控制元素所占用空间的边缘。边框属性主要包括边框宽度、边框样式、边框颜色等，此外还有border的综合属性，在CSS

3、3中添加了圆角边框、图片边框属性。边框宽度-border-width边框宽度用于设置元素边框的宽度值。语法： border-width:上边框宽度值右边框宽度值 下边框宽度值 左边框宽度值; 语法中，宽度由数字和单位组成的长度值，不可为负值，常用取值单位为像素px。 并且遵循值复制的原则，值可以取1到4个，设置了1个值，应用于4个边框；设置了2个或3个值，省略的值与对边相等；设置了4个值，按照上、右、下、左的顺序显示结果 。举例：“border-width:3px;” 表示4个边框的宽度都为3像素。“border-width:3px 6px;” 表示上下边框的宽度都为3像素，左右边框的宽度都为

4、6像素。“border-width:3px 6px 9px;” 表示上边框的宽度都为3像素，左右边框的宽度都为6像素，下边框的宽度都为9像素。也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottom-width:宽度值、border-left-width:宽度值逐个定义。边框样式属性用以定义边框的风格呈现样式，这个属性必须用于指定的边框。语法： border-style: 上边框样式右边框样式 下边框样式 左边框样式;样式值可以取的值共有9种，见表所示边框颜色属性用于定义边框的颜色。语法： border-color:上边框颜色

5、值右边框颜色值 下边框颜色值 左边框颜色值;border-color的属性值同样复合颜色的定义法：预定义的颜色值、十六进制#RRGGBB和RGB代码rgb（r，g，b）三种，其中十六进制#RRGGBB使用的最多。border为复合属性是边框宽度border-width、样式border-style和颜色border-color的简写方式。语法： border:|；例如“border:1px solid #F00;”表示元素的4个边框都是1像素红色的实线。当网页中只需要元素的底部边框为1像素红色的实线时，代码修改为“border-bottom:1px solid #F00;”。边距属性分为：内边

6、距padding和外边距marign两种。内边距主要用来调整内容在盒子中的置，指的是元素内容与边框border之间的距离，也被常称为内填充。语法： padding：上内边距值右内边距值 下内边距值 左内边距值;外边距margin指的是元素边框与相邻元素之间的距离。语法： margin：上外边距值右外边距值 下外边距值 左外边距值;CSS3中新增加了圆角边框、图片边框、盒子阴影等属性。圆角边框在CSS3中，使用border-radius 属性实现了矩形边框的圆角化语法： border-radius: 半径值1/半径值2;语法中，border-radius的属性值包含2个参数，取值可以为像素值或百

7、分比。其中“半径值1”表示圆角的水平半径，“半径值2”表示圆角的垂直半径，两个参数之间用“/”隔开。例如： width: 400px;height: 400px;border:4px solid #4087d0;border-radius: 160px/80px; /*分别设置水平半径160px、垂直半径80px*/在定义border-radius属性时，如果只保留一个参数。例如：border-radius: 200px;由于图片自身的宽高都为400px，所以整体图片显示为圆形。图片边框在CSS3中，使用图片边框border-image实现对区域整体添加一个图片边框。border-image属

8、性是综合属性，还包括border-image-source、border-image-slice、border-image-width、border-image-outset以及border-image-repeat等属性。图片边框的属性与含义语法： border-image-source：none | 图片路径；border-image-slice：图像顶部、右侧、底部左侧内偏移值(像素或百分百；border-image-width：边框的宽度值(像素)；border-image-outset：数值；border-image-repeat：stretch | repeat | round；综

9、合属性语法如下：border-image：border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;素材图片边框图片使用的效果 border-image综合属性:border-image:url(img/bg.png) 33%/100px/0px repeat;CSS中的box-shadow属性可以实现阴影效果。语法： box-shadow: 水平阴影值 垂直阴影值 模糊距离值 阴影大小值 颜色 阴影类型;外阴影效果内阴影效果box-sizing属性用于定义

10、盒子的宽度width和高度值height是否包含元素的内边距和边框语法： box-sizing: content-box|border-box;box1width:500px;height:50px;margin: 5px 0;border:10px solid #4087D0;padding: 0 50px;box-sizing: border-box; /*设置box-sizing为border-box*/box1width:500px;height:50px;margin: 5px 0;border:10px solid #4087D0;padding: 0 50px;box-sizing:content-box; /*设置box-sizing为content-box*/示例代码给盒子设置的效果如图所示总结与思维启发总结与思维启发本次课介绍了CSS盒模型的基本概念和相关属性设置，课后请同学们针对这些属性进行实践训练，谢谢大家！