作业1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
</head>
<body>
<style>
div{
color: white;
background-color: rgb(10, 14, 126);
width: 1280px;
height: 60px;
line-height: 60px;
border-radius: 50px;
margin: auto;
text-align: center;
box-shadow: 10px 10px 10px gray;
text-shadow: 10px 10px 10px white;
}
.div1::selection{
background-color: pink;
}
</style>
</head>
<body>
<div>
<h2 class="div1">
游戏1
游戏2
游戏3
游戏4
游戏5
游戏6
游戏7
游戏8
游戏9
</h2>
</div>
</body>
</html>
作业2：
我们需要去了解css盒子模型
首先，我们需要了解什么是css盒子模型，网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)，css盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的css技术所使用的一种思维模型。
其次，css盒子模型:主要由内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分组成。1.内容(content):这是盒子的核心部分，用于显示实际的内容，如文字、图片等。其大小可以通过width和height属性进行设置2.内边距(padding):内容区域与边框之间的空间是内边距。它的大小可以通过padding属性进行设置。3.边框(border):紧接内边距并包裹内容的线条是边框。边框的样式、宽度和颜色可以通过border-stvle、border-vidth和border-color属性进行设置。4.外边距(margin):边框外部的空间是外边距。它用于分隔相邻的元素，大小可以通过margin属性进行设置。此外，CSS盒子模型还有两种计算方式，可以通过box-izing属性进行指定。种是content-box，这是默认方式，实际盒子大小包括内容区、内边距和边框宽度。另一种是border-box,此时盒子的宽度和高度包括内容、内边距和边框。
最后，css(cascading style sheet)可译为“层叠样式表“或“级联样式表”，它定义如何显示HTML 元素，用于控制web页面的外观。通过使用csS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTHL文档元素都生成了一个描述该元素在HTL文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSs用络这些食子产生了一种“"倉子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区(content)、填充(padding)、边框(border)和空白边(margin)。Css为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。
盒子模型的类型
在CSS中，有两种常见的盒子模型，它们分别是:
1.标准盒子模型(Content Box Model):默认情况下，元素的宽度和高度只包括内容的尺寸，不包括内边距、边框和外边距。这是W3C规范中定义的标准盒子模型。
2.IE盒子模型(Border Box Model):I盒子模型将元素的宽度和高度包括了内容、内边距和边框的尺寸，而不是仅包括内容。这个模型在一些旧版的Inteme!
Explorer浏览器中被采用，但可以通过CSS属性进行切换。
如何设置盒子模型
要设置元素的盒子模型，可以使用CSS的box-sizing属性。这个属性有两个常用的取值:
1.box-sizing: content-box(默认值):采用标准盒子模型，元素的宽度和高度只包括内容的尺寸; 2.box-sizing:border-box采用IE盒子模型，元素的宽度和高度包括内容、内边距和边框的尺寸。
影响盒子模型的CSS属性
盒子模型的各个部分可以通过一系列CSS属性进行控制。以下是一些常用的属性：
1.width:定义元素的宽度。
2.height:定义元素的高度
3. padding:定义内边距，可以分别指定上、右、下、左的内边距值。
4.border:定义边框，包括边框宽度、样式和颜色
5.margin:定义外边距，可以分别指定上、右、下、左的外边距值。
6.box-sizing:定义元素的盒子模型类型，可以是content-box或border-box 7.display:定义元素的显示方式，例如block、inline、inline-block等
盒子模型的应用
盒子模型在网页布局中有着广泛的应用。通过控制元素的宽度、高度、内边距和外边距，可以实现各种复杂的页面布局。以下是一些盒子模型的实际应用示例: 1.创建网页布局:通过设置不同元素的宽度和高度，以及内边距和外边距，可以实现各种网页布局，包括两列、三列布局等 2.创建按钮和表单元素:通过定义按钮的宽度和高度，以及设置内边距和边框样式，可以创建各种样式的按钮和表单元素。 3.设置图片尺寸:通过控制图片元素的宽度和高度，可以实现图片的大小调整和布局排列。 4.调整文本框的样式:通过设置文本框的内边距和边框样式，可以美化文本框的外观。
所以，总的来说，CSS盒子模型是构建网页布局的关键概念之一，它定义了HTML元素的尺寸和布局方式。理解和学握盒子模型是成为一名优秀的前端开发者的重要一步。通过使用box-sizing 属性和其他CSS属性，您可以轻松控制元素的外观和布局，实现各种各样的网页设计。在开发网页时，深入了解盒子模型的工作原理将为您提供更多的灵活性和创造力。
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
