作业1：
制作一个导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 1475px;
height: 50px;
border: 1px solid red;
background-color: rgba(4, 10, 74, 0.829);
}
span{
color: rgb(254, 254, 255);
font-size: 30px;
margin-left: 150px;
text-shadow: 15px 15px 15px gray;
}
</style>
</head>
<body>
<div class="box">
<span>游戏一 游戏二 游戏三 游戏四 游戏五 游戏六 游戏七 游戏八 游戏九 </span>
</div>
</body>
</html>盒子模型：
在网页布局中，为了使网页中各个元素能合理地进行组织，通过研究总结出了一套完整的、有效的原则和规范，这就是盒子模型。
盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）共4个部分组成。如下图：
盒子实际上是由“--内容(content)--内边距(padding)---边框(border)---外边距(margin)----”组成，可以通过设定盒子的border、padding和margin来实现各种各样的排版效果。另外，也不是用<div>定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。网页上的表格、图片、文字等，从盒子模型的角度就是大大小小的盒子排列或嵌套在一起的。
这是一个标准的盒子模型，网页正是由这些盒子模型组成，在w3c中，盒子模型被定义为一个元素所占用的网页空间，盒子里面是内容区，使用宽高来定义大小。
.box{
width:100px;
height:80px;
}
边框使用border属性，内容区和边框之间为内边距padding，边框外部为外边距maegin
.box{
width:100px;
height:80px;
border:1px solid red;
padding:18px;
margin:18px;
}盒子有块级（block）和行内（inline）之分，可以通过display属性设置，block元素独立占据一行；inline只占用内容区域的大小且不能设置宽高，如需要宽高，可将其改为inline-block（行内块级）。
.box{
display:block;
}
- border-color：指定边框的颜色，设置方法和color属性一样，可以可以采用颜色名称和十六进制两种方式设置。
- border-width：指定边框的粗细程度
- border-style：指定边框的类型。可以设置none、hidden、dotted、dashed、solid、double等值。
border-left-color:(左边框颜色)
border-left-width:(左边框宽度)
border-left-style:(左边框样式)
border-left:2px solid red (宽度 类型 颜色)
border:10px solid red (上下左右10px红色边框）
border-left-color:(左边框颜色)
border-left-width:(左边框宽度)
border-left-style:(左边框样式)
border-left:2px solid red (宽度 类型 颜色)
border:10px solid red (上下左右10px红色边框）如果两个盒子上下相邻，它们的实际外边距是两个margin中较大的一个。外边距被折叠，给它们设置浮动或者展示方式改为inline-block即可。
.box1,.box2{
display:inline-block
}如果父元素没有指定高度，子元素设置了浮动，会导致父元素高度“塌陷”消失，给父元素设置overflow：hidden即可。
.box2,.box3,.box4{
float:left;
}
.box1{
overflow:hidden;
}如果给盒子设置了背景色，padding区域会被上色，而border不会。给盒子设置了鼠标悬停状态时，padding和border区域会受影响。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
