5.1 盒模型的定义
盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：
1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。
2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
3. 边框（Border）： 包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。
4. 外边距（Margin）： 元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。
盒模型的总宽度和高度计算公式为：
总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。
5.2 CSS元素的高度和宽度
在CSS中，设置元素的高度和宽度是进行页面布局的基础。CSS提供了控制元素大小的相关属性和计算规则。以下是关于元素高度和宽度的详细信息：
1. 高度（height）和宽度（width）属性
height 用于设置元素的高度。
width 用于设置元素的宽度。
这些属性可以使用不同的单位来设置大小，比如像素（px）、百分比（%）、视口单位（vw、vh）等。
2. 默认行为
对于 块级元素（如 div），默认宽度是父元素宽度的 100%，高度则是根据内容自动扩展。
对于 内联元素（如 span），默认情况下 height 和 width 属性是无效的，因为它们根据内容的尺寸自动调整。
3. 单位
像素（px）：绝对单位，表示固定的大小。例如，width: 300px; 表示元素宽度为300像素。
百分比（%）：相对于父元素的尺寸。例如，width: 50%; 表示元素宽度是父元素宽度的50%。
视口单位（vw、vh）：
1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
例如，width: 50vw; 表示元素宽度是视口宽度的50%。
4. 盒模型对宽度和高度的影响
默认情况下，width 和 height 属性只影响内容区域的大小，不包括内边距、边框和外边距。即使你指定了宽度和高度，实际显示的元素大小可能会因为这些额外的空间而大于预期。
举例：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
在默认的 盒模型（boxsizing: contentbox）中，元素的 总宽度 和 总高度 计算如下：
总宽度 = 内容宽度 (200px) + 左右内边距 (10px + 10px) + 左右边框 (5px + 5px) = 230px
总高度 = 内容高度 (100px) + 上下内边距 (10px + 10px) + 上下边框 (5px + 5px) = 130px
5. boxsizing属性
使用 boxsizing 属性可以改变盒模型的计算方式：
boxsizing: contentbox;（默认值）：width 和 height 只应用于内容区域，不包含内边距和边框。
boxsizing: borderbox;：width 和 height 包括内容区域、内边距和边框的总和。这意味着设置的宽度和高度是元素的总尺寸，而不是仅仅是内容区域的尺寸。
例如：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
boxsizing: borderbox;
}
在这种情况下：
总宽度 仍然是 200px（宽度包括了内边距和边框）。
总高度 仍然是 100px。
6. 自动高度
当 height 未指定或设置为 auto 时，元素会根据其内容自动调整高度。
7. 最小和最大宽度/高度
minwidth 和 minheight：设置元素的最小宽度和最小高度，即使内容较少，也不会缩小到低于该值。
maxwidth 和 maxheight：设置元素的最大宽度和最大高度，即使内容过多，也不会超过该值。
例如：
div {
width: 100%;
minwidth: 300px;
maxwidth: 800px;
}
此时，元素的宽度会根据父容器调整，但不会小于 300px，也不会超过 800px。
8. 溢出内容处理（overflow）
如果内容超过了指定的宽度和高度，可以使用 overflow 属性控制内容如何处理：
overflow: visible;（默认）：内容不受限制，会溢出元素框。
overflow: hidden;：超出部分会被裁剪掉。
overflow: scroll;：如果内容超出，会显示滚动条。
overflow: auto;：如果内容超出，会自动显示滚动条，否则不会。
结论
通过控制元素的高度和宽度，结合盒模型的理解，可以精确地设计页面的布局和元素的大小。
5.3 边距设置和边框设置
在CSS中，边距（margin） 和 边框（border） 是用来控制元素外观和布局的重要属性。它们决定了元素之间的距离、元素的外观以及元素在页面中的布局方式。
1. 边距设置（Margin）
边距是元素边框与其他元素或父容器之间的空白区域。边距是透明的，不会有背景色或其他内容。通过设置边距，可以调整元素与其他元素之间的距离。
边距的属性
margin：用于设置所有四个方向（上、右、下、左）的边距。
margintop：设置元素上方的边距。
marginright：设置元素右侧的边距。
marginbottom：设置元素下方的边距。
marginleft：设置元素左侧的边距。
边距的缩写用法
可以通过单个 margin 属性设置四个方向的边距值。根据不同的参数数量，有不同的规则：
/ 单值语法：四个方向的边距相同 /
margin: 20px;
/ 双值语法：第一个值为上下边距，第二个值为左右边距 /
margin: 20px 10px;
/ 三值语法：第一个值为上边距，第二个值为左右边距，第三个值为下边距 /
margin: 20px 10px 30px;
/ 四值语法：按顺时针方向设置边距，依次为上、右、下、左 /
margin: 20px 10px 30px 15px;
边距的取值
固定值（px, em, rem等）：例如 margin: 10px;，指定边距为固定像素。
百分比（%）：边距值是父元素宽度的百分比。例如，margin: 5%; 表示边距为父元素宽度的 5%。
自动（auto）：通常用于水平居中。元素的左右 margin 设置为 auto 时，它会自动分配空间，保证元素水平居中。
css
div {
width: 300px;
margin: 0 auto; / 上下边距为 0，左右边距自动分配，居中元素 /
}
负边距
margin 属性也可以使用负值，这会将元素“拉近”其他元素或缩小它与其他元素的距离。
css
div {
margintop: 10px; / 将元素向上移动 10px /
}
边距合并
相邻的块级元素上下边距可能会合并成一个值，称为“边距合并（Margin Collapse）”。
例如：
<p style="marginbottom: 20px;">段落1</p>
<p style="margintop: 30px;">段落2</p>
虽然段落1的下边距是20px，段落2的上边距是30px，但它们的实际上下边距合并成30px（较大的那个值）。
2. 边框设置（Border）
边框是围绕元素内容和内边距的可见框架。边框的样式、宽度和颜色都可以通过CSS进行设置。
边框的属性
border：用于同时设置边框的宽度、样式和颜色。
borderwidth：设置边框的宽度。
borderstyle：设置边框的样式（如实线、虚线等）。
bordercolor：设置边框的颜色。
边框的缩写用法
border 是 borderwidth、borderstyle 和 bordercolor 的简写属性。必须指定边框样式，颜色和宽度为可选项。
css
/ 简写方式 /
border: 2px solid black;
/ 单独设置边框的宽度、样式、颜色 /
borderwidth: 2px;
borderstyle: solid;
bordercolor: black;
边框样式（borderstyle）
borderstyle 用于设置边框的样式，有以下几种常见值：
none：无边框。
solid：实线边框。
dashed：虚线边框。
dotted：点线边框。
double：双线边框。
groove：凹槽边框，看起来像被雕刻的效果。
ridge：凸起的边框。
inset：看起来像嵌入页面中的边框。
outset：看起来像凸起于页面上的边框。
边框宽度（borderwidth）
borderwidth 用来设置边框的厚度，可以使用像素、百分比等单位，也可以使用关键字值：
thin（细）、medium（中等，默认值）、thick（厚）。
例如：
css
borderwidth: 5px;
borderwidth: thin;
边框颜色（bordercolor）
bordercolor 用来指定边框的颜色，可以用颜色名称、RGB、HEX等方式。
css
bordercolor: red;
bordercolor: ff0000;
单独设置各边的边框
可以分别为元素的四条边设置不同的边框属性：
bordertop
borderright
borderbottom
borderleft
例如：
css
/ 设置上边框为红色实线，宽度为3px /
bordertop: 3px solid red;
/ 为四条边设置不同的颜色 /
bordertopcolor: red;
borderrightcolor: blue;
borderbottomcolor: green;
borderleftcolor: yellow;
圆角边框（borderradius）
borderradius 用于创建圆角边框，允许元素的边角变得圆滑。
css
/ 创建 10px 的圆角 /
borderradius: 10px;
/ 创建椭圆形的圆角：水平和垂直方向半径不同 /
borderradius: 50px 25px;
边距与边框的区别
边距（margin） 是元素外部的空白区域，影响元素与其他元素的距离。
边框（border） 是围绕元素内容和内边距的可见线条，影响元素的外观。
理解如何使用 margin 和 border，可以有效地控制元素的布局和视觉表现。
5.4 CSS元素的定位
5.4.1 static 定位
<!--示例5.12程序-->
<! DOCTYPE html>
<html>
<head>
<meta charset="uuf-8"/><title>示例5.12</titlea<style type="texV/css">. father|
border:2px solid red;
width:300px;
height:250px;
.sonl/
border:2px double red;background-color:yellow;width:200px;
height:80px;
位
son2/
border:2px double red;
width:200px;
height:25px;
margin-top:50px;
</style>
</head>
<body>
<div class="father">父盒子：无定位
<div class="sonl">子盒子 1:无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html>5.4.2 relative定位
relative不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身的top、right、bottom和left属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。
5.4.3 absolute定位
5.4.3.1 相对浏览器绝对定位
border: 10px #1546ff solid;
/* 5.3.1 */
margin: 20px;
/* 5.3.2.1 */
display: inline;
/* 5.3.2.2 */
/* 默认为块级 */
display: block;
5.4.3.2 相对父盒子绝对定位
.sonl{
border:2px double red;background-color:yellow;width:200px;
height:80px;
position:relative;
top:80px;
top:100px;
/*position:absolute;
bottom:20px;
5.4.4 fixed定位
.sonl{
border:2px double red;background-color:yellow;width:200px;
height:80px;
position:relative;
top:80px;
top:100px;
/*position:absolute;
bottom:20px;
right:40px;*/
position:fixed;
bottom:2px;
right:40px;
}
son2{
border:2px double red;
width:200px;
height:25px;
margin-top:50px;
5.5 CSS元素的浮动
5.5.1 盒子的浮动添加
任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其float属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延申，大小将由其内容的宽度而定。
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right;">盒子1</div>
<div style="float:right;">盒子2</div>
<div style="float:right;">盒子3</div>
<p style="clear: both;"css,有一个float属性>
</p>
</div>5.5.2 盒子的浮动清除
元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想
要清除这种影响，需要使用clear属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最
好工具。
语法：clear:left | right | both I none
参数：left 清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；默认值none。
5.6综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昵心美食空间</title>
<link type="text/css" rel="stylesheet" href="6.css">
</head>
<body>
<div class="all">
<div class="banner">
<img src="img/banner.jpg" width="700px" height="70px" />
</div>
<div class = "menu">
<img src="img/menu.jpg" width=" 690px" height="40px" />
</div>
<div class="main">
<div class ="left">
<marquee direction="up">
<img src="img/mm_1.jpg" width=" 150px" height=" 140px” />
<img src="img/mm_2.jpg" width=" 150px" height=" 140px" />
<img src="img/mm_3.jpg" width=" 150px" height=" 140px" />
</marquee>
</div>
<div class="middle" >
<div class="one" >
<img src="img/font.jpg" width="25px"height="25px"/>为您推荐
<br><br>
<img src="img/x_1.jpg" width="80px" height="40px"/>
<img src="img/x_2.jpg" width=" 80px" height=" 40px" />
<img src="img/x_3.jpg" width="80px" height=" 40px" />
<img src="img/x_4.jpg" width=" 80px" height=" 40px" />
<img src="img/x_5.jpg" width="80px" height=" 40px" />
<img src="img/x_6.jpg" width=" 80px" height=" 40px" />
</div>
<center>
<div class="two">
<hl>昵心美食空间</hl>
</div>
</center>
<div class="three" >
<img src="img/font.jpg" width="25px" height="25px" />团购信息
<br>
<a href="#">1.火锅团购</a><br>
<a href="#">2.烧烤团购</a><br>
<a href="#">3.自助餐团购</a><br>
<a href="#">4.新春特惠</a>
</div>
</div>
<div class ="right" >
<mnarquee direction = "up" >
<img src="img/good_1.jpg" width=" 150px" height =" 140px" />
<img src="img/good_2.jpg" width=" |48px" heigh=" 140px" />
<img src="img/good_3.jpg" width=" 148px" height=" 140px" />
</marquee>
</div>
</div>
<div class="bottom">
<hr color="#0000FF">
<center style="font-family:'楷体'";>版权所有©昵心美食空间<br/>
地址:江门市大学路XXX号邮编:500000 电话:0750-9999999</center>
</div>
</div>
</body>
</html>运行截图
