css盒子模型

目录

1、什么是盒子模型

2、盒子模型

2.1、边框

2.2内边距 

总结

2.3外边距     

---

1、什么是盒子模型

        “CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。 CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距,这就是盒模型。”

2、盒子模型

2.1、边框

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

设置边框必须指定三个样式

          大小   样式  颜色

下面介绍一些边框的属性:

1、border-width

        使用border-width可以分别指定四个边框的宽度，默认值一般是3px

        

他可以跟多个值

   跟4个值时，分别表示  上  右  下  左

   跟3个值时，分别表示  上  左右  下

   跟2个值时，分别表示  上下   左右

   跟1个值时，分别表示  上下左右

例如：

div {
        width: 100px;
        height:100px;
        background-color: red;
        /* 设置边框的宽度 */
        border-width: 1px;
        border-top-width:10px ;
}

上述代码中，border-top-width:10px ;的意思是设置上边框的宽度

相似的还有:

        border-right-width

        border-bottom-width

        border-left-width

2、border-color

        设置边框的颜色  默认值是黑色，和border-width一样，color也提供四个方向的样式，可以分别指定颜色，即：

                                        border-top-color

                                        border-right-color

                                        border-bottom-color

                                        border-left-color

例如：

div{
        border-color: red transparent transparent transparent;
        border-color: red;
        border-top-color: red;
}

3、border-style

        设置边框的样式

可选值：

none	默认值，没有边框
solid	实线
double	双线
dashed	虚线
dotted	点状边框

style也可以分别指定四个边的边框样式，规则和width一致， 同时它也提供border-xxx-style四个样式，来分别设置四个边

xxx可表示top、right、left、bottom

例如：

div{
    border-style:double;
}

5、border

• 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
• 而且没有任何的顺序要求
•  border一指定就是同时指定四个边不能分别指定

 border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

div{
        border-top: 5px green solid;
        border-right: 5px red solid ;
        border-bottom: 5px yellow solid;
        border-left: 5px blue solid;
}

2.2内边距 

内边距（padding），指的是盒子的内容区与盒子边框之间的距离

        一共有四个方向的内边距，可以通过：

•                     padding-top
•                     padding-right
•                     padding-bottom
•                     padding-left

      来设置四个方向的内边距

总结

1. 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
2.   盒子的大小由内容区、内边距和边框共同决定

2.3外边距     

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top	上外边距，设置一个正值，元素会向下移动,设置一个负值，元素会向上移动
margin-right	默认情况下设置margin-right不会产生任何效果
margin-bottom	下外边距，设置一个正值，自己不动，其下边的元素会向下移动，挤别人
margin-left	左外边剧，设置一个正值，元素会向右移动,设置一个负值，元素会向左移动

由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

注：

        外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动。

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样。

#div1{
        width: 200px;
        height: 200px;
        background-color: red;
        border: 10px solid orange;
        padding: 50px;
        margin-top: 50px;
        margin-left: 50px;
        margin-bottom: -50px;
        margin-right: 500px;
}
#div2{
    margin: 10px 20px 30px 50px;
}