学习分享（6）

今天学习了盒子模型的有关原码和用法

      文档流（normal flow）

        网页是一个多层的结构，css可以给每一层设置样式，

          最终我们看到是最上面的一层。

        文档流是网页最底下的那一层

        元素分为两种状态：在文档流中，脱离文档流

             

      之前将元素分为三类，块元素、行内元素、行内块元素

       分别具有一些特点，这些特点都是元素在文档流中的特点

        块元素：

          不会独占一行，宽是父元素内容区宽度，高是被内容撑开

        行内元素

          不会独占一行，宽高是被内容撑开，不可以自定义宽高

        行内块

          兼具块元素，行内元素的特点

      注意：

       1、一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在

       2、我们创建的元素默认是在文档流

    /* 布局相关样式

        文档流默认的布局，浮动，定位，弹性盒子等*/

      /* 盒模型、盒子模型、框模型（box model）*/

      /*

      网页中也有很多的元素，将各种元素摆放在合适的位置，

        盒模型将页面所有元素的形状都统一了，你在布局时，

        只需要考虑到元素的大小即可

      */

      /*  盒模型                   快递

          内容区 content           冰箱

          内边距 padding           泡沫

          边框   border           快递盒子      

          外边距 margin           快递离你的距离

         

          盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系

    边框（border） 边框用来隔开盒子内部和盒子外部

      设置边框，三个要素，缺一不可   宽度、颜色、样式

        边框的宽度  border-width

          1、可以设置多个值，以空格隔开即可

            4个值   上  右  下  左

            3个值   上  左右   下

            2个值   上下  左右

            1个值    上下左右

          2、单独设置某一边的宽度

          border-top-width: ;  

          border-bottom-width: ;

          border-left-width: ;

          border-right-width: ;

          3、border-width  是由默认值，默认大小在1-3px

        边框的颜色  border-color

          1、可以设置多个值

             规则跟border-width是一样

          2、单独设置某一边的颜色

               border-XXX-color:;

                XXX:top、right、bottom、left

          3、小箭头的写法

          border-color: transparent  transparent orange transparent ;

          4、border-color 有默认值，默认值是黑色

        边框的样式  border-style

           1、边框样式的种类

              solid   实线

              dotted  点状的虚线

              dashed  虚线

              double  双线

          2、可以写多个样式  

          规则跟border-width一样

          3、单独设置某一边样式

            border-XXX-style:;

                XXX:top、right、bottom、left

          4、border-style 默认值是none

     -->

    <!--

      边框 border

      1、语法： border: 大小 颜色 样式;

        三要素顺序是无所谓

      2、单独设置某一边的边框

        border-top

        border-right

        border-bottom

        border-left

      3、 border-bottom: none;  不要某边边框  

    -->

      /* 内边距  padding  是边框和内容区之间的距离

      1、可以单独设置某一边的内边距

        padding-top:;

        padding-right: ;

        padding-bottom:;

        padding-left:;

      2、内边距padding简写

         可以写多个值，规则跟border-width是一样

    */

      .box1 {

        width: 200px;

        height: 200px;

        background-color: #bfa;

        border: 10px green solid;

        /* padding-top: 30px;

        padding-right: 30px;

        padding-bottom: 30px;

        padding-left: 30px; */

        padding: 10px 40px;

      }

      /* 创建一个子元素box2占满box1，box2把box1内容区撑满了*/

       外边距  margin

          不影响盒子的大小，可以改变盒子的位置

         margin-top   设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动

         margin-right 设置元素右外边距，元素是没有效果

         margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动

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

       

         margin简写

           margin 可以设置多个值，规则跟padding一样

今天就学到这么多谢谢大家