HTML盒子模型

盒子模型

-css将页面汇总所有的元素都设置为一个个矩形的盒子

将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

每一个盒子，都有以下几个部分

内容区(content)

内边距（padding）

边框（border）

外边框（margin） 决定是盒子和盒子的间距

 .box{ 
       width: 200px;
       height: 200px;
       background-color: red;
       border-width:10px;
       border-color:green;
       border: height 10px;;
        }

边框

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

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

border-width：设置边框宽度

border-color：边框颜色

border-height：边框高度

内容区

使用width设置合资的宽度

使用height设置内容的高度

只是决定内容区的大小，而不是盒子整体大小

border-width

设置边框的宽度  默认值 一般2-3px

可以分别设置四个边  边框的宽度

             如果设置四个值 上  下   左   右

             设置三个值    上    左右  下

             设置两个值   上下    左右

             设置一个值   上下左右

border-left-width  可以设置某一边框的宽度

.p1 {
         height: 300px;
         width: 300px;
         border-right:2px solid yellow;
      }

border-style 设置边框的样式，  设置边框的必须项

可选值：

 none 默认值 没有边框

              solid  实线

              double  双线

              dashed  虚线

              dotted  点线

         order-xxxx-style  可以设置某一边框的样式

border-color  浏览器默认是黑色

              和边框宽度，样式也一样，可分别设置

        border-xxxx-color  可以设置某一边框的样式

           border:的简写方式

           参数：width  color  style  顺序都可以

           可以分别设置四边边框

内边距

内边距(padding)  指的是盒子的内容和边框之间的距离

         一共有四个方向

         padding-top

         padding-right

         padding-left

         padding-bottom

注意：

1：内边框会影响盒子的可见框的大小，元素的背景色会延申到内边框

盒子的大小是由内容区，内边框和边框共同决定

.box{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
            border: 10px double red;
           /* padding-top:10px;
             padding-right:20px;
             padding-left:30px;
             padding-bottom:40px;*/
             padding: 10px;
        }

外边距

外边距值得是当前盒子和其他盒子之间的距离

外边距不会影响盒子可见框的大小，而影响的是盒子的位置

盒子有四个方向的外边距

 .box{width: 200px;height: 200px;
         background-color: salmon;
         border: 10px solid red;
         padding: 40px;
          margin: 30px;}

margin-top 

上边距，可设正值，元素会向下移动 ；也可设置负值，元素向上移动

margin-right   默认情况下不会产生效果

margin-bottom  下边距，设置一个正值，其下面的元素会向下移动，挤别人

margin-left  设置正值，元素会向右移动

总结：由于页面中的元素默认下是靠左靠上摆放， 所以当我们设置上边框和左边框的时候，盒子    自身位置会发生会改变。

如果设置右边框和下边框，会改变其他盒子的位置（挤别人）