5.1盒模型的定义
盒模型（Box Model）是CSS中用于描述文档中元素如何根据其样式和布局规则占据空间的一个核心概念。它规定了元素的宽度和高度，以及这些尺寸如何受到边框（border）、内边距（padding）和外边距（margin）的影响。理解盒模型对于进行有效的网页布局和设计至关重要。
默认情况下盒子的边框是“无”，背景色是透明的，所以在默认情况下看不到盒子。内边距、边框和外边距这些属性都是可选的，默认值都是0。边框的作用就是在内边距和外边距之间创建一个隔离带，以避免视觉上的混淆。
5.2 CSS元素的高度和宽度
示例：元素尺寸设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒模型</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
width: 100px;
height: 80px;
border: 6px red solid;
padding: 30px;
margin: 10px;
float: left;
}
img{
width: 100px;
height:80px;
border: 10px;
}
</style>
</head>
<body>
<p>盒模型本质是一个盒子，外边距10px，内边距30px，边框6px的红色实线；盒子左浮动在同一行</p>
<div><img src="img/style.jpg"></div>
<div><img src="img/style.jpg"></div>
</body>
</html>
5.2.1 盒模型的宽度
盒模型的宽度 = 左外边距 (margin-left) + 左边框(border-let) + 左内边距(padding-left) + 内容宽度(width) + 右内边距(padding-right) + 右边框(border-right) + 右外边距(margin-right)。
5.2.2 盒模型的高度
盒模型的高度 = 上外边距(margin-top) + 上边框(border-top) + 上内边距(padding-top) + 内容高度(height) + 下内边距(padding-bottom) + 下边框(border-bottom) + 下外边距(margin-bottom)。
默认情况下，块级元素可以设置宽度和高度，但行级元素是不能设置的。
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>块级元素和行级元素的宽度与高度</title>
<style type="text/css">
.ap{
padding: 50px;
margin: 40px;
width: 200px;
height: 100px;
border: 10px red solid;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="ap">这是 div块级元素,可设置宽度和高度</div>
<br /><br />
<span class="ap">这是 span 行级元素,不能设置宽度和高度</span>
</body>
</html>
5.3 边距设置和边框设置
margin-border-padding模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上->右->下->左的顺序(顺时针)。
5.3.1 外边距设置
外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top 、margin-righl、margin-bottom、margin-left，也可以用 margin 属性一次性设置所有外边距。
5.3.1.1 上外边距
- 语法：margin-top : length | percent | auto
- 参数：length 包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对的高度。auto值为自动提取边距值，是默认值。
- 说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元的 height属性或width属性，或者设定 position属性为absolute。
5.3.1.2 右外边距
- 语法：margin-right : length | percent | auto
- 参数：同margin-top
- 说明：同margin-top
5.3.1.3 下外边距
- 语法：margin-bottom : length | percent | auto
- 参数：同margin-top
- 说明：同margin-top
5.3.1.4 左外边距
- 语法：margin-left : length | percent | auto
- 参数：同margin-top
- 说明：同margin-top
5.3.1.5 外边距
- 语法：margin : length | percent | auto
- 参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。
- 说明：设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外
距)、margin-bottom下外边距)、margin-le(左外边距)，外边距始终是透明的。
如果只提供1个参数，将应用于全部的外边距。
如果提供2个参数，第1个参数应用于上、下外边距，第2个参数应用于左、右外
边距。如果提供3个参数，第1个参数应用于上外边距，第2个参数应用于左、右外边距，3 个参数应用于下外边距。
例如：外边距的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style type = "text/css" >
div{
border:solid #0000FF 1px;
width : auto ;
margin : 5px ;
float :left ;
}
.margin1{
background-color : #9F6 ;
border:none;/*无边框*/
width : 200px ;
height : 80px;
margin :0px 15px 5px 30px;
}
.margin2{
background-color : yellow ;
border : none ;
width :200px ;
height : 80px ;
margin :5px 30px 15px;
}
.margin3{
background-color : lightgreen ;
border : none ;
width : 200px ;
height : 80px ;
margin : 10px 30px;
}
.margin4{
background-color :#FC0 ;
border : none ;
width :200px ;
height : 80px ;
margin : 15px;
}
</style>
</head>
<body>
<div>
<div class="margin1">上、右、下、左外边距分别为:0px、15px、5px、30px</div>
</div>
<div>
<div class="margin2">上外边距为:5px,下外边距为:15px,左右外边距为:30px</div>
</div>
<div>
<div class="margin3">上、下外边距为10px,左、右外边距为:30px</div>
</div>
<div>
<div class="margin4">上、下、左、右外边距均为:15px</div>
</div>
</body>
</html> 
5.3.2 外边距的合并
盒子与盒子之间的外边距相遇会互相影响
-
5.3.2.1 行级元素外边距合并
行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和
例如：设置行级元素之间的外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置行级元素之间的外边距</title>
<style type = "text/css" >
* {
margin : 50px ;
}
.hbl{
background-color : yellow ;
margin-right :20px ;
padding:30px;
}
.hb2{
background-color :lightpink ;
margin-left : 30px ;
padding : 30px;
}
</style>
</head>
<body>
<span class="hbl">黄色span</span>
<span class="hb2">粉红色span</span>
</body>
</html> 
-
5.3.2.2 块级元素外边距合并
块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者
例如：设置垂直 相遇块级元素之间的外边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置垂直 相遇块级元素之间的外边距</title>
<style type = "text/css" >
* {
margin : 50px ;
}
.div1{
background-color : yellow ;
margin-bottom :30px ;
padding:30px;
}
.div2{
background-color :lightpink ;
margin-top : 30px ;
padding : 30px;
}
</style>
</head>
<body>
<div class="div1">黄色 div</div>
<div class="div2">粉红色 div</div>
</body>
</html>
5.3.3 内边距设置
内边距（padding）是指元素内容区域（content area）与元素的边框（border）之间的空间。你可以通过设置内边距来增加元素内部的空间，使内容更加宽松。内边距的设置可以通过padding属性来实现，该属性可以应用于所有元素。padding属性接受length值或percent值，内边距不可以使用负值。
基本用法
-
单个值 ：如果提供一个值，它将被应用于所有的四个方向（上、右、下、左）。
css
.element { padding: 10px; /* 上、右、下、左 的内边距都是 10px */ } -
两个值 ：如果提供两个值，第一个值将被应用于顶部和底部，第二个值将被应用于右侧和左侧。
css
.element { padding: 10px 20px; /* 上下内边距为 10px，左右内边距为 20px */ } -
三个值 ：如果提供三个值，第一个值将被应用于顶部，第二个值将被应用于右侧和左侧，第三个值将被应用于底部。
css
.element { padding: 10px 20px 30px; /* 上内边距为 10px，左右内边距为 20px，下内边距为 30px */ } -
四个值 ：如果提供四个值，它们将分别被应用于顶部、右侧、底部和左侧。
css
.element { padding: 10px 20px 30px 40px; /* 上内边距为 10px，右内边距为 20px，下内边距为 30px，左内边距为 40px */ }
5.3.4 边框设置
元素外边距内就是元素的边框(border)，它是围绕内边距和元素内容的一条或多条线,在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bottomborder-lef 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用border属性，可以创建出更佳的边框效果，还可以应用于任何元素。border属性设置通常有3种：样式(border-style)、宽度(border-width)和颜色(border-color)。
1.上边框
- 语法：border-top: border-style | border-width | border-color
- 参数：该属性是复合属性。需要通过参数设置来实现。
2.下边框
- 语法:border-bottom: border-style | border-width | border-color
- 参数:该属性是复合属性。需要通过参数设置来实现
3.左边框
- 语法: border-left: border-style | border-width | border-color
- 参数: 该属性是复合属性。需要通过参数设置来实现。
4.右边框
- 语法: border-right: border-style l border-width l border-color
- 参数: 该属性是复合属性。需要通过参数设置来实现。
5 边框样式
在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就不会显示。
border-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认(initial)和无边框(none)。属性值说明见下表
6 边框宽度
在CSS中，宽度是通过border-width属性来设置边框粗细的。
与 border-style 属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输入lengt 确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。属性值说明见下表。
7 边框颜色
在 CSS中，边框颜色是通过 border-color属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的border-style设置为none或者 border-width设置为0，本属性将失去作用。
5.3.5 新增边框属性
5.3.5.1圆角边框
border-radius：设置边框四个角有弧度成为圆角，需要设置相关参数。
例如：
/* 设置所有角的圆角半径为 10px */
.box {
border-radius: 10px;
}
5.3.5.2阴影边框
box-shadow ： 属性用于给元素添加阴影效果。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影边框</title>
<style type= "text/css" >
div{
margin : 100px ;
border :2px solid blue ;
box-shadow:-15px -10px 50px red ;
}
</style>
</head>
<body>
<div>利用 box-shadow 属性设置边框的红色阴影。其中阴影向左偏移 15 像素,向上偏移20像素,模糊距离为 50 像素。
</div>
</body>
</html>
助记：box-shadow:-15px -10px 50px red ;
上负下正 左负右正
解析：向上偏移为负，向下偏移为正，向左偏移为负，向右偏移为正。
5.3.5.3图片绘制边框
border-image：设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持。
例如：图片边框的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片绘制边框</title>
<style type="text/css">
div{
margin:100px;
border: 6px red solid;
border-image: url(img/border.jpg) 5 10 round;
}
</style>
</head>
<body>
<div>利用border-image属性设置图片边框铺满效果上下向内偏移5像素，左右向内偏移10像素</div>
</body>
</html>运行效果
5.4 CSS元素的定位
前面所讲的盒模型都是标准流情况下可用的，但是盒模型仅有的几种排版对布局有很大的限制，导致元素无法在页面中随意地摆放，因此，我们需要使用盒子的定位(position)来增加排版的灵活性和适应性。
定位(position)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position 属性值有4个。
语法：position: static | relative | absolute | fixed
参数：static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。ab-solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom 和lett属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top、right、bottom 和left 属性辅助完成。
5.4.1 static 定位
statc是 HTML 元素的默认值，不受top、right、bottom 和left 属性影响，元素出现在正常的文档流中。
示例：静态定位的应用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>static定位</title>
<style type ="text/css" >
.father{
border:2px solid red ;
width:300px;
height:250px;
}
.son1{
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="son1">子盒子1:无定位的盒子
<h2>静态定位的盒子</h2>
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html>运行效果
5.4.2 relative定位
relative不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。
示例：相对定位的应用
在5.4.1 示例程序中把son1的CSS添加positon、top和 left 属性，即可把静态定位改为相对定位。
.son1{
border:2px double red ;
background-color:yellow;
width:200px;
height:80px ;
position: relative;
top: 10px; left:30px;
}运行效果
5.4.3 absolute定位
absolute脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。
-
5.4.3.1 相对浏览器绝对定位
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type ="text/css" >
.father{
border:2px solid red ;
width:300px;
height:250px;
}
.son1{
border:2px double red ;
background-color:yellow;
width:200px;
height:80px ;
position: absolute;
top: 20px; right:20px;
}
.son2{
border:2px double red ;
width:200px;
height:25px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="father">父盒子:无定位
<div class="son1">子盒子1:盒子
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html> 子盒子1设置position属性为absolute
-
5.4.3.2 相对父盒子绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对父盒子定位</title>
<style type ="text/css" >
.father{
border:2px solid red ;
width:300px;
height:250px;
position: relative;
}
.son1{
border:2px double red ;
background-color:yellow;
width:200px;
height:80px ;
position: absolute;
top: 20px; right:20px;
}
.son2{
border:2px double red ;
width:200px;
height:25px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="father">父盒子:无定位
<div class="son1">子盒子1:盒子
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html>父盒子position属性设置为relative，子盒子1的position属性设置为absolute
5.4.4 fixed定位
释义：fixed 类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置，相对于浏览器窗口是固定不变的。
例如：固定定位的应用
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type ="text/css" >
.father{
border:2px solid red ;
width:300px;
height:250px;
}
.son1{
border:2px double red ;
background-color:yellow;
width:200px;
height:80px ;
position: fixed;
bottom: 10px; right:30px;
}
.son2{
border:2px double red ;
width:200px;
height:25px;
margin-top:50px;
}
</style>
</head>
<body>
<div class="father">父盒子:无定位
<div class="son1">子盒子1:固定定位,相对浏览器右边水平偏离 10像素,相对浏览器上边垂直偏离 30 像素
</div>
<div class="son2">子盒子2:无定位的盒子
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
运行效果
上述示例中，子盒子1设置了fixed定位，而父盒子和子盒子2没有设置，所以子盒子1在滚动条的移动中，其位置不变。
5.5 CSS元素的浮动
在CSS的盒模型布局上，除了使用定位避免按照标准流的方式进行排版的限制性问题，还可以使用浮动来避免。而使用浮动(oat)和清除(clear)属性设置，可以解决各种页面错位的现象。
5.5.1 盒子的浮动添加
一在CSS中，通过float属性可以实现元素的浮动。这个属性可以让元素在父容器中向左或向右移动，直到碰到父容器的边界或其他浮动元素。浮动元素会脱离标准文档流，这意味着它们不会占据原本在文档流中的位置，周围的元素会根据浮动后的布局进行排列。
例如：right浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加盒子浮动</title>
<style type="text/css">
.father{
background-color: #FFCCFF;
border: 2px solid red;
padding: 5px;
}
.father div{
width: 100px;
height: 20px;
padding: 10px;
margin: 10px;
border: 2px dashed blue;
background-color: #CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="father">
<h2>父盒子</h2>
<div style="float:right">右浮动盒子1</div>
<div>标准盒子2</div>
<div>标准盒子3</div>
<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定</p>
</div>
</body>
</html>
其中盒子1是向右浮动后的盒子，盒子2和盒子3是标准盒子。
5.5.2 盒子的浮动清除
元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用clear 属性完成。
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。
- 语法：clear : left | right | both | none
- 参数: left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，即不允许右边有浮动对象；both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；默认值 none。
- 要清除盒子的浮动，通常意味着解决由于子元素浮动导致的父元素高度塌陷问题
下面将通过例题清楚盒子浮动问题
例如：
对5.5.1盒子浮动的添加 的例题中的盒子1、2、3全部设置为右浮动
三个盒子设置右浮动后，文字元素因为没有设置右浮动而上升至原来盒子1的位置了，形成了元素叠加的情况。可在.father p中 加入 clear : both ;
如下：即可清除文字元素的浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除盒子浮动</title>
<style type="text/css">
.father{
background-color: #FFCCFF;
border: 2px solid red;
padding: 5px;
}
.father div{
width: 100px;
height: 20px;
padding: 10px;
margin: 10px;
border: 2px dashed blue;
background-color: #CCFFFF;
}
.father p{
border: 2px dotted green;
background-color: #FFFF399;
clear: both;
}
</style>
</head>
<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>css中，有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定</p>
</div>
</body>
</html> 
5.6 综合案例——昵心美食空间
案例要求：
页面要求用 div 布局，总的 div-a有上下4行区域，分别为 div-banner、div-menu、div-main 和 div-bottom。而 div-main 区域又分为 div-left、div-middle、div-right 三列区域div-middle 区域上中下分为 div-one、div-two、div-three 三行小区域，如下图所示
运行效果：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昵心美食空间</title>
<style type="text/css">
*{
background-color:#FFFF99;
}
a{
color: red;
}
.all{
width: 700px;
height: 650px;
margin: 10px auto;
padding: 5px;
background-image:url(img/bg1.JPG);
}
.banner{
width: 700px;
height: 70px;
}
.menu{
width: 690px;
height: 40px;
padding: 5px;
}
.main{
width: 700px;
height: 450px;
margin: 5px Opx;
position: relative;
}
.left,.right{
width: 150px;
height: 440px;
border: 1px solid #999;
float: left;
}
.middle{
width: 384px;
height: 450px;
margin: 0px 5px;
float: left;
font-size: 20px;
font-family: "楷体";
font-weight: 700;
color: #0000FF;
}
.one{
width: 380px;
height: 155px;
border: 1px solid #999;
}
.two{
width: 255px;
height: 100px;
border: 5px double red;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 25px;
}
.three{
width: 380px;
height: 135px;
border: 1px solid #999;
}
.bottom{
width: 700px;
height: 70px;
}
</style>
</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">
<h1>昵心美食空间</h1>
</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" >
<marquee direction="up" >
<img src="img/good_1.jpg" width="150px" height="140px" />
<img src="img/good_2.jpg" width="148px" height="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>
扫一扫
2878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
