热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

<body>标签属性详解,HTML中body标签的作用

发布时间:2021-06-11 17:08
  <body>标签属性详解,HTML中body标签的作用
  许多的web开发者不了解给html与body元素设置款式有什么不相同,大多数时分开发者只是给body设置款式,当不起作用的时分,他们会把一切的款式都加到html与body元素上,直到呈现觉得契合他们的期望的作用了,可是他们并不知道款式是在谁的身上起了作用。
  呈现这种混乱的状况是能够理解的,由于一开始,咱们都认为这两个元素是相同的,由于咱们给html或body加一个背景色,整个页面都起作用了。这篇文章企图劝导作为web开发者的你,在现代浏览器中,这两个元素的有什么区别
  块级元素中内容的体现
  首要,让咱们来看一下当块级元素中有内容的时分的体现:
  没有定高也没有overlfow特点的时分
  从上面的比如咱们能够看出,块级元素没有指定高度的时分,它会主动调整自己的高度来包括它的内容,以至于不会超出它的规模。那么咱们给块级元素设置高度,那么它的体现回事怎么样的呢?那么这个就要取决于cssoverflow特点的值了。那么就来看下当给块级元素设置高度的时分,依据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
标签
  由上能够总结出两点:
  假如给html元素设置了高度而且加了overflow:hidden,内容并不会被躲藏掉,而是超过浏览器高度的部分被躲藏掉。
  只需给html元素设置了overflow:hidden,滚动条都会被禁掉(android发现特列),不论有没有给html元素设置高度。
  最终结论
  html与body标签是不同的块级元素,是父子关系
  html元素的宽与高取决于浏览器的宽高。html元素是块级元素,依据块级元素的性质,html默许宽度是占一行的,也便是浏览器窗口的宽度。假如没给html设置高度,那么默许的高度便是有它里边包括的内容高度所决议的,假如给html设置了height:100%,那么它的高度便是浏览器窗口的高度。
  html元素默许设置了overflow:auto的css款式,在需求的时分就会显现滚动条。也便是它里边的内容高度超过了浏览器窗口的高度,不论html有没有加上高度,都会呈现滚动条。
  body元素默许的定位是position:static,根据**设置了定位的元素是参阅该元素最近的、且设置了非static定位特点的父元素来定位**的准则,那么一切定位子元素(父元素没设置定位特点)的定位都是相对于html元素的坐标系统。
  在几乎一切的现代浏览器中,页面跟浏览器窗口的偏移量是通过给body元素设置margin特点,而不是给html元素设置padding特点。我给html设置了padding也是起作用的。
 
推荐阅读:
  • acdsee2009许可证代码(acdsee5许可证密钥)
  • 木桶浴(木桶浴缸尺寸是多少)
  • 瑞金红军纪念塔设计者(是谁?)
  • 墙上绘画(墙上画画图案图片欣赏)
  • 婴儿家具(婴儿家具品牌排行榜)
  • 烤鸭店(烤鸭店装修效果图最新)
  • 斜屋顶窗(斜屋顶窗的优缺点)
  • 舞蹈队宣传海报图片(舞蹈社宣传海报)