有时候看到别人的代码中经常出现在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. Debian上安装Apache+Django全过程

    -->start sudo apt-get install apache2 libapache2-mod-wsgi #https://wiki.debian.org/zh_CN/Apache s ...

  2. 解读Unity中的CG编写Shader系列五(理论知识)

    转自 http://www.itnose.net/detail/6098474.html 经过前面的系列文章中的三个例子,尽管代码简单,但是我想应该还有些地方没有100%弄明白,我们现在得回过头来补充 ...

  3. linq lanbda表达式的用法

    1. 查询Student表中的所有记录的Sname.Ssex和Class列.select sname,ssex,class from studentLinq:    from s in Student ...

  4. Parallels Destop软件配置

    Parallels Destop个人感觉最好用的mac虚拟win软件 http://pan.baidu.com/s/1jHFwIGm 密码:ab21百度云下载(或者下载自己百度云的) 安装方法: 1. ...

  5. iOS 发送请求时获取cookie

    Cookie: 记录者用户信息的保存在本地的用户数据,如果有会被自动附上 值得一提的是,在iOS中当你发送一个任意请求时,不管你愿不愿意,NSURLRequest都会自动帮你记录你所访问的URL上设置 ...

  6. iOS - HTTPS接口加密和身份认证

    为什么要使用HTTPS代替HTTP HTTPS和HTTP的区别 https协议需要到CA申请证书,一般免费证书很少,需要交费. http是超文本传输协议,信息是明文传输,https则是具有安全性的SS ...

  7. hdu 1249 三角形

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1249 part=3*s*(s-1)+2 #include<stdio.h> #includ ...

  8. php单双引号

    1.定义字符串 定义字符串时,只有一种引号被视为定义符,即单引号或双引号.于是,如果一个字符串由双引号开始,那么只有双引号被分析器解析.这样,你就可以在双引号串中包含任何其他字符,甚至单引号.下面的引 ...

  9. Eclipse内存不够解决办法

    Window -- Preference --MyEclipse -- Servers -- Tomcat -- Tomcat6.x(选择自己安装的版本) -- JDK 在Optional Java ...

  10. drozer unknown module处理办法

    将目录切换到drozer安装目录,然后在执行: