CSS的盒子模型

一、盒子模型的四个元素

1.content内容区

元素中所有的子元素和文本内容都在内容区中排列

 width   设置内容区的宽度

 height  设置内容区的高度

background-color    设置内容区的颜se

p{
    width:25px;
    height:25px
    background-color:red;
}

2.border   设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式 分别是颜色，大小，样式

例：border：2px  solid  red；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:0px ;
            padding: 0px;
            border: 5px solid red;
        }

 

border-color: ;  设置边框的颜色

   有默认值，默认颜色是黑色

  可以写多个颜色  以空格隔开

        4个   上  右  下   左

        3个   上   左右   下

        2个   上下  左右

        1个   上下左右

也可以设置边框某一边的颜色

border-xxx-color  xxx指的是它的某一边，可选值有top  right bottom  left  

border-width：；设置边框的大小

边框大小的设置和边框颜色的设置是一致的

border-style: ;  设置边框的样式      

    none   默认值

    solid  实线

    dashed  虚线

    dotted  点状虚线

   double  双线

3.内边距（padding）：内边距是内容区到边框的距离

其实内边距的形式和边框的形式属于异曲同工 

       padding-top  上内边距    

        padding-right  右内边距

        padding-bottom 下内边距

        padding-left   左内边距

例：padding：30px  30px  30px  30px；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:0px ;
            padding：30px  30px  30px  30px；
            border: 5px solid red;
        }

也可以简写，简写的样式和border是一致的

4.margin（外边距）

margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。

该属性可以有 1 到 4 个值。

margin 属性可以单独改变元素的上，下，左，右边距。

也可以一次改变所有的属性。 

margin也有简写方法，简写方式和padding、border是一致的

例：margin：30px ；

  p{
            width:350px ;
            height: 350px;
            background-color:white ;
            margin:30px ;
            padding：30px；
            border: 5px solid red;
        }