5.1 盒模型的定义
Web页面上大部分的元素都可以看作一个盒子，盒子有所有网页的对象（段落，列表，标题，图片和层）。
盒子的结构可以看作一个矩形框，包括边框、外边距、内边距、以及元素内容，元素会指定高度和宽度范围内在页面上显示出来。
一个页面可以有很多的盒子。
5.2 CSS元素的高度和宽度
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:10px;
padding:10px;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
盒模型的宽度
盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距(padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）。
盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top)+上内边距（padding-
top)+内容高度（height)+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）。
5.3 边距设置和边框设置
1.外边框设置
外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top.
margin-right、margin-bottom、margin-left，也可以用margin属性一次性设置所有外边距。
1.上外边距
语法：margin-top:length | percent | auto
参数：length 包括长度值和长度单位，包括绝对单位和相对单位。
percent是基于父对象的高度。
auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素
的height 属性或 width属性，或者设定position 属性为absolutea
2.右外边距
语法：margin-right：length | percent | auto
参数：同margin-top。
说明：同margin-top。
3.下外边距
语法：margin-bottom：length | percent | auto
参数：同margin-top。
说明：同margin-top。
4.左外边距
语法：margin-left：length | percent | auto
参数：同margin-top。
说明：同margin-top。
5.外边距
语法：margin:length | percent | auto
参数：length包括长度值和长度单位，包括绝对单位和相对单位。
percent 是基于父对象的高度，左右外边距允许使用负数。
auto值为自动提取边距值，是默认值。
说明：设置对象四边的外边距，包括margin-top（上外边距）、margin-right（右外边距）、margin-bottom下外边距）、margin-left（左外边距），外边距始终是透明的。
如果只提供1个参数，将应用于全部的外边距。
如果提供2个参数，第1个参数应用于上、下外边距，第2个参数应用于左、右外边距。
如果提供3个参数，第1个参数应用于上外边距，第2个参数应用于左、右外边距，第3个参数应用于下外边距。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
}
img{
width: 30px;
height: 20px;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
2.外边框的合并
1.行级元素的合并
行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和
2.块级元素的合并
块级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子中外边框的较大者
3.内边框设置
元素的内边框用来控制边框和内容区之间的空白距离，并非实体，用padding属性显示
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
padding: 20px;
border-top: 10px #00ff00 solid;
border-right: 10px #ff0000 solid;
border-bottom: 10px #0000ff solid;
border-left: 10px #000000 solid;
}
img{
width: 30px;
height: 20px;
border-top: 10px #ff0000 solid;
border-right: 10px #0000ff solid;
border-bottom: 10px #00ff00 solid;
border-left: 10px #000000 solid;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
4.边框设置
元素外边距内就是元素的边框（border），它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用border-top、border-right、border-bottom border-left 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用border属性，可以创建出更佳的边框效果，还可以应用于任何元素。border属性设置通常有3种：样式（border-style)、宽度（border-width）和颜色（border-color)。
1.上边框
语法：border-top:border-style | border-width border-color
参数：该属性是复合属性。需要通过参数设置来实现。
2.右边框
语法：border-right:border-style | border-width | border-color
参数：该属性是复合属性。需要通过参数设置来实现。
3.下边框
语法：border-bottom：border-style | border-width | border-color
参数：该属性是复合属性。需要通过参数设置来实现。
4.左边框
语法：border-left:border-style | border-width | border-color
参数：该属性是复合属性。需要通过参数设置来实现。
5.边框样式
在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就
不会显示。
border-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属
性有12个值可选，包括默认（imiial)和无边框（none)。属性值说明见表。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
padding: 20px;
border-top: 10px #00ff00 solid;
border-right: 10px #ff0000 dashed;
border-bottom: 10px #0000ff dotted;
border-left: 10px #000000 double;
}
img{
width: 30px;
height: 20px;
border-top: 10px #ff0000 solid;
border-right: 10px #0000ff solid;
border-bottom: 10px #00ff00 solid;
border-left: 10px #000000 solid;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
6.边框宽度
在CSS中，宽度是通过border-width属性来设置边框粗细的
与border-style 属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输入length确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。属性值说明见表
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
padding: 20px;
border-top: 10px #00ff00 solid;
border-right: 10px #ff0000 dashed;
border-bottom: 10px #0000ff dotted;
border-left: 10px #000000 double;
}
img{
width: 30px;
height: 20px;
border-top: 10px #ff0000 solid;
border-right: thin #0000ff solid;
border-bottom: medium #00ff00 solid;
border-left: thick #000000 solid;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
7.边框颜色
在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的border-style设置为none 或者border-width设置为0，本属性将失去作用。
5.新增边框属性
1.圆角边框
border-radius：设置边框四个角有弧度成为圆角
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
padding: 20px;
border-top: 10px #00ff00 solid;
border-right: 10px #ff0000 dashed;
border-bottom: 10px #0000ff dotted;
border-left: 10px #000000 double;
border-radius: 25px;
}
img{
width: 30px;
height: 20px;
border-top: 10px #ff0000 solid;
border-right: thin #0000ff solid;
border-bottom: medium #00ff00 solid;
border-left: thick #000000 solid;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>显示效果
2.阴影边框
box-shadow：向四个边框添加一到多个阴影
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{
margin:0px;
padding:0px;
}
div{
width: 40px;
height: 30px;
border: 10px #00ff00 solid;
margin: 20px;
padding: 20px;
border-top: 10px #00ff00 solid;
border-right: 10px #ff0000 dashed;
border-bottom: 10px #0000ff dotted;
border-left: 10px #000000 double;
border-radius: 25px;
box-shadow: 15px 20px 50px #ff00ff;
}
img{
width: 30px;
height: 20px;
border-top: 10px #ff0000 solid;
border-right: thin #0000ff solid;
border-bottom: medium #00ff00 solid;
border-left: thick #000000 solid;
}
</style>
</head>
<body>
<div><img src="img/a.bmp"/></div>
<div><img src="img/bj.jpg"/></div>
</body>
</html>
显示效果
3.图片绘制边框
border-image：设置所有边框用图片显示
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片绘制边框示例</title>
<style>
div{
margin: 100px;
border: 50px solid blue;
border-image: url(img/01.jpg)5 10 round ;
}
</style>
</head>
<body>
<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5像素，左右向内偏移10像素</div>
</body>
</html>显示效果
5.4 CSS元素的定位
定位（position)的思想是，它允许你定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position 属性值有4个。
语法：position: static | relative | absolute | fixed
参数：static 是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认、又称静态定位。
relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。
absolute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom和left属性辅助完成。
fixed 是固定定位，相对于浏览器窗口进行定位，需要 top、righe、bottom、left 属性辅助完成。
1.static定位
static是HTML元素的默认值，不受top、right、bottom和left属性影响，元素出现在正常的文档流中。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.12</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>
显示效果
2.relative定位
relative 不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身的top、night、bottom 和 let 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5.12</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: relative;
top: 10px;
left: 30px;
}
.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>
显示效果
3.absolute定位
absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位:那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。
1.相对浏览器绝对定位
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS元素的定位</title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height: 200px;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: absolute; /*相对浏览器绝对定位*/
top: 10px;
left: 30px;
}
.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>显示效果
2.相对父盒子的绝对定位
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS元素的定位</title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height: 200px;
position: relative;
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: absolute;
top: 10px;
left: 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：无定位的盒子
</div>
</div>
</body>
</html>显示效果
4.fixed定位
hxed 类似于 absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置。相对于浏览器窗口是固定不变的。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS元素的定位</title>
<style type="text/css">
.father{
border: 2px solid red;
width: 300px;
height: 200px;
/* position: relative; */
}
.son1{
border: 2px double red;
background-color: yellow;
width: 200px;
height: 80px;
position: fixed;
top: 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：无定位的盒子
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>显示效果
5.5 CSS元素的浮动
1.盒子的浮动添加
语法：float：left| right| none
参数：left 元素浮动到左边（向左靠拢，则右边可以有文字环绕）
right 元素浮动到右边（向右靠拢，则左边可以有文字环绕）
默认值none就是标准流的显示状态
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例5.17</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>显示效果
2.盒子的浮动清除
元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想
要清除这种影响，需要使用clear属性完成。
立业由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最
好工具。
语法：clear： left I right | both | none
参数：left 清除左边浮动元素，即不允许左边有浮动对象；
right 清除右边浮动元素，即不允许右边有浮动对象；
Both 同时清除左右两边的浮动元素，即不允许左右两边有浮动对象；
默认值none。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例5.17</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;
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 综合案例----昵心美食空间
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>昵心美食空间</title>
<style type="text/css">
* {
background-color: #ffff99;
margin: 0;
padding: 0;
}
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 0;
position: relative;
}
.left, .right {
width: 150px;
height: 440px;
border: 1px solid #999;
float: left;
}
.middle {
width: 384px;
height: 450px;
margin: 0 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: 155px;
border: 1px solid #999;
}
.bottom {
width: 700px;
height: 70px;
}
</style>
</head>
<body>
<div class="all">
<div class="banner">
<img src="img/banner.jpg" width="700" height="70" />
</div>
<div class="menu">
<img src="img/menu.jpg" width="690" height="40" />
</div>
<div class="main">
<div class="left">
<marquee direction="up">
<img src="img/mm_1.jpg" width="150" height="140" />
<img src="img/mm_2.jpg" width="150" height="140" />
<img src="img/mm_3.jpg" width="150" height="140" " />
</marquee>
</div>
<div class="middle">
<div class="one">
<img src="img/font.jpg" width="25" height="25" />为您推荐
<br><br>
<img src="img/x_1.jpg" width="80" height="40" />
<img src="img/x_2.jpg" width="80" height="40" />
<img src="img/x_3.jpg" width="80" height="40" />
<img src="img/x_4.jpg" width="80" height="40" />
<img src="img/x_5.jpg" width="80" height="40" />
<img src="img/x_6.jpg" width="80" height="40" />
</div>
<div class="two">
<h1>昵心美食空间</h1>
</div>
<div class="three">
<img src="img/font.jpg" width="25" height="25" />团购信息
<br>
<a href="#">1.火锅团购</a><br>
<a href="#">2.烧烤团购</a><br>
<a href="#">3.自助餐团购</a><br>
<a href="#">4.新春特惠</a><br>
</div>
</div>
<div class="right">
<marquee direction="up">
<img src="img/good_1.jpg" width="150" height="140" />
<img src="img/good_2.jpg" width="148" height="140" />
<img src="img/good_3.jpg" width="148" height="140" />
</marquee>
</div>
</div>
<div class="bottom">
<hr color="#0000FF">
<center style="font-family:'楷体';">版权所有 © 昵心美食空间<br />
地址:江门市大学路XXX号，邮编:500000，电话:0750-9999999</center>
</div>
</div>
</body>
</html>显示效果
扫一扫
2073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
