html-盒子模型

今天学习一下html中盒子模型的部分。

首先了解盒子模型之前，我们需要了解一下什么是 normal flow（文档流）。

 网页是一个多层的结构,设置样式，也是一层一层的设置，最终我们看到的最上面的一层

 文档流是网页最底层。我们创建的元素默认情况下，都在文档流中。元素分为两种状态：在文档流中，脱离文档流。

元素在文档流中的特点：

        块元素类

           1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素（行内元素）

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

        行内块元素

 元素脱离文档流后的特点

         元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素， 也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有。

    脱离文档流的途径有： 浮动  绝对定位  flex 等。

    把元素布局到页面，就像买个家具，想要把它摆放到合适的位置，你需要了解它的大小和尺寸，以及如何组合它们，对此我们把这些元素都想想成盒子（一盒矩形）。

影响盒子大小的因素有：内容区（盒子里的内容），边框（border），内边框（padding），外边距（margin）则不影响盒子大小。

1.内容区(content)  元素中所有的子元素和文本内容都在内容区中排列。

        width   设置内容区的宽度

        height  设置内容区的高度

 2.边框（border）元素设置边框

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

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

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

            （1）、有默认值，默认颜色是黑色。

            （2）、可以写多个颜色  以空格隔开。

                   4个   上  右  下   左

                   3个   上   左右   下

                   2个   上下  左右

                   1个   上下左右

             (3)、border-xxx-color  特指top  right  bottom left某一边颜色

         border-width: ;  设置边框的大小

            （1）、默认值   默认值大概1-3px

            （2）、也可以跟多个值  以空格隔开

                  4个   上  右  下   左

                  3个   上   左右   下

                  2个   上下  左右

                  1个   上下左右

            （3）、border-xxx-width 特指top  right  bottom left某一边宽度

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

              (1)、默认值  none

            （2）、solid  实线

                        dashed  虚线

                        dotted  点状虚线

                        double  双线

border简写有以下几种形式：

         border:颜色，大小，样式;

         border-top:颜色，大小，样式;

         border-right:颜色，大小，样式;

         border-bottom:颜色，大小，样式;

         border-left:颜色，大小，样式;

3.内边距（padding）指的是内容区和边框之间的距离。

        padding-top  上内边距；

        padding-right  右内边距；

        padding-bottom 下内边距；

        padding-left   左内边距；

4.margin  外边距   指的是当前盒子和其他盒子之间的距离。

          margin-top    上外边距    盒子正值向下移动，负值向上移动；

          margin-right  右外边距    默认情况，设置margin-right是没有效果；

          margin-bottom  下外边距   盒子自己不动，挤下面的盒子移动，正值向下，负值向上；

          margin-left    左外边距   盒子正值向右移动，负值向左移动；

        注：大小可正可负！

   margin: 后也可跟多个值，4个，3个，2个，1个皆可，规则跟padding一样。