CSS布局 盒子模型

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

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

             border-width: 10px;
             border-color: red;
             border-style: solid;
        }
    </style>

笔记内容来自张老师提供的源码