div盒模型宽高计算
生活随笔
收集整理的這篇文章主要介紹了
div盒模型宽高计算
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、計算div盒模型寬高
div盒模型寬度 = width + 左右padding + 左右border（不包含左右margin）
div盒模型高度 = height + 上下padding + 上下border（不包含上下margin）
二、固定div盒模型寬高
設置box-sizing: border-box;使div盒模型寬度 = width ，div盒模型高度 = height 。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型計算</title><style>.box{width: 100px;height: 100px;margin: 20px;padding: 20px;background-color: #ccc;border: 1px solid #000;box-sizing: border-box;}</style> </head> <body><div class="box" id="box"></div><script>var box=document.getElementById('box');console.log('box的寬度為：' + box.offsetWidth + 'px');console.log('box的高度為：' + box.offsetHeight + 'px');</script> </body> </html>總結
以上是生活随笔為你收集整理的div盒模型宽高计算的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot微信小程序授权登录
- 下一篇： 因为docker酱的小鲸鱼宝宝很可爱所以