CSS综合应用

.box1 {
    width: 200px;
    height: 200px;
    background-color: lightblue;

    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;

    /* 可以简写:按顺时针 */
    padding: 20px 30px 40px 50px;

    /* 如果左右相等30,而上下不相等20,40,可以这样简写 */
    padding: 20px 30px 40px;

    /* 如果上下也相等40 */
    padding: 40px 30px;

    /* 大家可注意到规律了,不论是二个,还是三个参数,第二个总表示左右内边距 */

    /* 如果四个方向全部相等,例如20 */
    padding: 20px;

    /* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */
    /* 上边框 */
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: red;

    /* 右边框 */
    border-right-width: 10px;
    border-right-style: dashed;
    border-right-color: green;

     /* 下边框 */
     border-bottom-width: 10px;
     border-bottom-style: dotted;
     border-bottom-color: blue;

      /* 左边框 */
      border-left-width: 10px;
      border-left-style: double;
      border-left-color: black;

      /* 以上样式与可以简写 */
      border-top: 10px solid red;
      border-right: 10px dashed green;
      border-bottom: 10px dotted blue;
      border-left: 10px double black;

      /* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
      border: 10px solid red;

    /* margin有很多特殊的规则,后面单独讨论 */
}

.box2 {
   
    height: inherit;
    background-color: wheat;
}