CSS 盒模型(Box Model)的相关属性，属性值、标准模式盒模型怪异模式盒模型的计算方式和区别、DIV+CSS实际开发中页面的布局
第4章 CSS 盒模型 Box Model & DIV+CSS页面布局
- 1、盒模型概念
- 2、盒模型结构
- 3、盒模型属性
- （1）内边距（填充）—— padding 属性
- （2）外边距—— margin 属性
- （3）边框—— border 属性
- （4）边框缩写—— border 属性
- 4、盒模型元素的计算方法
- 5、标准模式&怪异模式
- 6、DIV+CSS实际开发中的常用布局
1、盒模型概念
- 盒子模型比较抽象，所有HTML元素各块可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型是网页布局的基础。
2、盒模型结构
- Content： (元素内容) - 盒子里的内容，显示文本和图像等。
- Padding ：填充(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响。
- Border ：边界(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响。
- Margin ：边界(外边距) - 清除边框区域。Margin没有背景颜色，它是完全透明。
3、盒模型属性
因为盒子是矩形，所以各个属性又分为个方向。顺序为：上、右、下、左。
（1）内边距（填充）—— padding 属性
padding定义：
a、当元素的 Padding 内边距（填充）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
b、单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
/*padding用法的实例*/
div1{
padding: 20px 40px 20px 40px;
/*内边距距离为：上20px，右40px，下20px,左40px*/
}
div2{
padding: 20px 40px ;
/*内边距距离为：上下20px，左右40px*/
}
div3{
padding: 20px 40px 20px;
/*内边距距离为：上20px，左右40px，下20px*/
}
div4{
padding: 20px ;
/*内边距距离为：上下左右20px，*/
}
实例（1）：
<html>
<head>
<meta charset="UTF-8">
<title>list-style title>
<style type="text/css" media="screen">
body{
background-color: #CCC;/*页面背景为灰色*/
}
div{
width: 600px;/*长度600px*/
height: 300px;/*高300px*/
padding: 20px;/*外边距上下左右20px*/
background-color: #60C5F1;/*盒模型背景为天蓝色*/
}
style>
head>
<body>
<div>div>
body>
html>
在web中实际应用padding：
（2）外边距—— margin 属性
margin定义：
a、margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
b、margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
/*padding用法的实例*/
div1{
margin: 20px 40px 20px 40px;
/*外边距距离为：上20px，右40px，下20px,左40px*/
}
div2{
margin: 20px 40px ;
/*外边距距离为：上下20px，左右40px*/
}
div3{
margin: 20px 40px 20px;
/*外边距距离为：上20px，左右40px，下20px*/
}
div4{
margin: 20px ;
/*外边距距离为：上下左右20px，*/
}
div5{
margin: 20px auto;
/*外边距距离为：上下20px，左右自动适应*/
}
实例（2）：
<html>
<head>
<meta charset="UTF-8">
<title>list-style title>
<style type="text/css" media="screen">
body{
background-color: #CCC;/*页面背景为灰色*/
}
div{
width: 600px;/*长度600px*/
height: 300px;/*高300px*/
margin:20px auto;/*外边距上下20px，左右自动适应*/
background-color: #60C5F1;/*盒模型背景为天蓝色*/
}
style>
head>
<body>
<div>div>
body>
html>
在web中显示margin：
页面居中{ margin: 0px auto;}
注意：嵌套 div 时 margin-top 会合并到父级元素。解决方案：设置父级元素的 overflow: hidden;(超出内容隐藏)
（3）边框—— border 属性
border 定义：
a、border 围绕元素内容和内边距的一条或多条线，对于这些线条，可以自定义它们的颜色、宽度以及样式。
/*padding用法的实例*/
div{
border-color: red;/*边框的颜色*/
border-width: 20px;/*边框的宽度*/
border-style: solid; /*solid定义实线边界*/
/*style属性值有很多可以设置边框的样式。如：dotted 点线框，dashed 虚线框，*/
}
实例（3）：
<html>
<head>
<meta charset="UTF-8">
<title>list-style title>
<style type="text/css" media="screen">
body{
background-color: #CCC;/*页面背景为灰色*/
}
div{
width: 600px;/*长度600px*/
height: 300px;/*高300px*/
border-color: yellow;/*边框为黄色*/
border-width: 5px;/*边框宽为5px*/
border-style: solid;/*边框的格式为实线*/
background-color: #60C5F1;/*盒模型背景为天蓝色*/
}
style>
head>
<body>
<div>div>
body>
html>
在web中显示：
（4）边框缩写—— border 属性
border：width style color；
注意：border 属性缩写和大多数属性缩写的要求都是一样的，顺序不能变，不写的话会自动填入默认值。
div{
border:5px solid yellow;
/*边框为 宽5px，实线， 黄色*/
}
这个缩写就可以省掉很多的代码量
实例（4）：
<html>
<head>
<meta charset="UTF-8">
<title>list-style title>
<style type="text/css" media="screen">
body{
background-color: #CCC;/*页面背景为灰色*/
}
div{
width: 600px;/*长度600px*/
height: 300px;/*高300px*/
border: 5px solid yellow;/*边框宽为5px，实线，黄色*/
background-color: #60C5F1;/*盒模型背景为天蓝色*/
}
style>
head>
<body>
<div>div>
body>
html>
在web中显示（和上一个实例一样，但是代码可以少些一部分）：
4、盒模型元素的计算方法
（1）元素的实际大小（实际宽、高）
- 盒子高度 = height属性 + 上下填充高度 + 上下边框高度
- 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度
（2）元素需要占据的位置：
- 盒子高度 = height属性 + 上下填充高度 + 上下边框高度+上下边界高度
- 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度+左右边界宽度
5、标准模式&怪异模式
（1）标准模式的盒模型是由 w3c 提出，它的计算方法是:
- 占的空间的宽度等于内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边距的宽度。
（2）由于各个浏览器设计的不同，盒模型在不同的浏览器中的表现也不同。
（3）怪异模式是指在 IE6 及更早的 IE 版本下盒模型的计算方法：
- 所占空间总宽度等于内容＋外边距。
（4）标准 w3c 盒子模型和 IE 盒子模型的区别：
- W3C 盒子模型的范围：
margin、border、padding、content，其中content 部分不包含其他部分。 - IE 盒子模型的范围：
margin、border、padding、content， 其中content 部分包含了 border 和 pading部分。
6、DIV+CSS实际开发中的常用布局
实例6（页面常用的三行布局类型）：
<html>
<head>
<meta charset="UTF-8">
<title>list-style title>
<style type="text/css" media="screen">
body{
margin: 0px auto;/*页面居中，去掉默认的盒模型格式*/
background-color: #CCC;/*页面背景为灰色*/
}
.DIV1{
height: 50px;/*高100px*/
background-color: #60C5F1;/*盒模型背景为天蓝色*/
}
.DIV2{
height: 550px;/*高600px*/
background-color: yellow;/*盒模型背景为天黄色*/
}
.DIV3{
height: 120px;/*高100px*/
background-color: rgb(255, 0, 0);/*盒模型背景为天红色*/
}
style>
head>
<body>
<div class="DIV1">顶部导航栏div>
<div class="DIV2">页面主体内容div>
<div class="DIV3">底部友情链接以及版权div>
body>
html>
在web中显示：
