盒子模型1

文档流

文档流（normal flow）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层

      我们创建的元素默认情况下，都在文档流中
      元素分为两种状态：在文档流中，脱离文档流
					 
		元素在文档流中的特点
			块元素
       1:会独占一行
       2:块元素的宽度默认是父元素的100%
       3:块元素的高度默认是被内容撑开的
			内联元素（行内元素）
       1:不会独占一行
       2:宽度高度默认都是被内容撑开的，不能自己定义宽高
    行内块元素
       1、不会独占一行，可以设置宽高

  一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

模型介绍与面题

面题：什么是盒子模型，为什么要用盒子模型，影响盒子模型的大
小因素有哪些？

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大
小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形，只需要考虑大小即可 


    盒模型、盒子模型、框模型（box model）
    内容区     冰箱
    内边距     泡沫
    边框       纸盒子
    外边距      快递的位置

    影响盒子大小的因素：内容区，内边距，边框会影响盒子的大
    小，外边距不会影响
  


1:内容区(content)  
    元素中所有的子元素和文本内容都在内容区中排列
    默认情况：设置width，height都是内容区宽高
    

2:边框（border）元素设置边框
	  	边框属于盒子边缘，边框里面属于盒子内部，出了边框
	  	都是盒子的外部
  		设置边框必须指定三个样式 边框大小、边框的样式、边
  		框的颜色

盒子模型—边框

  		边框（border）元素设置边框
	  	边框属于盒子边缘，边框里面属于盒子内部，出了边框
	  	都是盒子的外部
  		设置边框必须指定三个样式 边框大小、边框的样式、
  		边框的颜色
      边框大小：border-width
      边框样式：border-style
      边框颜色：border-color

   掌握：   跟多个值的情况、单独设置某一边、默认值、样式
                 的可选值
           箭头的写法
边框的大小   如果省略，有默认值，大概1-3px ，不同的浏览器
默认大小不一样
    border-width 后可跟多个值
       四个值   上   右  下  左
       三个值   上  左右   下
       二个值   上下  左右
       一个值   上下左右
       
    单独设置某一边的边框宽度
     border-bottom-width
     border-top-width
     border-left-width
     border-right-width
     边框的样式   
       border-style  可选值
        默认值：none
        实线  solid
        虚线  dashed
        双线  double
        点状虚线   dotted
        设置边框的颜色  默认值是黑色
       border-color  也可以跟多个值
       四个值   上   右  下  左
       三个值   上  左右   下
       二个值   上下  左右
       一个值   上下左右
       对应的方式跟border-width是一样

      单独设置某一边的边框颜色
      border-XXX-color: ;  
      写border 
       1、 同时设置边框的大小，颜色，样式，没有顺序要求
       2、可以单独设置一个边框
          border-top:; 设置上边框
          border-right  设置右边框
          border-bottom  设置下边框
          border-left   设置左边框
       3、去除某个边框
           border:none;

盒子模型—内边距

内边距  padding
  是内容区和边框之间的距离，会影响到整个盒子的大小
  1、  padding-top: ; 上内边距
    padding-left:;  左内边距
    padding-right:;  右内边距
    padding-bottom:;  下内边距
  2、padding简写  可以跟多个值
      四个值  上  右  下  左
      三个值  上  左右  下
      二个值   上下   左右
      一个值   上下左右

盒子模型—外边距

外边距  不会影响到盒子的大小
    可以控制盒子的位置
       margin-top:;  正值 元素向下移动  负值 元素向上移动
       margin-left:; 正值  元素向右移动  负值  元素向左移动
       margin-bottom:;  正值  元素自己不动，其靠下的元素向下移动，负值 元素自己不懂，其靠下的元素向上移动
       margin-right: ; 正值负值都不动
    简写 margin  可以跟多个值
      规则跟padding一样