文章类别:首页>编程技术>前端>CSS

CSS基础知识5—盒子模型实际尺寸的计算

发布时间:2024-10

浏览量:58

本文字数:368

读完约 2 分钟

盒子的真实尺寸计算公式如下:

  • 盒子宽度 = width + padding左+padding右 + border左+border右

  • 盒子高度 = height + padding上+padding下 + border上+border下

.box01{
    width:50px;
    height:50px;
    background-color:gold;
}
.box02{
    width:50px;
    height:50px;
    background-color:gold;
    border:50px solid #000;
}
.box03{
    width:50px;
    height:50px;
    background-color:gold;
    border:50px solid #000;
    padding: 50px;
}
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>

效果如下:



^