关于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 ...
随机推荐
- jQuery获取循环中的选中单选按钮radio的值
1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...
- Appium+Robotframework实现Android应用的自动化测试-4:AppiumLibrary介绍和安装
Appium是个好东东,Android,iOS都支持,并且居然RobotFramework也支持Appium了,这就是本文要介绍的AppiumLibrary. 通过前面的文章大家知道可以使用多种语言来 ...
- Context.managedQuery()和context.getContentResolver()获取Cursor关闭注意事项
在获取图片缩略图时,获取游标并进行相关的操作. Cursor cursor = context.getContentResolver().query(MediaStore.Images.Thumbna ...
- ExpressQuantumGrid4的cxGrid的一些使用方法和经验
使用cxGrid有一些时间了,在这里总结一下使用cxGrid的一些方法,希望给刚开始接触cxGrid的人一些帮助. 1.简单介绍:cxGrid右下方的cxGrid1Level1是表示Grid表的层,c ...
- JS练习题
1.带参数的函数不能重复调用 2.顺序语句: 3.在重复调用中打断 调用用 return 例如: Interval 时间间隔 先清一下 再接着 return:其他的调用也可以加return打 ...
- MVP设计模式的实现
MVP:界面与业务逻辑分离在Winform中的应用 MVP,Model-View-Presenter的缩写. 在MSDN上,下载了一个示例,http://www.microsoft.com/china ...
- 【leetcode】Best Time to Buy and Sell 2(too easy)
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 解决eclipse中egit中的cannot open git-upload-pack问题
一.背景 今天在使用eclipse的egit插件进行检出远程代码到本地时,出现了cannot open git-upload-pack错误,后经过努力解决该问题,记录下方便回顾和交流! 二.出现原因 ...
- Android笔记:菜单
1.按键调出菜单 public boolean onCreateOptionsMenu(Menu menu) 重写建立菜单方法 public boolean onOptionsItemSelected ...
- vs win32 & MFC 指针默认位置
一开始win32指针所在的位置是与debug文件夹同级的.即打开打开改程序的第一个文件夹这一级. MFC指针是在第二个debug下头,就是打开第二个project名词的文件夹下头,e.g., &quo ...