HTML.盒子模型（2）

第一种解决抖动的方法

         border:  10px solid transparent; 

         第二种解决抖动的方法  

        box-sizing 控制盒子width和height组成部分

           可选值：

             content-box  默认情况下， 盒子width指的内容区宽度

             border-box    盒子的width和height指的是内容区，内边距，边框的大小

设置外边距 

     margin-top: 100px; 

        margin-left: 100px; 

        margin-bottom: -100px; 

      }

      .box1:hover {

        border: 10px solid red;

      } 

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  

默认情况下，块元素宽高是被内容撑开的，如果自定义，那就听你设置的宽高

         如果父元素宽高设置，小于内容区，则内容就会溢出

         overflow属性设置

            可选值：

              visible  默认值  内容正常显示

              hidden   裁剪多余的内容

              scroll   生成双侧的滚动条

              auto     按实际情况生成滚动条

          overflow-x: ; 单独设置水平方向的溢出内容

          overflow-y: ; 单独设置垂直方向的溢出内容

垂直外边距的重叠

    -兄弟元素

      如果外边距都是正值的话，外边距设置谁大听谁的

      如果一正一负，外边距的设置，两者相加的和

      如果两个都是负值，外边距的设置，绝对值大的听谁

   

      注意：兄弟元素的外边距重叠问题，一般不需要额外做处理，他是有助于我们开发

    -父子元素

    如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，从而导致页面布局混乱

      所以必须要处理

      解决方案：

        1、隔开父子相邻的外边距   用边框  

            但边框会影响到盒子的大小，也会改变页面的布局

        2、开启元素BFC属性：overflow：非visible的值