<div class="box"></div>
.box{color:red} 这种是定义div元素box的css样式。比如color:red定义box里面的文字是红色。
2、第二种情况：
<div class="box">
<div class="box1">红色文字</div>
<div class="box2">蓝色文字</div>
</div>
.box .box1{color:red} 定义元素box下的子元素box1的css样式。
.box .box2{color:blue} 定义元素box下的子元素box2的css样式。
盒模型有两种：① 标准模式
② 怪异模式（quirks 模式）
---------------------------------------------分割线----------------------------------------------
在文件头使用<!DOCTYPE HTML>都会触发标准模式，如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。也可以在css上加入box-sizing:content-box
box-sizing:content-box---------标准盒模型
例：
.box {
width: 200px
height: 200px
border: 20px solid black
padding: 50px
margin: 50px
}
盒子总宽度/高度=width/height+padding+border+margin
也就是说，如果你设定width为200px，那么文本（内容）所占的宽度就是200px。无论设置border,还是padding都会影响那个盒子的宽度，这样的话会影响其他的位置，一般用于大框架里的小东西。
---------------------------------------------分割线----------------------------------------------
box-sizing:border-box--------怪异盒模型
例：
.box {
width: 200px
height: 200px
border: 20px solid black
padding: 50px
margin: 50px
box-sizing:border-box
}
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin
可以说是，你设置width为200px时，那么盒子的宽度就是200px，无论设置border,还是padding都不会影响那个盒子的宽度。
在网页里设置那些大的框架会很好用。
标准CSS盒模型规定width和height样式属于给定内容区域的尺寸，并且不包含boder和padding,可以称此盒子为“内容盒模型＂。在老版的IE里和新版的CSS中都有一些例外，再IE6之前和IE6~8“怪异模式”下显示一个页面时（页面中缺少 ＜IDOCTYPE>或有一个不够严格的 doctype 时），width和height属性确是包含boder和padding的。
IE的为是一个bug,但是IE的非标准盒模型通常也很有用。所以CSS3引进了 box-sizing 属性，默认值是 content-box ,它指定了上面描述的标准的盒模型。如果替换为 box-sizing:border-box ,浏览器将会为那个元素应用IE的盒模型，即width和height属性将包括border和padding,当想以百分比形式为元素是指总体尺寸，又想以像素单位指定border和padding时，边框盒模型特别有用
box-sizing 属性再当今所有浏览器中都支持，但是还没有不带前缀通用的实现。再Chrome和Safari中，使用 -webkit-box-sizing .在Firefox中，使用 -moz-box-sizing .在Opera和IE8及其更高的版本中，可以使用不带前缀的 box-sizing .
边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸计算值；
在IE9中支持使用 cale() 计算CSS的值，在Firefox为 -moz-cale()
