资讯专栏INFORMATION COLUMN

子元素相对于父元素百分比尺寸问题

NeverSayNever / 1321人阅读

摘要:百分比尺寸问题子元素尺寸相对于父元素尺寸,以百分比的形式确定时,需要注意的是,此时默认的盒模型是的标准盒模型。



    
    百分比尺寸问题
    
    


子元素尺寸相对于父元素尺寸,以百分比的形式确定时,需要注意的是,此时默认的盒模型是W3C的标准盒模型。
container的width是100%,相对于root。root的尺寸 width: 800px; height: 600px;padding: 0 50px;
那么此时container的width具体是多少呢?800px。不是(800 + 50 2) 100% = 900px

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

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

相关文章

  • margin/padding分比值的计算

    摘要:还有一种说法是根本原因并不是因为死循环。,总而言之就是在默认的水平文档流方向下,和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。 1、百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到流式页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式,使其子元素使用百分数外边距,当...

    jsummer 评论0 收藏0
  • margin/padding分比值的计算

    摘要:还有一种说法是根本原因并不是因为死循环。,总而言之就是在默认的水平文档流方向下,和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。 1、百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到流式页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式,使其子元素使用百分数外边距,当...

    Pikachu 评论0 收藏0
  • 360前端星计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    lpjustdoit 评论0 收藏0
  • 360前端星计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    mumumu 评论0 收藏0

发表评论

0条评论

NeverSayNever

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<