网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例7知识点02：盒子模型的相关属性

我们毕业啦其实是答辩的标题地方盒子模型的相关属性要精确描述盒子的外观，还可以设置盒子的border（边框）、border-radius（圆角边框）、padding（内边距）、margin（外边距）、box-shadow（盒子阴影）和box-sizing（盒子大小）等属性。盒子模型的相关属性border属性border属性的设置方式如下。盒子模型的相关属性若4个边框具有相同的宽度、样式和颜色，则可以用一行代码设置。语法格式：border：边框宽度、样式、颜色border-top：上边框宽度、样式、颜色border-right：右边框宽度、样式、颜色border-bottom：下边框宽度、样式、颜色border-left：左边框宽度、样式、颜色border属性盒子模型的相关属性说明：边框样式常用的属性值有以下5个。solid：边框样式为（单）实线

dashed：边框样式为虚线dotted：边框样式为点线

double：边框样式为双实线none：没有边框例如，将盒子的下边框设置为2px、实线、红色，则可以用如下代码。#box{border-bottom:2px

solid

#F00;}若想将盒子的4个边框均设置为2px、实线、红色，则可以用如下代码。#box{border:2px

solid

#F00;}border-radius:圆角半径;border-radius属性盒子模型的相关属性例如：CSS3中新增的border-radius属性用于给元素设置圆角边框。其基本语法格式如下。该值可以是长度或百分比，表示圆角的半径例如，将上例中的盒子样式代码修改如下。border-radius属性盒子模型的相关属性设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。四个参数分别表示左上角、右上角、右下角、左下角的圆角半径。若对盒子设置了背景颜色或背景图像，则不设置边框时，也可以使用border-radius属性显示出圆角的效果。例如，将上例的盒子的样式代码修改如下。border-radius属性盒子模型的相关属性另外，使用border-radius属性也可以给图像添加圆角效果。padding属性用于设置盒子中内容与边框之间的距离，也常称为内边距。其设置方式类似于border属性的设置方式，具体如下。盒子模型的相关属性若4个内边距具有相同的大小，则可以用一行代码设置。语法格式：padding:内边距大小;padding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小padding-left：左内边距大小padding属性padding属性盒子模型的相关属性例如，将盒子的上右下左4个内边距分别设置为10px、20px、30px、40px，则可以用如下代码。.box{padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;}#box{padding:10px

20px

30px

40px;}上右下左#box{padding:10px

20px

30px;}上左右下#box{padding:10px

20px;}上下左右#box{padding:10px;}上右下左简写margin属性用于设置盒子与盒子之间的距离，也称为外边距。其设置方式类似于padding属性的设置方式，具体如下。盒子模型的相关属性若4个外边距具有相同的大小，则可以用一行代码设置。语法格式：margin:外边距大小;margin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小margin-left：左外边距大小margin属性margin属性盒子模型的相关属性外边距的设置与内边距的设置相同。#box{

margin:0

auto;}

/*

表示上、下外边距为0px，左、右外边距为自动均匀分布，盒子在浏览器中居中显示

*/说明：如果要让盒子在浏览器中水平居中，则可以用如下代码。box-shadow:阴影水平偏移量

阴影垂直偏移量

阴影模糊半径

阴影扩展半径

阴影颜色

阴影类型;box-shadow属性盒子模型的相关属性说明：box-shadow属性用于给盒子添加周边阴影效果。语法格式如下。（1）阴影水平偏移量：必选项，可以为负值，正值表示向右偏移，负值表示向左偏移。（4）阴影扩展半径：可选项，可以为负值，正值表示在所有方向上扩展，负值表示在所有方向上消减，默认值为0。（2）阴影垂直偏移量：必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。（3）阴影模糊半径：可选项，不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。（5）阴影颜色：可选项，省略时为黑色。（6）阴影类型：可选项，内阴影的值为inset，省略时为外阴影。box-shadow属性盒子模型的相关属性例如，给盒子添加阴影水平偏移量是10px，阴影垂直偏移量是10px，阴影模糊半径是10px，阴影颜色是灰色，则可以用如下代码。box-shadow:10px

10px

10px

#808080;

/*

添加阴影

*/box-sizing:

content-box|border-box;box-sizing属性盒子模型的相关属性box-sizing属性用于设置盒子的width属性和height属性的值是否包含边框和内边距。其设置方式如下。默认值。盒子的width和height属性值不包括内边距和边框，在计算盒子页面中实际占的宽度和高度时要把内边距和边框包括进去。盒子的width和height属性值包括内边距和边框。box-sizing属性盒子模型的相关属性例如：.box{

width:200px;

height:100px;

padding:20px;

border:2px

solid

red;}盒子在页面上实际占的宽度是200px+40px+4px=244px，实际占的高度是100px+40px+4px=144px。例如：.box{

width:200px;

height:100px;

padding:20px;