学习——第六天

一 文档流（normal flow）

        网页是一个多层的结构，css可以给每一层设置样式，最终我们看到是最上面的一层。

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

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

             

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

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

  块元素：

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

  行内元素

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

  行内块

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

注意：

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

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

二 盒子模型

布局相关样式

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

盒模型、盒子模型、框模型

网页中也有很多的元素，将各种元素摆放在合适的位置，盒模型将页面所有元素的形状都统一了，你在布局时，只需要考虑到元素的大小即可

举例：

       盒模型                   快递

       内容区 content           冰箱

       内边距 padding           泡沫

       边框   border           快递盒子      

       外边距 margin           快递离你的距离

         

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

三 盒子模型——边框

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

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

        三要素顺序是无所谓

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

        border-top

        border-right

        border-bottom

        border-left

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

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

2.边框的宽度  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

3. 边框的颜色  border-color

（1）可以设置多个值

             规则跟border-width是一样

（2）单独设置某一边的颜色

               border-XXX-color:;

                XXX:top、right、bottom、left

（3）小箭头的写法

          border-color: transparent  transparent orange transparent ;

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

 4.边框的样式  border-style

1.边框样式的种类

      solid   实线

      dotted  点状的虚线

      dashed  虚线

      double  双线

2.可以写多个样式  

    规则跟border-width一样

3.单独设置某一边样式

     border-XXX-style:;

     XXX:top、right、bottom、left

4.border-style 默认值是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）设置3个auto

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

总结：

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

         width > margin-left margin-right

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