盒子模型2

水平布局

面题：什么是过度约束，浏览器如何调整？ 
  
浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内
容区的宽度，
如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们
管这个过程叫过度约束
margin-left border-left padding-left width  padding-right 
 border-right margin-right
  0    10   0   100  0   10   0  == 600
      120   =？  600

如何调整的
1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是
margin-right
    0    10   0   100  0   10   380  == 600
2、水平方向7个值当中，有三个值可以被设置为auto，width、
margin-left、margin-right
   有1个auto   ,谁是auto就调整谁
        width为auto
          0    10   0   580  0   10   0  == 600
        margin-left
          480    10   0   100  0   10   0  == 600
        margin-right
          0    10   0   100  0   10   480  == 600

   有2个auto    width、margin-left；width、
   margin-right；margin-left、margin-right
      width、margin-left  为auto    调整的是width
      width、margin-right  为auto    调整的是width
      margin-left、margin-right 为auto  margin-left、
      margin-right各占一半，把元素挤到中间
  
   有3个auto  
     width、margin-left、margin-right都为auto，调整的
     是width

  总结：有auto的话
     width>margin-left、margin-right

垂直布局

块元素的高度默认情况是被内容撑开的，那如果设置，设置多少是多少
  一般情况，我们不给父元素设置固定的高度，
      让它根据子元素的内容自动调整高度

垂直布局 
       overflow属性
        可选值：
          visible 默认值  正常显示
          hidden 剪裁多余
          auto   自动根据内容显示是否出现滚动条
          scroll  生成双向滚动条

外边距的折叠

垂直外边距的重叠
-兄弟元素
   如果两个都是正值，谁大听谁的
   如果两个都是负值，绝对值谁大听谁的
   如果一正一负，两者相加，听最终结果

总结：兄弟元素的外边距重叠，对我们开发来讲，
        一般是有利，所以不用做特殊调整   
-父子元素
	  父子外边距重叠，它会影响页面其他元素，所以必须要
	  调整

   如何调整
     1、不用margin-top，给父元素用padding-top，同时减小
     父元素的高度
     2、在父子之间用边框隔开
     3、开启元素的BFC（隐含属性）
          overflow:hidden;

内联元素的盒子

行内元素的盒子模型
  内容区  不能设置宽高，是被内容撑开
  内边距   可以设置，但垂直方向不会改变页面的布局，也就是
  不会挤别人
  边框     可以设置，但垂直方向不会改变页面的布局，不会挤
  别人
  外边距    垂直方向不能设置外边距，水平方向可以设置，而
  且水平方向外边距不会重叠
  display 用来设置元素显示的类型
		       可选值：
			      inline  将元素设置为行内元素
				  block   将元素设置为块元素
				  inline-block  行内块块元素（即可以设
				  置宽高，又不会独占一行）
				  table   将元素设置为一个表格
				  none    元素不在页面中显示（隐藏一个
				  元素）

	visibility 用来设置元素的显示状态
				可选值：
				visible 默认值  元素在页面中正常显示
				hidden  元素不在页面中显示（隐藏一个
				元素），位置依然保留
		
面题：
  隐藏元素有几种方式，几者区别是什么
    1、display：none；   删除了元素，元素位置不保留
	2、visibility：hidden；  元素位置保留
	3、将元素变为透明     元素位置保留

默认样式

默认样式：
		     浏览器为了在页面中没有样式时，也可以有一个
		     比较好的显示效果，
		  	 所以为很多的元素都设置了一些默认的margin和
		  	 padding等等
		 	 而它的这些默认样式，正常情况下我们是不需要
		 	 使用的。
		     所以我们往往在编写样式之前需要将浏览器中的默
		     认样式都去除	 
		      方式一：
     1:清除浏览器的默认样式，手写，这种方式只适用于结构简
     单，小的练习
     方式二：
		   2:引入重置样式表 

盒子的大小

面题：说一说box-sizing，有几种情况 
  
  默认情况下：盒子可见框的大小由内容区，内边距，边框共同
  决定

        box-sizing  用来设置盒子尺寸的计算方式  
         width/height 指的是谁
            可选值：
                content-box 内容区 默认值
                border-box  宽度和高度用来设置整个盒子
                可见框的大小，包括边框，padding，内容区

阴影和圆角

知识点1:
      box-shadow 
         用来设置元素的阴影效果，不会影响到页面布局 
            第一个值：水平偏移量  正->左  负->右 ，必选
            第二个值：垂直偏移量  正->下  负->上 ，必选
            第三个值：模糊半径  默认0px，可选
            第四个值：颜色     默认是黑色，可选
知识点2:
         border-radius 用来设置圆角  以10px为半径画圆
         border-radius: 50%;  设置圆形

         borde-top-right-radius
         border-top-left-radius
         border-bottom-left-radius
         border-bottom-right-radius