css中 box1 box2的这种声明是什么意思

html-css024

css中 box1 box2的这种声明是什么意思,第1张

1、第一种情况：

<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+ */