【网页设计基础课】第十周文档流实验作业第三题

第一，需要整体构出作业中盒子的HTML结构

<div class="row">
        <div>11</div>
        <div>12</div>
    </div>
    <div class="row2">
        <div>13</div>
        <div>14</div>
    </div>

首先补充几个知识点

css-display属性的几个值（以下的值都是跟在display：后面的）

1.table：此元素会作为块级表格来显示（类似 table），表格前后带有换行符

2.table-row：此元素会作为一个表格行显示（类似 tr）

3.table-cell：此元素会作为一个表格单元格显示（类似 td 和 th）

outline属性

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

第二，将HTML内的div盒子进行转换

1.将两个class为row的div转换成table-row，设置阴影

2.重要的一步，设置它们的轮廓为虚线，白色。此时因为轮廓会和阴影重叠在一起，外边框变成了虚线，其实也说明了轮廓是比阴影高了一层的

3.初始化内部小盒子里的数据

 .row , .row2{
    
    
            display: table-row;
            box-shadow: 0 0 0 10px red;
}
  .row div,
        .row2 div {
    
    
            width: 300px;
            height: 300px;
            font-size: 30px;
            color: red;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
            outline：dashed 10px #fff
        }        

3，根据给出的图片分别设置不同的border值

=>因为之前再初始化div小盒子的时候已经设置了div的轮廓，以及轮廓的层级比边框要高，

也就因此实现了和上诉用阴影和轮廓实现虚线的样式一样的效果。

=>这里设置的所有边框除了颜色不一样，其他的几个值都是一样的：

十个像素，直线。

   .row div:nth-child(1) {
    
    
            border-top: 10px solid #009688;
            border-left: 10px solid #009688;
            border-right: 10px solid red;
            border-bottom: 10px solid red;
        }
        
  .row div:nth-child(2) {
    
    
            border: 10px solid #009688;
            border-bottom: 10px solid red;
        }
        
  .row2 div:nth-child(1) {
    
    
            border: 10px solid #009688;
            border-right: 10px solid red;
        }
        
  .row2 div:nth-child(2) {
    
    
            border: 10px solid #009688;
        }

最后的结果