服务热线:13814106501

box-sizing 返回

写前端的人知道,一个块规定了宽和高再设定这个块的边框,此时这个块的宽和高需加上这个边框的值。CSS3解决了这个问题:box-sizing:border-box 下面用图文的方式来解释下这个属性的效果。

HTML:

<div class="demo">

    <div class="demo_border"></div>

</div>


STYLE:(没有加box-sizing)

.demo{width:300px;height:300px;background:#f0f0f0;position:relative;}

.demo_border{width:300px;height:300px;border:10px solid #009933;}

显示效果:

STYLE:(加box-sizing)

.demo{width:300px;height:300px;background:#f0f0f0;position:relative;}

.demo_border{width:300px;height:300px;border:10px solid #009933;box-sizing:border-box;}

显示效果:


×
确定 取消
×
登录●注册
个人中心
登录
注册
重设密码
×

用户登录

×

用户注册

请用微信扫描,将为您自动生成账号 →
欢迎咨询 您本次的消息将以邮件方式发送给我们