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

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

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

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

效果图上:

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

于是乎,我们上代码:

效果图上:

果然

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

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

  1. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

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

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  3. Android编程心得-在任意类中获取当前屏幕宽高

    进行Android编程时,很多时候都需要获取当前屏幕的宽度与高度,但是当我们需要在别的类中调用屏幕宽高时,直接用原来的方法是不行的,下面我来介绍如何在任意类中调用宽度高度的两种方法. public v ...

  4. absolute和relative元素 设置百分比宽高的差异

    一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...

  5. Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高

    Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...

  6. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  7. Android中代码设置RadioButton的高端技巧

    不知道怎么起标题,就这样了. 目前主要讲两个方面内容: 代码方式 设置RadioButton的 android:button . android:background 等属性为 @null : 代码方 ...

  8. iOS开发中获取文本的宽高的方式

    /** 计算单行文字的size @parms  文本 @parms  字体 @return  字体的CGSize */ + (CGSize)sizeWithText:(NSString *)text ...

  9. 前端web设置div宽高一样

    <div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...

随机推荐

  1. 使用Grub Rescue恢复Ubuntu引导

    装了Ubuntu和Window双系统的电脑,通常会使用Ubuntu的Grub2进行引导. Grub2会在MBR写入引导记录,并将引导文件放在/boot/grub,破坏任意一项都会导致系统无法正常启动. ...

  2. 在中文windows下使用pywinauto进行窗口操作

    这两天开始接触pywinauto,听说百度的自动化QA也用这个模块,于是来了兴趣,但网上的教程很少,而且基本上都是拿官方的notepad来说,首先中文菜单的支持是问题,其次各种操作也没有写清楚,阅读官 ...

  3. php优化

    2015年12月14日 21:20:29 之前写过两篇文章: xdebug配置 xdebug trace 结果分析 第二篇里边有两个很耗时间和内存的线条: 第一个斜坡: 从mysql里读取数据后, 用 ...

  4. java一维数组

    1.通过数组名进行赋值,其实质是引用 比如数组array1和数组array2 若执行array2=array1,实际上将array1的引用传递给array2,array1和array2 最后都指向同一 ...

  5. 简述memcached中的一致哈希

    memcached是一个开源的高性能分布式内存对象缓存系统. 其实思想还是比较简单的,实现包括server端(memcached开源项目一般只单指server端)和client端两部分: server ...

  6. Greedy:Linear world(POJ 2674)

      Linear world 题目大意:一些人生活在线性世界中,到达线性世界两端就会消失,两个人的前进方向有两个,相遇会改变各自相遇方向,求最后一个人掉下的人的名字和时间. 其实这一题就是弹性碰撞的模 ...

  7. [页面滚动到底部]jquery $(window).height()取值等于$(document).height()的问题

    问题现象:JSP中头部引用了某个head.jsp,在videoList.jsp中生成片段时如下 实际最终生成的HTML如下: <!DOCTYPE html>没有解析到,原因找到了,先想办法 ...

  8. py随笔

    while true,无限循环 str.isdigit判断是不是数字 +只能在两个两个相同的类型之间执行 iter(i)将i加入迭代器

  9. ajax+bootstrap做弹窗

    建页面,引入bootstrap弹窗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  10. 解决eclipse中egit中的cannot open git-upload-pack问题

    一.背景 今天在使用eclipse的egit插件进行检出远程代码到本地时,出现了cannot open git-upload-pack错误,后经过努力解决该问题,记录下方便回顾和交流! 二.出现原因 ...