作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
</head>
<body>
<style>
span{
width: 300px;
height: 30px;
background-color:rgba(33, 44, 83, 0.926);
border-radius:5%;
box-shadow:3px 3px 3px gray;
}
li{
list-style:none;
display:inline-block;
border: 1px soldred;
color:aliceblue;
text-shadow:3px 3px 3px gray;
}
</style>
<span>
<li>游戏1</li>
<li style="background-color: brown;">游戏2</li>
<li>游戏3</li>
<li>游戏4</li>
<li>游戏5</li>
<li>游戏6</li>
<li>游戏7</li>
<li>游戏8</li>
<li>游戏9</li>
</span>
</body>
</html>
作业2
盒子模型的类型
- 标准盒子模型:元素的宽度和高度只包括内容的尺寸,不包括内边距、边框和外边距。
- IE盒子模型:元素的宽度和高度包括了内容、内边距和边框的尺寸。
盒子模型的布局方式
块级盒子:从上到下排列,可以设置宽度、高度、内边距、边框和外边距。
行内盒子:从左到右排列,不能设置宽度、高度,但可以设置内边距、边框和外边距。
CSS属性对盒子模型的影响
width
和 height
:定义元素的内容区域的宽度和高度。
padding
:定义内边距。
border
:定义边框。
margin
:定义外边距。
box-sizing
:定义元素的盒子模型类型,可以是 content-box
或 border-box
。
盒子模型的应用
盒子模型广泛应用于网页布局中,通过控制元素的宽度、高度、内边距和外边距,可以实现各种复杂的页面布局,如创建网页布局、按钮和表单元素等。