CSS:box-sizing的使用

来源：互联网发布：成立淘宝客团队编辑：程序博客网时间：2024/06/05 19:54

box-sizing属性为三个值：content-box,border-box,inherit

值的功能：

content-box：width不包含border和padding

border-box：width包含border和padding

inherit：继承父元素的box-sizing值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #E6A43F;        background: blue;    }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px solid #3DA3EF;        background: yellow;    }</style></head><body><div class="content-box"></div><div class="border-box"></div></body></html>

蓝色正方形

黄色正方形

0 0