V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
manyfreebug
V2EX  ›  JavaScript

在一个指定大小(指定 width 和 height 属性)的元素中放置一个更大的元素,会导致子元素的内容扩展到父元素的边界之外。浏览器为什么要允许子元素可以超出父元素限定的范围呢?这么设计的原因是什么?

  •  
  •   manyfreebug · 2019-01-06 16:50:39 +08:00 · 4020 次点击
    这是一个创建于 2129 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先看代码:

    <body>
        <!-- 父元素 -->
        <div style="width:100px;height:100px; border: 2px solid blue">
            <!-- 子元素  -->
            <div style="width:200px;height:200px; border: 2px solid red"></div>
        </div>
    </body>
    
    overflow.png
    我的本意原是 既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊,但浏览器显示的却是子元素可以轻轻松松突破父元素的范围限制,导致子元素的内容跑到父元素的边界之外了

    浏览器为什么要允许子元素可以超出父元素呢?或者当子元素超出父元素时,为什么不帮我报个错呢? 就如一个盒子,一个盒子里面怎么能装下一个比它更大的盒子?

    15 条回复    2019-01-21 17:49:08 +08:00
    qwertyzzz
        1
    qwertyzzz  
       2019-01-06 16:54:40 +08:00   ❤️ 1
    展示效果不就相当于给你报错了吗
    sunbing
        2
    sunbing  
       2019-01-06 17:01:06 +08:00 via Android   ❤️ 1
    如果不溢出来,你是发现不了的
    html 只是标记,浏览器只是把它转换成方便阅读的形式。
    t6attack
        3
    t6attack  
       2019-01-06 17:04:37 +08:00   ❤️ 1
    人家不是提供了 overflow:让你自己更灵活的处理嘛。
    geelaw
        4
    geelaw  
       2019-01-06 17:07:31 +08:00   ❤️ 1
    一个无聊的原因:这样可以方便地实现不占空间的装饰物。

    另一个原因:因为一开始就是这样的,为了兼容性。
    manyfreebug
        5
    manyfreebug  
    OP
       2019-01-06 17:15:17 +08:00
    @t6attack 在没有 overflow 这个属性的年代呢
    Pastsong
        6
    Pastsong  
       2019-01-06 17:26:26 +08:00 via Android   ❤️ 3
    @manyfreebug 没有 overflow 的年代 HTML 不是设计来布局的,而是展示文档的,一般情况展示全 content 比它的 box 重要
    lrz0lrz
        7
    lrz0lrz  
       2019-01-06 18:02:17 +08:00 via Android   ❤️ 2
    1、传统上网页是文档而非程序,所以 HTML 和 CSS 一般不报错,而是尽量把内容展示出来。

    2、问没有 overflow 属性的年代没什么意义,overflow 属性是在 98 年的 CSS 2 中提出的,而 CSS 定稿于 96 年底,所以这个年代只有一年多。而且那时的网页一般使用 HTML 属性而非 CSS 来排版,所以是否溢出需要自己控制,而且利用溢出可以实现很多效果。

    3、"既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊"

    待在父元素内也有 hidden 和 scroll 两种情况,也需要用 overflow 属性决定。
    Biwood
        8
    Biwood  
       2019-01-06 18:25:00 +08:00   ❤️ 1
    这样似乎更接近真实世界的模拟,就像你说的,一个盒子里面怎么能装下一个比它更大的盒子,但是你强行把一个大盒子装进一个小盒子里,会发生什么?总不能说因为你强行把大盒子塞进小盒子,它的尺寸就会因此变小吧。
    Shook
        9
    Shook  
       2019-01-06 18:27:21 +08:00   ❤️ 1
    允许超过是合理的,视界和实际大小并不冲突。
    dalieba
        10
    dalieba  
       2019-01-06 19:00:51 +08:00 via Android
    有没有让子元素缩小的办法
    JCZ2MkKb5S8ZX9pq
        11
    JCZ2MkKb5S8ZX9pq  
       2019-01-06 21:08:11 +08:00   ❤️ 1
    不要光把父元素理解为盒子,可以理解为视区,就能接受子元素更大的设定了。
    比如各种 image slider view,还有上面说的 scroll,还有比如文本长度未定的溢出,还有背景图的 cover size,或者不同终端父元素的尺寸适配变化,等等。
    JCZ2MkKb5S8ZX9pq
        12
    JCZ2MkKb5S8ZX9pq  
       2019-01-06 21:09:49 +08:00
    @dalieba 子元素不要定义长宽百分比,改为定义 zoom ?
    iNaru
        13
    iNaru  
       2019-01-06 21:34:31 +08:00   ❤️ 2
    如果不允许超出,那么滚动条就不需要诞生了。
    jera
        14
    jera  
       2019-01-06 22:29:15 +08:00   ❤️ 1
    父元素设成 BFC 就可以被撑开了
    kile
        15
    kile  
       2019-01-21 17:49:08 +08:00   ❤️ 1
    子元素父元素你要会理解啊...

    子元素实际上是以父元素为坐标系开始绘制的东西

    父元素只提供一个坐标系而已
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3608 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:26 · PVG 12:26 · LAX 20:26 · JFK 23:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.