css盒子模型及边框

一、盒子模型

在页面设计中有4个常见属性：

        content（内容）、padding（内边距、填充区）、border（边框）和margin（外边距）

我们把这4部分转化成日常生活的盒子来理解，所以称为盒子模型。

        一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。

在CSS中可以通过设置width和height的值来控制内容content所占矩形的大小

并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin

并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin ，如下图所示：

 

 二、盒子边框（border）

border是复合属性，有三个属性值，分别为宽度，样式，颜色，属性位置可以互换

border：3px solid red;

边框的样式：

• none：无

• dotted：点线

• dashed：虚线

• solid: 实线

• double：双实线 粗度<2px 会看不出来

• groove：槽线

• ridge：脊线

• inset：内嵌效果

• ouset：外嵌效果

三、盒子模型应用形式

padding，margin，border都是复合属性

1.同时设置：

可以通过如下代码，同时设置四个方向的内边距，外边距，边框样式

.demo{
    width: 350px;
    height: 250px;
    padding: 2px;
    margin: 10px;
    border: yellowgreen solid 1px; 
}

2.分别设置：

也可以通过加上-top -right -bottom -left的后缀对上右下左分别进行设置 

.demo{
    width: 350px;
    height: 250px;
    padding-top: 2px;
    padding-right: 4px;
    padding-bottom: 6px;
    padding-left: 8px;
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 6px;
    margin-left: 8px;
    border-top:  yellowgreen solid 1px; 
    border-right：、、、、、、
}

但是这种方式会有一定的麻烦，如果要分别设置一个盒子的四边的内外边距和边框，那需要分别写12行代码，css中提供了简写的方式

 3.简写：

    给所有边统一使用同一样式：
        border: 10px outset yellowgreen; 
        margin：10px；
        padding：10px；
    设置单一边的样式：
        margin-top/buttom/right/left：10px
        padding-top/buttom/right/left：10px
        border-bottom:5px inset red;
        border-top:10px solid yellow;
        border-right...
        border-left...
    统一给不同边框设置不同样式：
        
        margin：10px 20px；
        margin：10px 20px 30px；
        margin：10px 20px 30px 40px；
        
        padding：10px 20px；
        padding：10px 20px 30px；
        padding：10px 20px 30px 40px；
        
        border-width: 10px 20px;
        border-style: solid dashed double;
        border-color:red yellowgreen rebeccapurple aqua;
        两个指定值：上下边框  左右边框
        三个指定值：上边框 左右边框 下边框
        四个值定制：上 右 下 左
    为某一边框设置不同值：（根据css执行顺序 第二行的top属性会替代第一行设置的top属性）
        border: 10px outset yellowgreen; 
        border-bottom:5px inset red;