<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样式。
是元素(DIV a li ul 等)的CSS属性.ID是这个元素的唯一标识只能一个元素使用用,class是类其他的元素可以共用 你的那个BOX 是以BOX命名的一个ID属性 如div#{color:red} 再如 class="center" div.center{float:left}这种CSS样式box：主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式box-flex：主要让子容器针对父容器的宽度按一定规则进行划分
注意：
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
所以兼容性的代码，大致如下
display: -webkit-box/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box/* Firefox 17- */
display: -webkit-flex/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex/* Firefox 18+ */
display: -ms-flexbox/* IE 10 */
display: flex/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
