1.11 用户界面

• box-sizing 盒子模型大小计算方式
• outline-offset 轮廓线外移
• resize 用户可拖动大小

box-sizing 盒子模型大小计算方式

• 盒子模型的宽高计算方式

content-box 仅内容计算
border-box  包括边框计算
inherit     继承

• 举例

<div>
    <!--内容就占了 100%，加上边框就放不下了，所以会换行-->
    <div style="float:left;width:50%;box-sizing: content-box;border: 20px solid red">123</div>
    <div style="float:left;width:50%;box-sizing: content-box;border: 20px solid red">123</div>
</div>

<div>
    <!--设置了边框计算；共就占 100%，所以不会换行-->
    <div style="float:left;width:50%;box-sizing: border-box;border: 20px solid red">123</div>
    <div style="float:left;width:50%;box-sizing: border-box;border: 20px solid red">123</div>
</div>

outline-offset 轮廓线外移

• 有何用？

<div style="width: 100px;height: 100px;
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;">
</div>

resize 用户可拖动大小

<div style="width: 100px;height: 100px;
    border:2px solid;
    resize:both;
    overflow:auto;">

</div>