html标签和body标签的区别
首先想要总结这个问题就是因为在开发的过程中，在设置body的高度的时候，在浏览器窗口中并不起作用，一直都会显示是浏览器窗口的大小，所以想要搞清楚这面的原因。
一、前提
在页面的设计中，当我们没有为一个div块级元素设置宽度和高度的时候，浏览器会为其分配一个最大可用的宽度，但是不负责分配高度，
块级元素的高度是由子元素堆砌撑起来的，所以html和body标签也是由子元素撑起来的；元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高不起作用，互相依赖，却都无法依赖，死循环了；浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的。
二、html和body中的一些问题
关于高度
设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。
//如果在设置body前没有设置html的高度，那么body设置高度则不会生效，所以此时的body的height为0
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
height:100%;
}
div{
background:#ddd;
height:50%;
}
</style>
<body>
<div></div>
</body>
关于背景颜色
在我们只设置body的背景色时，浏览器的背景色会获取到body的背景色。
- 一旦html标签含有背景色，则body的背景色变成了正常的body标签自己的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。
有一个说法不知道是不是正确的结论，但是以这种说法挺好理解的：
在没有设置html元素的任何属性时，body就会被当成是根节点设置，浏览器就会获取body的属性然后渲染，根节点设置高度都不会生效。
（在我自己学习的过程中，对前端页面布局等一系列的知识有一些混乱，所以准备从今天开始，每天记录一篇前端基础的知识，希望大家一起进步！）
html标签和body标签的区别的更多相关文章
- i标签和em标签的区别
很多人以为i标签和em标签都只是HTML用于斜体的标签,并不知道他们有什么区别. 其实对于熟悉SEO的人来说,他们的区别挺大的(普通用户略过). i标签的作用:仅仅是为了让字体显示斜体,对于SEO没什 ...
- JS点击任意标签获得该标签属性，以获得ID为例，以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别
js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...
- @Autowired标签与 @Resource标签 的区别
Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...
- em标签和strong标签的区别
今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...
- input 标签和a标签实现超链接的区别
a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...
- HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联？ target属性 Meta标签
p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性. Src和href有什么区别和关联 ...
- arclist标签和list标签区别
很多站长朋友在刚入门织梦的时候对织梦的标签存在很多的困惑,关于arclist标签和list标签,甚至不知道啥时候用arclist,啥时用list标签.arclist 为自由列表,全局模板中都生效,一般 ...
- HTML 5的革新——语义化标签section和article的区别
原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section ...
- <span> 标签与<p>标签的区别
p标签指一个段落,是块级元素,有换行效果:span是行内元素,一般单独修饰文字: span 标签可以放在p标签里,p标签不应该放在span标签里:
- code标签和pre标签
code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...
随机推荐
- 《.NET 5.0 背锅案》第3集-剧情反转：EnyimMemcachedCore 无罪，.NET 5.0 继续背锅
今天晚上基于第2集中改进版的 EnyimMemcachedCore 进行了发布,发布过程中故障重现,最大的嫌犯 EnyimMemcachedCore 被证明无罪,暂时委屈 .NET 5.0 继续背锅. ...
- 源码分析：ReentrantReadWriteLock之读写锁
简介 ReentrantReadWriteLock 从字面意思可以看出,是和重入.读写有关系的锁,实际上 ReentrantReadWriteLock 确实也是支持可重入的读写锁,并且支持公平和非公平 ...
- Linux （操作二）
1.U盘的装载与卸载(设备都保存在/dev中 /dev存放设备的文件) 1.卸载u盘 umount /media/xxx/xxx (xxx为具体路径) 2.查看设备 sudo fdisk -l ( ...
- ubuntu使用iso作为本地源
方式一(路径不要改): 挂载光驱到到本地的指定目录 mount /dev/cdrom /media/cdrom 然后执行: apt-cdrom -m -d /media/cdrom add 会写配置文 ...
- Rest语法，传入多个参数
Rest语法,传入多个参数 js调用函数时可以传入任意数量的参数,而不报错.如果传入的参数没有用到,那么传入多余的参数没有任何用处,那不是瞎子点灯白费蜡嘛.为了充分利用传入的每一个参数,我们可以采用R ...
- 存储型跨站获取COOKIE漏洞复现
一.漏洞描述 获取网站cookie 二.漏洞原理 1.服务器后台写入PHP代码 $cookie = $_GET['cookie']; if($cookie){ echo ($cookie); $log ...
- Mysql预处理语句prepare、execute、deallocate
前言 做CTF题的时候遇到的所以参考资料学习一波.... MySQL的SQL预处理(Prepared) 一.SQL 语句的执行处理 1.即时 SQL 一条 SQL 在 DB 接收到最终执行完毕返回,大 ...
- 为什么TCP连接时是三次握手，而不是两次或四次？
TCP连接时有一个重要的任务就是服务端和客户端双方互相确认收发功能是否正常.图中步骤1,当客户端发起连接,服务端接收到请求,对于服务端来说,它此时知道客户端的发送功能和自己的接收功能是正常的. 图中步 ...
- yum安装no more mirrors to try
先挂载:mount /dev/cdrom /mnt yum clean allyum makecacheyum -y update 后重试
- Word中如何调整MathType公式的间距
作为一名理工科的学生,经常会面对一大堆公式,那么就要掌握在Word中编辑公式的技能,那么怎样才能在Word中编辑美观的公式呢?为了方便大家的使用,下面就详细介绍在Word中调整MathType公式间距 ...