学习编程的第九天

第一种解决抖动的方法 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