二、盒子大小计算方式（20分钟）
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。
练习：定义一个盒子，设置相关属性。（5分钟）
三、盒子模型的相关属性（40分钟）
1．边框属性border
边框（border）属性设置方式如下：
❖border-top：上边框宽度样式颜
❖border-right：右边框宽度样式颜
❖border-bottom：下边框宽度样式颜
❖border-left：左边框宽度样式颜
若四个边框具有相同的宽度、样式和颜，则可以一个次设置如下：
border：边框宽度样式颜
注意：边框宽度、样式和颜属性的顺序可以随意。
边框样式的常用属性值有以下5个。
❖solid：边框样式为单实线。
❖dashed：边框样式为虚线。
❖dotted：边框样式为点线。
❖double：边框样式为双实线。
❖none：没有边框。
2．圆角边框属性border-radius
格式:border-radius：圆角半径; 盒子模型的宽度和高度与它的内容、边框、内边距有关。内容、边框、内边距影响盒子的大小，要计算准确。
例：设置圆角半径值为15px
border-radius:15px;
注意：
（1）设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。
四个参数分别表示左上角、右上角、右下角、左下角的圆角半径。
（2）若盒子设置了背景颜或背景图像，那么在不设置边框时，也可以使用border-radius属性显示出圆角的效果。
例：设置圆角半径为15px
3．内边距属性padding
内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。其设
置方法类似于
padding属性的设置，其设置方式如下：
box sizing❖padding-top：上内边距大小
❖padding-right：右内边距大小
❖padding-bottom：下内边距大小
❖padding-left：左内边距大小
若四个内边距具有相同的大小，则可以一个次设置如下：
padding：内边距大小
例如，将盒子box的上、右、下、左4个内边距分别设置为10px、20px、30px、40px，则可以使用如下代码。
也可以简写成：
若只有3个参数：
表示上内边距为10px，左、右内边距均为20px，下内边距为30px
若只有2个参数：
表示上、下内边距均为10px，左、右内边距均为20px
若只有一个参数：
表示上、右、下、左4个内边距均为10px
4．外边距（margin）属性
网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。外边距用于设置盒子与其它盒子之间的
距离。其设置方法类似于内边距（paddding）属性的设置，其设置方式如下：❖margin-top：上外边距大小
❖margin-right：右外边距大小
❖margin-bottom：下外边距大小
❖margin-left：左外边距大小
若四个外边距具有相同的大小，则可以一次设置如下：
margin：外边距大小
如果要让盒子在其所在容器中水平居中，则可以用如下代码：
III.课堂小结：（5分钟）
❖盒子模型的相关属性
❖盒子大小计算方式
作业：
超星学习通平台作业
第3、4学时
（盒子阴影属性和盒子大小属性）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（10分钟）
盒子不定义宽度和高度时，其默认的宽度和高度是多少？
II.重难点内容讲授：（75分钟）
一、盒子阴影（box-shadow）属性（25分钟）
格式：box-shadow：阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜阴影类型；
例4-2  网页中盒子的大小需要精确计算，一个像素也不能差，要求同学们养

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。