从零开始学习CSS（4）

前言：

今天是学习CSS的第四天，让我们看看今天的学习内容

  文档流（normal flow）

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

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

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

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

             

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

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

        块元素：

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

        行内元素

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

        行内块

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

      注意：

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

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

布局相关样式

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

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

      /*

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

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

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

      */

      /*  盒模型                   快递

          内容区 content           冰箱

          内边距 padding           泡沫

          边框   border           快递盒子      

          外边距 margin           快递离你的距离

         

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

      */

      .box1{

        width: 100px;

        height: 100px;

        background-color: red;

      }

      /*

      1、内容区 content：

         width:; 内容区的宽

         height:;  内容区的高

 边框（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是一样

 外边距  margin

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

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

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

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

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

       

         margin简写

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

面试题： 什么是过度约束，浏览器是如何调整水平方向值？ */

     /*    

     水平方向能影响到inner所占位置的因素有哪些

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

   过度约束：

      浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，

      如果不等于，浏览器就会进行调整，让等式成立

margin-left+border-left+padding-left + width + padding-right +

border-right+ margin-right=父元素内容区的宽度

40+20+0+100+0+20+0=600

  180 ！= 600

  浏览器如何调整

    1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值

    40+20+0+100+0+20+ 420 =600

    2、7个值当中，有3个值可以设置auto，margin-left width margin-right

     （1） 设置1个auto   谁是auto，浏览器就调整谁

        margin-left  

          auto+20+0+100+0+20+0=600  auto=460

        width

          40+20+0+auto+0+20+0=600  auto=520

        margin-right

    （2）设置2个auto

        margin-left width    调整width

        width margin-right    调整width

        margin-left margin-right   同时调整margin-left margin-right

      设置3个auto

        margin-left width margin-right  调整的就是width

      总结：

      1、如果7个值当中有auto，调整的顺序

         width > margin-left margin-right

      2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto