CSS3盒子模型：边框、内边距与阴影解析

“第六章 盒子模型”是关于HTML5和CSS3网页设计的一个章节，主要探讨了如何利用CSS3来实现网页元素的盒子模型布局、样式调整以及相关的视觉效果。 在网页设计中，盒子模型（Box Model）是理解元素布局的基础。它包括元素的宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）。这些部分共同决定了元素的实际占用空间。例如，要设置一个`<li>`标签的下边框为1px的蓝色虚线，可以使用以下CSS代码： ```css li { border-bottom: 1px dashed blue; } ``` 计算盒子模型的总尺寸需要将元素的宽度和高度与内边距和边框结合起来。总宽度等于元素的宽度加上左右边框宽度加上左右内边距，总高度等于元素的高度加上上下的边框高度加上上下的内边距。 在CSS中设置元素的圆角边框可以使用`border-radius`属性，如： ```css div { border-radius: 10px; } ``` 这会让div元素的四角都变成半径为10px的圆形角。 创建盒子阴影效果则可以使用`box-shadow`属性，例如： ```css div { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } ``` 这会在div元素的右侧和下侧添加一个2px水平偏移、2px垂直偏移、4px模糊半径且颜色为半透明黑色的阴影。 在设置背景图像时，通常需要同时设置`background-image`和`background-repeat`以及`background-position`属性。例如： ```css body { background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; } ``` 这样，背景图片将以居中的方式在页面上显示，并且不会重复。 使用`font`属性设置字体时，顺序通常是风格→粗细→大小→类型，如： ```css p { font: italic bold 16px Arial, sans-serif; } ``` 设置列表项目符号可以使用`list-style-type`或`list-style`属性，如： ```css ul { list-style-type: square; /* 或者 list-style: square outside none; */ } ``` 本章的任务包括制作商品分类页面、美容产品热点页面和视频播放列表页面，目标是掌握盒子模型及其构成，计算盒子模型尺寸，使用不同的解析方式布局网页，以及运用圆角和阴影属性增强网页元素的视觉效果。通过这些实践，学习者将能够更深入地理解并应用HTML5和CSS3的特性来创建美观且功能丰富的网页。