5.1盒模型的定义
盒模型是 CSS定位布局的核心内容，页面中所有的元素都是放进一个容器内的，这个容器可以看成是一个盒子。可以通过 CSS 来控制这些盒子的各种显示属性，把这些盒子进行定位，完成整个页面的布局。在掌握了盒子模型以及其中每个元素的用法后，才能拥有较完善的布局观。
Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子(box)中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。
盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding)，以及元素内容(content)，元素会在指定的高度和宽度范围内在页面上显示出来。
一个页面由许多这样的盒子组成，这些盒子层层嵌套，互相影响，设计者在布局网页和定位 Web元素时要充分考虑到这些要素，才能更自如地摆弄这些盒子。
5.2 CSS元素的高度和宽度
当设计者布局一个网页时，网页最终的宽度和高度会超出预计的数值，这是因为盒模型的宽度或高度计算误差造成的。指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}/*全局声明*/
div{
width: 40px;
height: 30px;
border: 10px solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}/*全局声明*/
img{
width: 40px;
height: 30px;
}
div{
width: 40px;
height: 30px;
border: 10px solid;
margin: 20px;
}
</style>
</head>
<body>
<div><img src="img/photo.jpg"/></div>
<div><img src="img/photo.jpg"/></div>
</body>
</html>
5.2.1 盒模型的宽度
盒模型的宽度=左外边距(margin-left)+左边框(border-lef)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-night)+右外边距(margin-right)。
5.1.2 盒模型的高度
盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)。
5.3 边距设置和边框设置
mrgin-border-padding 模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding)，实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上一右→下一左的顺序(顺时针)
5.3.1 外边距设置
外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin~nght、margin-bottom、margin-left，也可以用 margin 属性一次性设置所有外边距。
5.3.1.1 上外边距
语法:margin-top:length|percent|auto
参数;lengt 包括长度值和长度单位，包括绝对单位和相对单位。pereent是基于父对复
的高度。auo 值为自动提取边距值，是默认值。
5.3.1.2 右外边距
语法:margin-right:lengthlpercentlauto
参数：同margin-top。
说明:同 margin-top。
5.3.1.3 下外边距
语法:margin-bottom:lengthlpercentlauto
参数:同 margin-top。
说明:同 margin-top。
5.3.1.4 左外边距
语法:margin-left:lengthlpercent l auto
参数:同 margin-top。
说明:同 margin-top。
5.3.1.5 外边距
语法:margin:lengthlpercentlauto
参数:length 包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto 值为自动提取边距值，是默认值。
说明:设置对象四边的外边距，包括 margin-top(上外边距)、margin-right(右外边距)、margin-bottom 下外边距)、margin-lef(左外边距)，外边距始终是透明的。
5.3.2 外边距的合并
通常，盒子与盒子之间的外边距相遇会互相影响，必须对 margin 属性深人了解，才能精确地控制盒子的位置。
5.3.2.1 行级元素外边距合并
行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例5.5</title>
<style type="text/css">
*{
margin : 50px ;
}
.hb1{
background-color:yellow ;
margin-right:20px ;
padding:30px ;
}
.hb2{
background-color :lightpink;
margin-left : 30px ;
padding:30px ;
}
</style>
</head>
<body>
<span class="hb1">黄色 span</span><span class="hb2">粉红色 span</span>
</body>
</html>
5.3.2.2 块级元素外边距合并
块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例5.6</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 属性表示，类似于 HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，paddimg属性接受 length 值或 percent 值，区别于外边距，内边距不可以使用负值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}/*全局声明*/
img{
width: 40px;/*盒子宽度一致*/
height: 30px;
}
div{
width: 40px;
height: 30px;
border: 10px solid;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div><img src="img/photo.jpg"/></div>
<div><img src="img/photo.jpg"/></div>
</body>
</html>
5.3.4 边框设置
元素外边距内就是元素的边框(bonder)，它是围绕内边距和元素内容的一条或多条线在内边距和外边距之间。边框的四条边分别用 border-top、border-right、border-botonbonder-let 表示，它们的属性与内外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性。
边框作为盒模型的某个组成部分，边框的CSS样式设置将直接影响到盒子的尺寸和外观。而通过使用 border属性，可以创建出更佳的边框效果，还可以应用于任何元素。bonde属性设置通常有3种:样式(border-style)、宽度(border-width)和颜色(border-color)。
5.3.4.1上边框
语法:border-top:border-style l border-width l border-color
参数:该属性是复合属性。需要通过参数设置来实现。
border-top: 10px #00ff00 solid;
5.3.4.2右边框
语法:border-right:border-stylelborder-widthl border-color
参数:该属性是复合属性。需要通过参数设置来实现。
border-right: 10px #ff00ff solid;
5.3.4.3下边框
语法:border-bottom:border-style l border-width l border-color
参数:该属性是复合属性。需要通过参数设置来实现。
border-bottom: 10px #ff0000 solid;
5.3.4.4 左边框
语法:border-left:border-style l border-width l border-color
参数:该属性是复合属性。需要通过参数设置来实现。
border-left: 10px #0000ff solid;
5.3.4.5 边框样式
在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在Web页面中边框就不会显示。
border-style 是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认(initial)和无边框(none)。
border-top: 10px #00ff00 solid;
border-bottom: 10px #ff0000 dotted;
border-left: 10px #0000ff double;
border-right: 10px #ff00ff dashed;
5.3.4.6 边框宽度
在CSS中，宽度是通过border-width 属性来设置边框粗细的。
与 border-style 属性相同，border-widùh也是一个复合属性。设置边框宽度时，可以直接输入 length 确定长度值，如5px或2cm，但不可以为负值;或者选择系统预设属性值。
5.3.4.7 边框颜色
在 CSS 中，边框颜色是通过bonder-eolor 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对的 border-style 设置为none 或者 border-width 设置为 0，本属性将失去作用。
div{
width: 40px;
height: 30px;
border-top: 10px #00ff00 solid;
border-bottom: thin #ff0000 dotted;
border-left: medium #0000ff double;
border-right: thick #ff00ff dashed;
margin: 20px ;
padding: 20px;
}
5.3.5 新增边框属性
CSS3 中对边框新增了几个属性，设计者可以通过这些属性创建圆角边框、添加边框阴影、使用图片来绘制边框等。
5.3.5.1圆角边框
border-radius:设置边框四个角有弧度成为圆角，需要设置相关参数。
border-radius: 25px;
5.3.5.2阴影边框
box-shadow:向四个边框添加一到多个阴影，需要设置相关参数
box-shadow:-15px 20px 50px #00ffff ;/*右偏移量 上偏移量 模糊距离 颜色*/
5.3.5.3图片绘制边框
border-image:设置所有边框用图片显示，需要嵌人相关图片，但是部分浏览器不支持此属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
margin: 100px;
border: 50px solid blue;
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 属性值有4个。
i奖:position: statie l relative l absolute l fixed
参数:sate 是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives 是相对定位，生成相对定位的元素，相对于其正常位置进行定位。solute 是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom 和let属性辅助完成。
5.4.1 static 定位
statie 是 HTML元素的默认值，不受top、right、bottom 和let 属性影响，元素出现在正常的文档流中。
<!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;
}
.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 不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身的top、right、bottom 和 left 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。在例 5. 12 示例程序中把 sonl的 CSS 添加 position、top和left 属性，即可把静态定位改为相对定位。
<!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: 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:relative定位
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html> 
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: 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:absolute定位
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html>
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: 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:absolute定位
</div>
<div class="son2">子盒子2:无定位的盒子
</div>
</div>
</body>
</html>
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;
/*position: relative;*/
}
.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:fixed定位
</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 />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</body>
</html>
5.5 CSS元素的浮动
在CSS的盒模型布局上，除了使用定位避免按照标准流的方式进行排版的限制性问题还可以使用浮动来避免。而使用浮动(oat)和清除(clear)属性设置，可以解决各种页面错位的现象。
5.5.1 盒子的浮动添加
语法:float:leftl rightl none
参数:let 元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕;right 元素浮动到右边、即向右侧靠拢，左边可以有文字环绕;默认值mone 就是标准流通常的显示状态。
<!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 中,有一个 foal 属性,默认为 none,也就是标准流通常的情况。若果将 noat 属性的值设置为le 或 nighl,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是
根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html>
5.5.2 盒子的浮动清除
语法:clear:left l rightl both l none
参数:len 清除左边浮动元素，即不允许左边有浮动对象;ght清除右边浮动元素，即不允许右边有浮动对象;Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象;默认值 none。
<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 中,有一个 foal 属性,默认为 none,也就是标准流通常的情况。若果将 noat 属性的值设置为le 或 nighl,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是
根据盒子里面的内容的宽度确定。</p>
</div>
<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 中,有一个 foal 属性,默认为 none,也就是标准流通常的情况。若果将 noat 属性的值设置为le 或 nighl,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而是
根据盒子里面的内容的宽度确定。</p>
</div> 
5.6 综合案例——昵心美食空间
本章综合前面学习的盒模型布局排版知识，可以利用各种定位和浮动制作典型的网页布局。本章项目页面布局要求如下:
页面要求用 div 布局，总的 div-al 有上下4行区域，分别为 div-banner、div-menudiv-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 0px;
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 herf="#">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>
扫一扫
2065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
