<!-- 
        文档流（normal flow）
            - 网页是一个多层的结构，一层垒着一层
            - 通过CSS可以分别为每一层来设置样式
            - 作为用户来讲只能看见最顶上一层
            - 这些曾中，最底下的一层称为文档流，文档流是网页的基础
                我们所创建的元素默认都是在文档流中进行排列
            - 对于我们来元素主要有两个状态
                在文档流中
                不在文档流中（脱离文档流）
            
            - 元素在文档流总有什么特点：
                - 块元素
                    - 块元素会在页面中独占一行（自上向下垂直排列）
                    - 默认宽度是父元素的全部（会把父元素撑满）
                    - 默认高度是被内容撑开的（子元素）

                - 行内元素
                    - 行内元素不会独占页面的一行，只占自身的大小
                    - 行内元素在页面中自左向右水平排列,如果一行之中不能容纳下所有的行内元素
                        则元素会换到第二行继续自左向右排列（书写习惯一致）
                    - 行内元素的默认宽度和高度都是被内容撑开的    
     -->
    <!-- <div>layout</div> -->
.box1{
        /* 
            内容区（content）: 元素中的所有子元素和文本内容都在内容区中排列
                内容区的大小由width和height两个属性来设置
                    width 设置内容区的宽度
                    height 设置内容区的高度
        */
        width: 200px;
        height: 200px;
        background-color: darkred;

        /* 
            边框（border）: 边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
                边框的大小会影响到整个盒子的大小
            要设置边框需要至少三个样式：
                边框的宽度 border-width
                边框的颜色 border-color
                边框的样式 border-style
        */

        border-width: 10px;
        border-color: blue;
        border-style: solid;

    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;

        border-width: 10px;
        border-color: orange;
        border-style: solid;

    }


    <!-- 
        盒模型、盒子模型、框模型(box model)
            - CSS将页面中的所有元素都设置为一个矩形的盒子
            - 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子
                摆放到不同的位置
            - 每一个盒子都由以下几个部分组成：
                内容区（content） content
                内边距（padding） padding
                边框（border） border
                外边距（margin） margin

     -->
.box1{
        /* 
            内容区（content）: 元素中的所有子元素和文本内容都在内容区中排列
                内容区的大小由width和height两个属性来设置
                    width 设置内容区的宽度
                    height 设置内容区的高度
        */
        width: 200px;
        height: 200px;
        background-color: #bfa;

        /* 
            边框（border）: 边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
                边框的大小会影响到整个盒子的大小
            要设置边框需要至少三个样式：
                边框的宽度 border-width
                    - 默认值: 一般都是3个像素
                    - 可以用来指定四个方向的边框的宽度
                        - 四个值： 上 右 下 左
                        - 三个值： 上 左右 下
                        - 两个值： 上下 左右
                        - 一个值： 上下左右
                        - border-width: 10px 20 px 30px;
                    - 除了border-width还有一组 border-xxx-width
                        xxx 可以为 top rigth bottom left
                                   上   右     下    左

                         
                边框的颜色 border-color
                边框的样式 border-style
        */

        border-width: 10px;
        /* border-top-width: 10px; */

        border-color: orange red blue black;
        /* 
            上下左右与border-width一样 
            color 也可以省略不写 如果省略了则自动使用color的颜色值
        */

        border-style: solid dotted dashed double;
        /* 
            border-style 指定边框的样式
                solid 表示实线
                dotted 表示点状虚线
                dashed 表示虚线
                double 表示双线
            border-style 的默认值为 none 表示没有边框
        */
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color:red;
        border: 10px orange solid;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color:blanchedalmond;
        /* border-top: #bfa 10px solid; */
        border: #bfa 10px solid;
        border-top: none;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color:blanchedalmond;
        /* border-top: #bfa 10px solid; */
        border: #bfa 10px solid;
        border-top: none;
    }
    
</style>
<body>
    
    <!-- 
        盒模型、盒子模型、框模型(box model)
            - CSS将页面中的所有元素都设置为一个矩形的盒子
            - 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子
                摆放到不同的位置
            - 每一个盒子都由以下几个部分组成：
                内容区（content） content
                内边距（padding） padding
                边框（border） border
                外边距（margin） margin

     -->