关于html中的设置body宽高的理解
有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码:
首先创建好一个基本的html文件,设body的背景色为red:

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

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

效果图上:


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

于是乎,我们上代码:

效果图上:

果然
因此我们得出一些结论:默认情况下,我们直接操作body的话,body会被浏览器当做根结点来对待,子类(子类没有设置宽的前提下)会等于父类设置的宽,在没有设置任何html的背景色(或其他)属性时,body的高是都是无效的。
关于html中的设置body宽高的理解的更多相关文章
- Python设置浏览器宽高
# 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...
- input与select 设置相同宽高,在浏览器上却显示不一致,不整齐
遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不 ...
- Android编程心得-在任意类中获取当前屏幕宽高
进行Android编程时,很多时候都需要获取当前屏幕的宽度与高度,但是当我们需要在别的类中调用屏幕宽高时,直接用原来的方法是不行的,下面我来介绍如何在任意类中调用宽度高度的两种方法. public v ...
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高
Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...
- js/jq宽高的理解与运用
document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...
- Android中代码设置RadioButton的高端技巧
不知道怎么起标题,就这样了. 目前主要讲两个方面内容: 代码方式 设置RadioButton的 android:button . android:background 等属性为 @null : 代码方 ...
- iOS开发中获取文本的宽高的方式
/** 计算单行文字的size @parms 文本 @parms 字体 @return 字体的CGSize */ + (CGSize)sizeWithText:(NSString *)text ...
- 前端web设置div宽高一样
<div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...
随机推荐
- cpu和io进程调度时间
[题目] 在一个单CPU的计算机系统中,有两台外部设备R1.R2和三个进程P1.P2.P3.系统采用可剥夺式优先级的进程调度方案,且所有进程可以并行使用I/O设备,三个进程的优先级.使用设备的先后顺序 ...
- 小项目特供 简易迷宫(基于Java)
明天返校,于是昨天和今天简单熟系了一下JAVA的GUI,做了一个简易的迷宫小游戏(暂时没有时间实现随机迷宫及多关卡,仅供学习) 源码及运行文件(提供JRE8):链接:简易迷宫 密码:hy8v
- 13.SpringMVC和Spring集成(一) && 14.SpringMVC和Spring集成(二)
1.概念 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,Spring致力于J2EE应用的各层的解决方案,Spring是企业应用开发的“一站式”选择,并贯 ...
- centos搭建SVN三部曲
搭建SVN服务,有效的管理代码,以下三步可以快速搞定. 1.安装 #yum install subversion 判断是否安装成功 #subversion -v svnserve, version 1 ...
- codeforces 518B. Tanya and Postcard 解题报告
题目链接:http://codeforces.com/problemset/problem/518/B 题目意思:给出字符串 s 和 t,如果 t 中有跟 s 完全相同的字母,数量等于或者多过 s,就 ...
- Android图片加载库:最全面的Picasso讲解
前言 上文已经对当今 Android主流的图片加载库 进行了全面介绍 & 对比 如果你还没阅读,我建议你先移步这里阅读 今天我们来学习其中一个Android主流的图片加载库的使用 - Pica ...
- BlacJack游戏
首先游戏的简介如下: Blac ...
- 【linux】ubuntu stmp服务器配置
来源:http://blog.itpub.net/786540/viewspace-1002077/ sudo apt-get install sendmail(其中已经包含了sendmail-bin ...
- poj 3734 Blocks 快速幂+费马小定理+组合数学
题目链接 题意:有一排砖,可以染红蓝绿黄四种不同的颜色,要求红和绿两种颜色砖的个数都是偶数,问一共有多少种方案,结果对10007取余. 题解:刚看这道题第一感觉是组合数学,正向推了一会还没等推出来队友 ...
- 创建URL为空的解决办法
在使用+URLWithString:或-initWithString:创建一个URL对象时,提供的参数字符串必须符合RFC 2396标准(O网页链接.而这两个方法又是根据RFC 1738(O网页链接和 ...