关于html中的设置body宽高的理解

有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码:

首先创建好一个基本的html文件,设body的背景色为red:

相信大家都知道效果了,没错!

接着,我们向body里面加个div,给背景设为白色,然后居中,并且不给div宽度。代码如下:

效果图上:

很显然,body的实际宽度是和子类div中的宽度一样的,那为什么body的背景是覆盖整个页面呢?这是别人的猜想:

于是乎,我们上代码:

效果图上:

果然

因此我们得出一些结论:默认情况下,我们直接操作body的话,body会被浏览器当做根结点来对待,子类(子类没有设置宽的前提下)会等于父类设置的宽,在没有设置任何html的背景色(或其他)属性时,body的高是都是无效的。

时间: 2024-10-09 08:30:24

关于html中的设置body宽高的理解的相关文章

input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽.border与padding不在值里面,在浏览器上显示可见. select  width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding

ul中的li设置等宽高css

响应式布局中宽度与高度相同 纯css方法设置ul中li宽高相等 关键词:VW / VH vw:视窗的宽度 vh:视窗的高度 思路:根据vw获取视图宽度从而设置li的宽度等于高度 代码: <li> <div class="test"> <img src="../images/hm1.png" > <div> <h3>Sponge material</h3> </div> </di

android 在onCreate方法中获得view的宽高

view在绘制完成后才会有自己的宽高,所以在onCreate中要获得view的宽高可以通过以下4中方法: 1.ViewTreeObserver:监听界面绘制事件,在layout时调用,使用完毕后记得removeListener 2.view.post,因为runnable对象会在view的measure.layout后触发 3.重写onLayout方法 4.使用getMeasuredWidth.getMeasuredHeight获得测量后的宽高,可能跟view的真实宽高有差距

js各种宽高的理解

1.window.innerHeight.window.outerHeight  窗口的外层的高度/内层高度 2.window.innerWidth/window.outerWidth  窗口的外层的宽度/内层宽度 3.window.screen包含有关用户屏幕的信息 window.screen.width window.screen.height window.screen.availWidth(可视化的宽度) window.screen.availHeight(可视化的高度) window.

js/jq宽高的理解与运用

document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftdocument.body.clientTop 2. 与offset相关的宽高 3. 与scroll相关的宽高 网页滚动到顶部或底部: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

设置不定宽高的div垂直水平居中

1.使用table-cell父级设置: display: table-cell; text-align: center; vertical-align: middle;子级设置: display: inline-block; vertical-align: middle;2.使用transform父级设置:display: relative;子级设置:transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%;

css设置容器宽高保持比例

html: <div class = "father"> <div class = "daughter"></div> </div> css: .father { width: 100%; } .daughter { width: 20%; height: 0; padding-top: 20%; background: black; } 主要知识:上下边距的百分比数值是以父元素宽度作为参照的.

对js offset位置 宽高的理解

clientTop,clientLeft:元素边框宽度.  clientWidth:元素width+元素padding. offsetWidth:元素width+元素padding+元素边框宽 offsetWidth,offsetHeight: 元素的可见宽度和高度.只跟该元素的本身有关 offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right) offsetHeight=(border-width)*2+(paddin

JS/jQuery宽高的理解和应用

1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document.location window.innerHeight .outerHeight .innerWidth .outerWidth 用户屏幕 window.screen.height