学习编程的第九天

• 第一种解决抖动的方法 border: 10px solid transparent; 第二种解决抖动的方法
  box-sizing 控制盒子width和height组成部分
  可选值：
  content-box 默认情况下， 盒子width指的内容区宽度
  border-box 盒子的width和height指的是内容区，内边距，边框的大小
  margin 外边距 指的是当前盒子和其他盒子之间的距离
  margin-top 上外边距 盒子正值向下移动，负值向上移动
  margin-right 右外边距 默认情况，设置margin-right是没有效果
  margin-bottom 下外边距 盒子自己不动，挤下面的盒子移动，正值向下，负值向上
  margin-left 左外边距 盒子正值向右移动，负值向左移动
  margin:;
  后也可跟多个值，4个，3个，2个，1个皆可，规则跟padding一样
  水平方向有七个值 margin-left+border-left+padding-left+width+padding-right
  +border-right+ margin-right 浏览器规定： 水平方向的七个值相加必须等于其父元素内容区的宽度，如果不等于， 那么浏览器就会自动调整七个值中的某值，让其成立，这就叫过度约束
  10+10+20+100+20+10+10 ==600 ？？

  如何调整：
  1、七个值中如果没有auto，那么浏览器默认调整的是margin-right
  10+10+20+100+20+10+ 430 ==600
  2、七个值中如果有auto，则浏览器就会调整auto
  可以设置auto大小的属性，是margin-left width margin-right
  (1)1个auto，谁是auto，浏览器就调整谁
  （2）2个auto
  margin-left width auto margin-right固定值 调整width
  width margin-right auto margin-left固定值 调整width
  margin-left margin-right auto width 固定值 左右外边距平分，盒子会居中显示
  （3）3个auto
  margin-left width margin-right 调整width

    总结：
      浏览器调整
         width>margin
         子元素是在父元素的内容区中排列的
      如果子元素的大小超过了父元素，则子元素会从父元素中溢出
      使用overflow属性设置父元素如何处理溢出的子元素
          可选值：
             visible  默认值  子元素会从父元素中溢出，在父元素外部的位置显示
             hidden   溢出的内容将会被裁剪不会显示
             scroll   生成两个滚动条，通过滚动条来查看完整的内容
             auto     根据需要生成滚动条
             
       额外两个属性，了解一下   
       overflow-x
       overflow-y