结果 https://codepen.io/yuqianma/pen/NEZogB

打开 https://codepen.io/yuqianma/pen/EOBOMQ

调整一下窗口
CSS practice - 图1

Task

1.把绿色矩形改为蓝色

2.复制已有代码，放2个同样的蓝色矩形在灰色区域

灰色区域对应html里哪个标签？

3.把灰色区域里的矩形改回绿色

CSS选择器

4.让div横向排列

  1. /* .box */
  2. float: left;

5.给container设置高度260px，宽度520px

6.再复制，放8个绿色div在灰色区域

7.给绿色div设置外边距

  1. /* .container .box */
  2. margin: 10px;

8.给绿色div设置内边距

  1. /* .container .box */
  2. padding: 5px;

9.让格子边框看上去相等

  1. /* .container */
  2. padding: 10px;

10.让蓝色div距离灰色区域10px

有2种方法

  1. /* .container */
  2. margin-bottom: 10px;
  1. /* 给蓝色div添加一个class: add-top */
  3. .add-top {
  4.   margin-top: 10px;
  5. }

小彩蛋
试试下面代码

  1. /* .container .box */
  2. white-space: nowrap;
  3. overflow: hidden;
  4. text-overflow: ellipsis;