【前端】CSS盒子模型

Keagan 发布于2019-08-30 15:55 / 1458人阅读

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型组成为。盒子模型盒子模型的盒子模型的意味着盒子的和的大小是上述属性相加的最大总和。标准盒子模型盒子模型的盒子模型的盒子模型大小计算就简单多，设置的和就是内容大小。

盒子模型

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。

盒子模型组成为：margin、border、padding、content。

CSS盒子模型分为：标准W3C盒子模型，IE盒子模型。两者最大不同在于对于css的width和height的大小设置。下面所说的width和height是css中的宽高。

IE盒子模型

IE盒子模型的width = contentWidth + padding-left + padding-right + border-left + border-right
IE盒子模型的height = contentHeight + padding-top + padding-bottom + border-top + border-bottom

意味着IE盒子的width和height的大小是上述属性相加的最大总和。若content的大小、padding大小、border的大小总和大于css设置的宽高。例如增加padding宽度大小使得盒子宽度大于设置的宽度会将content的大小被压缩，最终content大小会变为0。box的总宽度会大于设置的width大小。

    #ie_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        border: 5px solid brown;
    }

标准W3盒子模型

W3盒子模型的width = contentWidth
W3盒子模型的height = contentHeight
W3盒子模型大小计算就简单多，css设置的width和height就是content内容大小。padding、border的大小并不会影响content的大小。

    #w3_box {
        margin: 30px;
        width: 200px;
        height: 200px;
        background-color: bisque;
        padding: 10px;
        border: 5px solid brown;
    }

小结

对于ie和w3两种盒子模型，相比较而言w3盒子模型会比ie盒子模型更好用些，也不容易混淆css中的width和height，同时也方便计算盒子的实际宽高大小，也不会出现ie盒子模型由于属性设置超出预设宽高而挤压content显示。

GPU云服务器云服务器盒子模型前端css css前端前端css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117306.html

「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？

摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

iOS122 2019-08-29 11:13 评论0 收藏0