盒子模型总结

目录

一、定义

1、内容区  （content）： 元素中所有的

2、边框（border） ：元素设置边框

3、内边距（padding）：指的是盒子的内容和边框之间的距离

4、外边距（margin）：决定是当前盒子和其他盒子的距离 （盒子可见框大小）       

二、布局

1、水平布局   

2、垂直布局

三、样式

1、行内元素的盒子

2、默认样式的去除

3、轮廓与圆角

四、box-sizing拯救布局

---

一、定义

盒子模型 ：盒模型、框模型（box model）

       css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置，每一个盒子，都有以下几个部分。

    内容区（content）：元素中所有的

    边框（border）：元素设置边框

    内边距（padding）：指的是盒子的内容和边框之间的距离

    外边距（margin）：决定是盒子和盒子的距离 （盒子可见框大小）

1、内容区  （content）： 元素中所有的

       使用width设置盒子内容区的宽度

       使用height设置内容的高度

        width和height只是决定内容区的大小，而不是盒子的整个大小

2、边框（border） ：元素设置边框

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

             边框的大小会影响我们盒子的大小

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

            border-width:边框的宽度

            border-color:边框的颜色

            border-style:边框的样式

     （1）border-width：设置边框的宽度（粗细程度）。 

值	说明
thin	设置细的边框
medium	默认值，设置中等的边框，一般的浏览器将其解析为2px
thick	设置粗的边框
像素值	具体的数值，用于自定义边框的宽度

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

          如果设置四个值  上 右 下 左

                 设置三个值   上  左右  下

                 设置两个值   上下  左右

                 设置一个值   上下左右

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

     （2） border-color：浏览器默认的是黑色。和边框宽度，样式一样，可分别设置。

           border-xxxx-color  可以设置某一边框的颜色  

     （3）border-style：设置边框的样式  设置边框的必选项（必须设置）

           可选值： none  默认值 没有边框

                           solid  实线

                           dashed 虚线

                           double 双线

                           dotted  点线  

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

  注意：border 的简写方式  参数：width  color  style  顺序都可以

             可以分别设置四边边框，border-left等。

3、内边距（padding）：指的是盒子的内容和边框之间的距离

     一共有四个方向：padding-top

                                  padding-right

                                  padding-left

                                  padding-bottom

           eg：

                padding: 10px 20px 30px 40px;

                                上右下左

                                规则和boder-width一样

     注意：内边距会影响盒子的可见框的大小,元素的背景色会延伸到内边距。

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

4、外边距（margin）：决定是当前盒子和其他盒子的距离 （盒子可见框大小）       

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

  盒子有四个方向的外边距

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

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

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

      margin-left      左外边距  设置正值，元素向右移动                   

       处置外边距的重叠：在网页中相邻的垂直方向的外边距，会发生重叠。

    兄弟之间的重叠，会取最大值，不会取和，谁大听谁的

             特殊情况：如果一正一负，取两者之和

                               如果两负，则取绝对值最大的

            兄弟的外边距重叠问题，一般不解决

    父子之间的外边距重叠

            如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素

            暂时解决方案：不用外边距；

                                     不相邻

        总结：由于页面中的元素默认下是靠左靠上摆放，所以当我们设置上外边距和左外边距的时候，盒子自身位置会发生改变。如果设置右边距和下外边距，会改变其他盒子的位置（挤别人）。

二、布局

1、水平布局   

        元素的水平布局有几个属性共同决定。

        margin-left  border-left paddin-left width  padding-right border-right margin-right

       一个元素在其父元素中，水平方向的等式

         margin-left + border-left + paddin-left + width + padding-right + border-right + margin-right = 父元素宽度

        0 + 0 + 0 + 100+ 0 + 0 +0=400  ？？

        以上等式满足，如果不满足，则浏览器会自动调整，这个叫过度约束。

       浏览器调整

        1、如果七个值没有  auto  ，那么浏览器会自动调整 margin-right 使我们等式满足

        2、这七个值，width，margin-left，margin-right 可以设置 auto

               如果有设置auto，浏览器会自动调整auto的值。

              如果设置margin-left为auto，

             例子： 300 +0+0+100+0+0+0=400

        3、如果同时设置width  margin  为auto，只调整width宽度。

        4、如果设置宽度固定，设置margin为auto，

              则两边的外边距会设置为相同的值，让元素在父元素中居中。

2、垂直布局

      垂直方向  ：1、不设置高度，默认被内容撑开

                           2、设置了，就听设置

  元素如果溢出： overflow  处理溢出内容

            可选值：

              visible 溢出的内容会正常显示

              hidden  溢出的内容会被裁减，不会显示

              scroll  出现双侧滚动条

              auto   根据溢出内容，出现滚动条

  相关的属性：overflow-x、overflow-y

三、样式

1、行内元素的盒子

       （1）不能设置宽高

       （2）padding可以设置,但不会改变页面垂直的布局

       （3）border可以设置，也不会改变页面垂直的布局

       （4）可以设置水平方向的外边距，垂直方向的不生效

                两个行内元素的水平外边距，不会重叠，而是求和。

display  属性：  用来设置元素的显示类型。

           可选值：

             block   将元素设置为块元素

             inline  将元素设置为行内元素

             inline-block  行内块元素（即可设置宽高，也不会独占一行）

             none   将元素隐藏

             table  将元素设置为一个表格

2、默认样式的去除

         默认样式： 浏览器为了在页面中没有样式的时，也可以有一个比较好的呈现，所以给很多元素设置默认的padding，margin等等。正常这些样式我们都不用，因为不同浏览器显示的效果不一定。

（1）手动输入

*{
   padding: 0;
   margin: 0;
 }
a{
    text-decoration: none;
 }
li{
    list-style: none;
  } 

（2）引入重制样式表

<link rel="stylesheet" href="./.css">

3、轮廓与圆角

（1）轮廓

          box-shadow  设置元素的阴影效果，不会影响到页面的布局

       参数：

              1、水平偏移量  可正可负 必填   正->负  

              2、垂直偏移量   可正可负 必填

              3、模糊半径   可填

              4、颜色  一般用rgba

（2）圆角

        border-radius: 设置圆角  

      可以写四个值 ，四个属性值顺序 ： 左上  右上  右下  左下

                3个  左上  右上左下   右下

                2个  左上右下   右上左下

                1个  共用

     以10px为半径画圆，以40px为半径画圆

       border-radius: 10px   40px;     

    设置圆形： border-radius: 50%;

    给单独一角设置圆角：

                 border-top-left-radius: 50px;

                 border-top-right-radius: 50px;

四、box-sizing拯救布局

 默认情况，盒子的大小是由内容区，边框，内边距共同决定。

盒子模型尺寸   

内盒总尺寸=border（上下/左右）+padding（上下/左右）+ 内容宽度

外盒总尺寸=border（上下/左右）+padding（上下/左右）+ margin（上下/左右） + 内容宽度

可以通过box-sizing 用来设置盒子尺寸的计算方式  也就是width，height指的是谁。

 box-sizing可选值：

           content-box  内容区  默认值

           border-box  宽高设置的就是整个可见框的大小  包含内容区，边框，内边距

           Inherit：此值使元素继承父元素的盒子模型