html和body标签

一直对这两个标签有迷惑,查了一些网上资料整理了一下。

1.html和body标签的背景

1.当给body一个背景色时候,背景图是充满整个窗口的,这里看上去是body标签下的背景色起作用了,但实际不是body的background起作用,而是body作为一个根节点起作用了,<html>标签未被激活,body担当类似于根节点的节点,其background背景色被浏览器俘获,浏览器界面背景色为background的背景色,

当给body一些其他样式的时候,就能看出虽然背景占据整个视口,但border显示边界只是一条线(没有高度)

		body {
border: 5px solid red;
margin: 100px;
background: pink;
}

  

当给html一个背景色时,视口背景又会变成html标签的背景色,此时html变成根节点,背景色被浏览器获取,而body标签变为普通的标签

		html {
border: 5px solid yellow;
margin: 100px;
background: green;
}

  

2.html和body标签的高度

1.一个div块级元素没有主动为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的,如上图,没子元素时高度为0,设置了border后只显示一条直线。

还有,元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高起作用,互相依赖,却都无法依赖,死循环了。

当一个div的父元素是body,body的父元素是html,通过height:100%层层向上,找到顶级获取定高。

所以出现了html和body同时设置height:100%,如果只设置body也是不行的,因为他的父元素html是没有高度的

设置html的height:100%,它参照的是window,也就是浏览器可视区窗口的高度,这个高度一直存在,所以html和body也就有高度了。

		html , body {
height: 100%;
}

  

3.html和body百分比宽高和定位的关系

这里其实算定位的一些知识,不过牵扯到html和body可能会迷惑。

浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right、bottom、top,z-index这些偏移属性是没有效果的,不会生效;

1.当给元素p,相对定位时position:relative

(1)偏移:p标签还在标准流中,它的偏移是根据他的原位置进行偏移,但是他的原位置仍然保留,其他元素也不会过来占据他的位置;

(2)百分比宽高:50%的宽高时,因为他还在标准流中,所以他和其他标准流中的元素一样,百分比宽高是继承父级元素的,无论父级元素是标准流,定位,还是浮动,它的宽高都继承自div,500px * 50% = 250px

		html , body {
height: 100%;
background: green;
}
div {
width: 500px;
height: 500px;
}
p {
position: relative;
width: 50%;
height: 50%;
background: red;
} //标签 <body>
<div>
<p></p>
</div>
</body>

2.当给元素p,绝对定位时position:absolute

(1)偏移:p标签脱离标准流中,它的偏移是根据他的父元素位置进行偏移,如果它的父元素设置了除static之外的定位,比如:position:relative;position:absulote;position:fixed;,那么他就会相对它的父元素来定位,位置通过left,top,right,bottom属性来规定,如果他的父元素没有设置定位,那么就看它的父元素的父元素是否有设置定位,如果还是没有就继续向上找,总是它的定位就是相对与设置了除static定位之外的定位(eg:position:absulote;等)的第一个父元素,如果所有的父元素都没有以上三种定位中的一种定位,那么他就相对于文档body来定位;

(2)百分比宽高:宽高参照的父元素和偏移参照的父元素是相同的,比如p的父元素div设置了除static之外的定位,那么p的偏移和百分比宽高都是参照div来的500px * 50% = 250px

		html , body {
height: 100%;
background: green;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
p {
position: absolute;
width: 50%;
height: 50%;
background: red;
}

如果div没有定位,那么p会继续向上找到body和html,那么它的偏移和百分比宽高就相对于浏览器窗口进行计算,宽高也就变成了浏览器窗口的50%;

		html , body {
height: 100%;
background: green;
}
div {
width: 500px;
height: 500px;
}
p {
position: absolute;
width: 50%;
height: 50%;
background: red;
}

CSS-05 html和body标签的更多相关文章

  1. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  2. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  3. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  4. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. htm基础知识,css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

  6. 范仁义html+css课程---10、其它标签

    范仁义html+css课程---10.其它标签 一.总结 一句话总结: 了解iframe.Figure与Figcaption.address.progress.meter.datalist.field ...

  7. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...

  8. HTML&CSS基础-html常用的标签

    HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  9. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  10. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

随机推荐

  1. 学习python os commands socket模块

    import os print(os.getcwd()) #获取当前路径, 导包也是从这个路径下面才能找到 # os.chdir('./..') #返回上一级路径,再获取路径看看 # print(os ...

  2. man VGCREATE

    VGCREATE(8)                                                        VGCREATE(8) NAME/名称       vgcreat ...

  3. python学习笔记(十六)python操作redis数据库

    Redis是一个key-value存储系统,它支持丰富的数据类型,如:string.list.set.zset(sorted set).hash. Redis特点 Redis以内存作为数据存储介质,所 ...

  4. java匿名内部类 (转载)

    匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1:不使用匿名内部类来实现抽象 ...

  5. 吐血整理 | 1000行MySQL学习笔记,不怕你不会,就怕你不学!

    / Windows服务 / / 连接与断开服务器 / / 数据库操作 / ------------------ / 表的操作 / ------------------ / 数据操作 / ------- ...

  6. spring security 权限框架原理

    spring security 权限框架原理

  7. 一篇文章让你详细了解何为JSON

    JSON详解: JSON的全称是“ JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交 ...

  8. Largest Point

    Largest Point Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  9. 神坑 Resources.Load 不能实时加载TXT文件

    Resources.Load(fileName) as TextAsset; 这句话并不能实时加载文本文件,对文本文件进行修改之后,若是没有刷新的话,加载的还是之前的文件: 要实时读取文本文件还是要以 ...

  10. [CSP-S模拟测试]:数论(数学)

    题目传送门(内部题11) 输入格式 第一行,三个整数$T,K,M$,分别代表数据组数.良好标准和整数范围.接下来$T$行,每行一个整数$n_i$,代表一个询问. 输出格式 输出$T$行,在第$i$行对 ...