一、CSS盒模型样式的基本概念
盒模型是CSS样式布局的基本基石，它规定了元素如何显示以及元素之间的相互关系。
CSS定义所有的元素可以拥有像盒子一样的外形 和平面空间，即包含边框（border）、边距（margin）、内边距（padding）、内容区（content）.
二、盒子类型
盒子类型一般分两类 标准模式和怪异模式
在标准模式下（W3C标准），一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下（ IE标准），一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。
CSS3中的box-sizing属性：
语法：
box-sizing ： content-box || border-box || inherit;
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
三、盒的内容
1、overflow：overflow属性指定如果内容溢出一个元素的框，会发生什么
overflow：visible/hidden/scroll/auto
visible : 默认值，内容不会裁剪，会呈现在元素框之外
hidden : 内容被裁剪，其余内容不可见。
scroll : 内容被裁减，滚动条显示其余内容。
auto：内容被裁减，则浏览器以滚动条显示内容。
overflow-x 属性指定如果他溢出了元素的内容区域是否裁剪左、右边缘区域内容。
overflow-y 属性指定如果它溢出了元素内容区域是否裁剪顶部/底部边缘内容。
2、text-overflow ： text-overflow属性指定当文本溢出包含它元素，应该发生什么
text-overflow ：clip/ellipsis/string
clip :修剪文本
ellipsis: 显示省略号代表被修剪的文本
string：使用字符串来代替被修剪的文本
注意：text-overflow必须和overflow:hidden;white-space;nowrap;（隐藏不换行）一起使用。
text-overflow“这里是省略的内容”，浏览器兼容情况需要注意，火狐有显示。
<p style="width: 100px; height: 100px; background-color: palegreen;overflow: hidden;white-space: nowrap; text-overflow:clip">
pandd is a good man !pandd is a nice man ！pandd is a cool man ！pandd is a very nice man
</p>
<!--white-space: nowrap 不换行-->
<p style="width: 100px; height: 100px; background-color: palegreen;overflow: hidden;white-space: nowrap; text-overflow:ellipsis">
pandd is a good man !pandd is a nice man ！pandd is a cool man ！pandd is a very nice man
</p>
结果演示：
实用场地：
四、 盒模型样式的分类定义及应用
1、盒模型的宽度
选择器{width: 值;}
2、盒模型的高度
选择器{height:值;}
3、盒模型背景
选择器{background-image:url(图片地址);}
选择器{background-color:值;}
4、盒模型的边框
5、盒模型的内边距
可以用来调整在父元素的位置关系
<div id="box-1" style="width: 200px; height: 200px; background-color: red; padding: 10px;">
<div id="box-2" style="width: 100px; height: 100px; background-color: yellow;">
我是子标签
</div>
</div>
6、盒模型的外边距
（1）探究快标签上下间距margin
注意：两个盒子模型之间的间距 其实是两个盒子中margin值最大那个而不是相加
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: chartreuse;
margin-bottom: 50px;
}
#box2{
width: 100px;
height: 100px;
background-color: sandybrown;
margin-top: 70px;
}
</style>
</head>
<body>
<div id="box1">
我是盒子1
</div>
<div id="box2">
我是盒子2
</div>
</body>
</html>
(2)探究快标签左右之间间距 margin
- display与float
把两个块级标签变成行内块标签放在一行，即便没设置margin中间也会有一个间隙线，浏览器设置的。
把两个块级标签都左飘中间间隙就会消失掉。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box11{
width: 100px;
height: 100px;
background-color: #FF69B4;
display: inline-block;
}
#box12{
width: 100px;
height: 100px;
background-color: aqua;
display: inline-block;
}
#box13{
width: 100px;
height: 100px;
background-color: #FF69B4;
float: left;
}
#box14{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div id="box11">
我是盒子11
</div>
<div id="box12">
我是盒子12
</div>
<br />
<div id="box13">
我是盒子13
</div>
<div id="box14">
我是盒子14
</div>
</body>
</html>
效果演示：
这一次设置他们之间的margin间距值 累加
margin-left：50px
margin-right: 50px
综上 水平累加 上下取最大值
五、盒子尺寸计算
不想盒子变大减少内容的宽度 width
