[CSS] border-box 和 content-box

border-box

IE 盒子模型,占据网页面积:

宽度:width+margin*2
高度:height+margin*2

实际宽度:width,实际高度:height

content-box

默认的盒子模型,占据网页面积:

宽度:width+padding*2+border*2+margin*2
高度:height+padding*2+border*2+margin*2

实际宽度:width+padding*2+border*2,实际高度:height+padding*2+border*2

posted @   Himmelbleu  阅读(3)  评论(0编辑  收藏  举报
历史上的今天:
2023-08-30 TS - Vite 配置了路径别名还是提示模块未找到
2023-08-30 Node.js - path.resolve(__dirname, "/src") 无法拼接绝对地址
首页
随笔
博客园
我的
标签
管理
[CSS] border-box 和 content-box
发表于 2024-08-30 19:39
|
已有 3 人阅读
|
留下 0 条评论
|
全文字数 ≈ 47字

border-box

IE 盒子模型,占据网页面积:

宽度:width+margin*2
高度:height+margin*2

实际宽度:width,实际高度:height

content-box

默认的盒子模型,占据网页面积:

宽度:width+padding*2+border*2+margin*2
高度:height+padding*2+border*2+margin*2

实际宽度:width+padding*2+border*2,实际高度:height+padding*2+border*2

作者:Himmelbleu
出处: https://www.cnblogs.com/Himmelbleu/#/p/18389384
版权:本作品采用「 署名-非商业性使用-相同方式共享 4.0 国际 」许可协议进行许可。
文章目录
border-box
content-box
点击右上角即可分享
微信分享提示