CSS盒子模型1

 一、概念

什么是盒子模型？

盒子模型是由 margin + border + padding + 网页元素（content）组成

二、边框

1.边框颜色

border-color             四边，边框的颜色 

border-top-color      设置上边框的颜色

border-right-color       设置右边框的颜色

border-bottom-color         设置下边框的颜色

border-left-color           设置左边框的颜色

border-color :     red yellow      

                           第一个值red表示上下边框的颜色 第二个值表示左右边框的颜色

                         red green blue

                            第一个值表示上边框的颜色 第二个值表示左右边框的颜色 第三个值表示下边框的颜色

                            red green blue yellow

                            按照顺时针的顺序 第一个值表示上边框的颜色 第二个值表示右边框的颜色       第三个值表示下边框的颜色 第四个值表示左边框的颜色 

          

2、边框粗细 

border-width:

                         thick 粗的边框 系统会设置为5像素

                         medium 中等的粗细 系统会默认设置为3像素

                          thin 最细的 系统会默认设置为1像素

                          px 像素

border-top-width  设置上边框的粗细

border-right-width   设置右边框的粗细  

border-bottom-width   设置下边框的粗细       

border-left-width   设置左边框的粗细  

border-width:

                     10px 20px;

                     设置边框 上下为10px 左右为20px

                      10px 20px 50px;

                     设置边框的粗细为  上边框10px 左右边框粗细为20px 下边框粗细为30px

                     10px 30px 50px 70px;

                      顺时针的顺序 设置边框的粗细 上边框为10px 右边框为30px 下边框为50px 

                                                                        左边框为70px

 🔺设置边框的粗细 可以改变盒子的看上去的宽高  

 ★单独设置颜色或者边框的粗细的时候 必须要把border-style设置好

3、边框样式

设置了边框的颜色和类型之后 系统会默认设置边框的粗细为3像素 = medium  

border-style:

                      none     边框没有任何样式 显示不了

                      hidden     隐藏边框的样式 也显示不了

                      dotted       边框的样式变成点状

                      dashed     边框的样式变成虚线状

                      solid         边框的样式变成实线

                      double           边框变成两条实线

                      dotted dashed     两个值 表示上下是点状 左右是线状

                      dotted dashed double   上边框为点状 左右为虚线 下边框是双实线

                      solid dotted dashed double         顺时针 按照上右下左的顺序 上边框是实线 右边框是点状 下边框是虚线 左边框是双实线

border-top-style:dotted;           上边框的样式为点状 

border-right-style: dashed;        右边框的样式为虚线

border-bottom-style: double;       下边框的样式为双实线

border-left-style:solid;             左边框的样式为实线

           

★同时设置边框的颜色、粗细和样式 

   border-style必须加 因为 其他不加有默认值 而border-style没有

    颜色的默认是黑色 粗细的默认值是3px

  border也是一个复合属性

     例： border:1px solid red;  

 三、外边距

 margin      只设置一个值 上右下左都会设置同样的外边距  

                 10px 50px; 下外边距都是10px 左右外边距都是50px

                 10px 30px 20px; 上边距是10px 左右是30px 下边距是20px

margin-top:  单独设置上边距 

margin-left    单独设置左边距

margin-right:    单独设置右边距

                              为什么设置margin-right没效果过呢？

            因为元素是默认靠着左上角    所以设置margin-left有效果

            要想设置margin-right有效果    需要设置浮动为float:right;

margin-bottom:         设置下边距   

                                加一个边框，可以清晰的看出差别

         * 去除所有元素的内外边距 

          *{margin:0;padding:0;}