html标签与body标签的解析

之前做活动的时候,需要前置操作然后显示弹框,但是后来交互说弹框之后要把背后的body的滚动给禁掉,弹框关闭之后恢复body的滚动,而且交互了给了个样例的网站,审查元素看了下,就是弹窗的时候,给html标签加上overflow:hidden,关闭弹窗的时候恢复html成overflow:auto就可以滚动了。

而且之后在移动端这个方法出现了一个bug#问题19,当显示蒙层与弹窗的时候,滑动屏幕的时候,弹框跟蒙层也会跟着body滚走,然后停止滚动,蒙层跟弹框也回复了正常,出现的问题是,我明明给html加了overflow:hidden,为什么还会出现滚动条,就算我禁止了蒙层、body的touchmove事件也不行,最终的解决方案是给html加了overflow之后又加了position:fixed。虽然问题解决了,但是这又引出了一个问题,滚动条是谁的,应该给谁加overflow:hidden,所以这个问题首先得了解html、body标签,找到了这篇文章,我就根据我的理解大概翻译一下。废话较多,可直接滚底看结论

概述

许多的web开发者不了解给html与body元素设置样式有什么不一样,大多数时候开发者只是给body设置样式,当不起作用的时候,他们会把所有的样式都加到html与body元素上,直到出现觉得符合他们的期望的效果了,但是他们并不知道样式是在谁的身上起了作用。
出现这种混乱的情况是可以理解的,因为一开始,我们都认为这两个元素是一样的,因为我们给html或body加一个背景色,整个页面都起作用了。这篇文章试图开导作为web开发者的你,在现代浏览器中,这两个元素的有什么区别

块级元素中内容的表现

首先,让我们来看一下当块级元素中有内容的时候的表现:

没有定高也没有overlfow属性的时候

从上面的例子我们可以看出,块级元素没有指定高度的时候,它会自动调整自己的高度来包含它的内容,以至于不会超出它的范围。那么我们给块级元素设置高度,那么它的表现回事怎么样的呢?那么这个就要取决于css overflow属性的值了。那么就来看下当给块级元素设置高度的时候,根据overflow属性值的不同的表现

Paste_Image.png

根据以上的图片,大家应该能了解了overflow的各种属性值的表现情况。但是需要特别说明的是overflow:auto;这个属性值。当我们需要实现当内容比我们限定的高度高时就出现滚动条,否则不出现,这个时候我们就应该使用overflow:auto,而不是overflow:scroll;因为在firefox下只要设置了overflow:scroll值,就算内容高度小于限定的高度,也会出现滚动条。

那么滚动条是从哪里来的呢

在很多的html页面中,都是有足够多的内容填充页面而导致右边出现了滚动条,那么滚动条是从哪里来的呢,魔法?或者是ui间的幽会?或许,我们更加愿意相信的是因为html元素默认添加了css样式规则 html{overflow:auto}

但是你会觉得,就算html元素默认加了overflow:auto,但是它没有设置高度啊,块级元素不是设置了高度跟overflow:auto才能出现滚动条的吗。对的,你想的没错,但是html这个块级元素有那么一点点特别。

根据我的验证,当给html元素设置高度height:100%时,html元素的高度等于浏览器窗口的高度,当内容高度高于浏览器高度时,html元素就会出现滚动条,这个普通的块级元素是一样的。而没给html元素设置高度时,它的高度是由内容决定的,当内容的高度大于浏览器窗口的高度时,虽然html元素的高度跟元素内容一样高,但是也会出现滚动条,着显然不符合块级元素的规则,根据我的猜测,html的滚动条出现的临界条件应该是,不管html的高度是多少,只要html的高度大于浏览器窗口的高度就会出现滚动条。这可能也是html元素的特别之处?

Paste_Image.png

如上图,我没有给html、body元素设置高度,且我的浏览器窗口的高度是324px,但是html元素的高度却达到了398px,并且出现了滚动条。如果给html设置了高度,并且加了overflow:hidden,但是超出高度的部分仍然可见,但是滚动条消失了

Paste_Image.png

由上可以总结出两点:

  1. 如果给html元素设置了高度并且加了overflow:hidden,内容并不会被隐藏掉,而是超过浏览器高度的部分被隐藏掉。
  2. 只要给html元素设置了overflow:hidden,滚动条都会被禁掉(android发现特列),不管有没有给html元素设置高度。
最终结论
  1. html 与 body标签是不同的块级元素,是父子关系
  1. html元素的宽与高取决于浏览器的宽高。html元素是块级元素,根据块级元素的性质,html默认宽度是占一行的,也就是浏览器窗口的宽度。如果没给html设置高度,那么默认的高度就是有它里面包含的内容高度所决定的,如果给html设置了height:100%,那么它的高度就是浏览器窗口的高度。
  2. html元素默认设置了overflow:auto的css样式,在需要的时候就会显示滚动条。也就是它里面的内容高度超过了浏览器窗口的高度,不管html有没有加上高度,都会出现滚动条。
  3. body元素默认的定位是position:static,基于 **设置了定位的元素是参考该元素最近的、且设置了非static定位属性的父元素 来定位 **的原则,那么所有定位子元素(父元素没设置定位属性)的定位都是相对于html元素的坐标系统。
  4. 在几乎所有的现代浏览器中,页面跟浏览器窗口的偏移量是通过给body元素设置margin属性,而不是给html元素设置padding属性。我给html设置了padding也是起作用的。

参考原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,219评论 1 41
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,132评论 0 1
  • 数组前面添加 var arr=[1,3]; arr.push(4); console.log(arr); var ...
    G_whk阅读 185评论 0 0
  • 总觉得今年过得特别特别快,快到我都不觉得自己做出了什么成绩,有什么难忘的回忆,2015年就已经剩下30个小时不到了...
    果仔噼里啪啦阅读 244评论 0 0