让你五分钟了解width的计算

如果问 CSS 中的 width 表示什么，通常会得到的回答的「元素宽度」。但这是个相当模糊的概念，因为在不同的盒子模型中元素宽度的概念是不同的。如果问 width 属性的百分比取值怎么计算，通常会得到的答案是「容器宽度」，这又是另一个模糊的概念。 width 到底是个啥？ 盒子模型有 border-box、padding-box、content-box 三种。在 border-box 在中，width 表示包括了 border、padding、content 三部分的宽度总和，padding-box 中 width 不包含 border 部分的宽度，只计算 padding 和 content 部分，而 content-box 只表示 content 部分的宽度。 width 的百分比取值到底怎么计算？ 无论一个元素的容器是何种盒子模型，在其 position 属性为 static 或 relative 时 width 的百分比取值时总是相对于容器的 content-box 来计算。但是如果 position 属性为 absolute，其 width 属性就会寻找祖先元素中最近的非 static 元素，并以这个元素的 padding-box 作为计算参考。如果 position 属性为 fixed，则 width 的百分比取值直接相对于文档宽度来计算。 margin 的影响 常规流中的块级元素是自适应容器的，但是这个「自适应容器」的概念其实也很模糊。所谓「自适应容器」确切地说就是让一个元素尽可能地填满容器（在水平方向上），也就是让元素的「占用空间」（这是 margin-box 的概念，实际上 box-sizing 目前没有 margin-box 这个取值）恰好等于容器的 content-box 宽度。 溢出与滚动条 元素的 content 宽度并不等价于其内容的宽度，内容完全可以超出元素的 content 宽度，并通过 overflow 属性控制超出后的行为。如果元素不是自适应内容的，那么无论 overflow 的取值如何，其 content 宽度就不会因为内容的溢出而增加（但要注意如果出现滚动条的话滚动条占用的宽度可能使 content 的宽度减小）。如果元素是自适应内容宽度的，那么 CSS 引擎要先计算内容的宽度，并将其作为容器的 content 宽度，然后再对内容中的 width 百分比取值做计算。 注意事项 了解以上几种情况基本上可以满足一般业务需求了。但要注意垂直方向的计算和水平方向是存在差异的，不要把这套宽度计算细则直接用于垂直高度。对于垂直方向与水平的差异见 height 与 width 的计算差异。 本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

网站名称：让你五分钟了解width的计算
链接分享：https://www.cdcxhl.com/news44/326444.html

成都网站建设公司_创新互联，为您提供自适应网站、网站收录、面包屑导航、App设计、网站制作、服务器托管

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联