盒模型

Posted 2020-10-16 Canace

1. 标准盒模型：
   因为 width = margin_box_width(left_width + right_width) + border_width + padding_box_width(left_width + right_width) + content_box_width，所以，同样宽度的内容因为margin和padding值不一样，撑开了内容块的宽度，显示出来的效果不尽相同。为了解决这个问题，IE8+可以用设置box-sizing：border-box来避免内容块的宽度被撑开。因此，一般可以进行如下设置，使content_box_width = width 。

   *{
               -webkit-box-sizing:border-box;
               -moz-box-sizing:border-box;
               box-sizing:border-box;
           }

2. 弹性盒模型：
   弹性布局相比传统的块布局要简洁很多，但是实现原理差别挺大的。首先，要想进行弹性布局，要设置display:flex，确定弹性容器。然后要知道弹性容器里面的内容块定位是由两条轴即主轴和测轴确定的。主轴由flex-direction属性值确定是横向还是纵向，justify-content属性则确定内容块在主轴上的分布形式。内容块在测轴上的分布形式由align-item确定，也可以用align-self确定单个的内容块分布形式，不过这会覆盖掉align-item的值。目前弹性盒布局还没有完全普及，PC端浏览器支持还不是很好，更多的是用于手机端的布局。