新手提问CSS box-sizing:border-box问题

新手才开始学css没多久,所以提的问题比较基础

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 div{font-size:24px; text-align:center; border:4px solid ; width:400px; } .one{ border-color:#F00; padding:30px; box-sizing:border-box;} .two{ border-color:#3FF;}

the first test
the second test


图片说明

加上box-sizing:border-box;后 第一个div框还是变大,哪里出了问题呢?

2个回答

楼主,你想让box1和box2显示一样的宽度(也就是400px),得在.one的css样式中加上width:332px; 因为一个div的真实宽度=width+2*border+padding-left+padding-right,所以,不想div框变大,就得用400px减去2倍的border再减去2倍的padding,也就是332px

  • 标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 图片说明
  • ie 盒子模型的范围包括 margin、border、padding、content,content 部分包含了 border 和 pading。 图片说明
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐