盒模型的实际尺寸

盒模型的实际尺寸

按照下面代码制作页面:




    
    盒子的真实尺寸
    


    
1

2

3

页面显示效果如下:

通过上面的页面得出结论:盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下:

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

理解练习

通过盒子模型的原理,制作下面的盒子:

你可能感兴趣的:(HTML)