铁雪资源网 Design By www.gsvan.com
在html文档中,每个渲染在页面中的标签都是一个个盒子模型。
盒子模型又分为 : W3C标准的盒子模型
和 IE标准的盒子模型
。
由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型)
用两个简单的例子分别介绍下这两个盒子模型:
标准盒模型:
<!--html--> <div class="box1"> <div class="box2"></div> </div>
<!--css--> .box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; } .box2{ width: 200px; height: 200px; background-color: red; }
这里外层盒子的width和height都是:30 + 200 + 30 = 260px。
怪异盒模型
<!--css中加入box-sizing属性--> <!--box-sizing属性:border-box(怪异盒子模型),content-box(标准盒模型)--> .box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; box-sizing: border-box; } .box2{ width: 200px; height: 200px; background-color: red; }
这里外层盒子的width和height都是:30 + 140+ 30 = 200px。
这里得出一个结论:
标准盒模型,一个块的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右)
怪异盒模型,一个块的总宽度 = width(content + border + padding)+ margin(左右)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无详解CSS 怪异盒模型和标准盒模型的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。