学习css的第四步 盒子模型

文档流：

      网页是一个多层的结构，一层叠着一层，网页的最底层，我们叫文档流

      我们所创建的标签,默认都是在文档流中，

      标签特点的分类前提条件：标签必须在文档流中

        块标签，行内标签，行内块标签，

      一旦标签脱离文档流，

          就不在区分块、行内、行内块标签了，各自的特点也就不存在了

          也就是说块标签不会独占一行了，行内标签也可以设置宽高了，行内块标签三像素问题也没有了

      标签如何脱离文档流

          设置标签浮动、绝对定位、弹性盒子等等  

元素之间的转换

display：；

        可选值：

          block  将元素转成块标签

          inline-block   将元素转成行内块标签

          inline  将元素转成行内标签

          none

盒子模型

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

      内容区（content）   放内容的区域                     

      内边距（padding）   内容区与边框之间的距离              

      边框（border）      边框分割开盒子里面和外面            

      外边距（margin）   控制盒子的位置                    

      影响盒模型大小的部分：内容区，内边距，边框

      跟外边距无关  

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

            设置width，height  是内容区的大小

            不能说是整个盒子的大小

盒子模型-边框

1:border-width  默认值一般是3px

使用border-width可以分别指定四个边框的宽度

除了border-width，CSS中还提供了四个border-xxx-width

  xxx的值可能是top right bottom left

专门用来设置指定边的宽度  

2:border-color  设置边框的颜色  默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

3:border-style

 设置边框的样式   可选值：

  none，默认值，没有边框     

 solid 实线

  double 双线

  dashed [dæʃt] 虚线

     dotted ['dɔtid] 点状边框

 style也可以分别指定四个边的边框样式，规则和width一致，

  同时它也提供border-xxx-style四个样式，来分别设置四个边

 border

   - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

   - 而且没有任何的顺序要求

   - border一指定就是同时指定四个边不能分别指定

  border-top border-right border-bottom border-left

  可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

内边距

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

        padding-XXX: ;

          xxx:top,bottom,right,left

        2、padding后也可以跟多个值，规则跟border-width一样

        3、内边距是盒子内部的，会影响到盒子的大小

外边距

      1、  margin-top:;   正值，元素会向下移动，负值：元素向上

        margin-left:50px ;正值，  元素会向右移动  负值：元素向左

        margin-bottom: ;  正值， 元素本身不动，其下方元素向下移动，负值，其下方元素向上移动

        margin-right: ;   块元素独占一行，设置右外边距是没有效果的

      2、margin  同时设置

        后面也可以跟多个值，规则跟border-width一样

水平布局

      水平方向能够影响元素大小和位置的构成是哪些

元素水平方向7个值相加，浏览器规定必须等于其父元素内容区的宽度 ,如果等式不成立

浏览器会自动调整其值，使其相等  ，这个过程叫过度约束

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

0px 0px 0px 100px 0px 0px 0px  ！= 600px

浏览器如何调整？

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

    0px 0px 0px 100px 0px 0px  500px == 600px

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

      1个auto   ==>谁是auto，浏览器就调整谁

          auto 0px 0px 100px 0px 0px 0px  == 600px  auto=500px=margin-left

          0 0px 0px 100px 0px 0px auto  == 600px    auto=500px=margin-right

          0 0px 0px  auto  0px 0px 0px  == 600px    auto=600px=width

      2个auto

        margin-left width  

          auto 0px 0px auto 0px 0px 0px  == 600px  调整width

        width margin-right

          0px 0px 0px auto 0px 0px auto  == 600px  调整width

        margin-left  margin-right

          auto 0px 0px 100px 0px 0px auto  == 600px  同时调整margin-left  margin-right

      3个auto

          auto 0px 0px auto 0px 0px auto  == 600px  调整width

      总结：

         margin-left  margin-right   width 三个中中，如果width是auto，只调整width

         如果width如果固定值，margin-left  margin-right为auto，则元素会水平居中