css盒子模型

布局相关样式

        1.文档流默认的布局，浮动，定位，弹性盒子

         盒模型，盒子模型，框模型（box model）

         网页中有很多元素，将元素摆放到合适的位置，

         盒模型将页面所有元素的形状都统一，布局时只要考虑大小即可 *

         

          盒模型                

            内容区 content        

            边框   padding        

            内边距 border        

            外边距 margin         

             

        盒子的大小：内容区，内边距，边框有关系，跟外边距没有关系

边框 （border） 边框原来隔开盒子内部和盒子外部

        设置边框，三要素，缺一不可 宽度 样式 颜色

        边框的宽度  border-width

        1 可以设置多个值，空格隔开

        四个值 上下左右

        3个值 上 左右 下

        2个值 上下 左右

        1个值 四边

        2 单独设置一边的宽

         border-top-width:

        border-right-width:

        border-bottom-width:

        border-left-width:

       3 border-width 是有默认值的 大小在1-3px之间

    边框颜色 border-color:

        1 可以设置不同颜色

         四个值 上下左右

         3个值 上 左右 下

         2个值 上下 左右

         1个值 四边

        2 单独设置一边的颜色

         border-top-color:

         border-right-color:

         border-bottom-color:

         border-left-color:

        3 箭头

        border-top-color:transparent transparent transparent red

        4 默认值黑色

        边框的种类  border-style:

        solid 实线

        dottedd 点状的虚线

        dashed   虚线

        double  双线

       2  四个边设置不同样式

       3单独设置

       4没有默认值

        border

         语法：大小颜色样式

         三要素顺序无所谓

         单独设置某一边

          border-top

          border-right

          border-bottom

          border-left

          border-top :none; 不要某边框