CSS-05 html和body标签
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标签的更多相关文章
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- 【CSS学习笔记】a标签的四种伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- htm基础知识,css的链入以及标签分类。
<!DocTYPE> DOC--Document 文档 TYPE 类型 文档类型 告诉浏览器这是什么文件 单标签: meta 设置 charset 设置编码 双标签: 开始 ...
- 范仁义html+css课程---10、其它标签
范仁义html+css课程---10.其它标签 一.总结 一句话总结: 了解iframe.Figure与Figcaption.address.progress.meter.datalist.field ...
- HTML&CSS基础-html的图片标签
HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...
- HTML&CSS基础-html常用的标签
HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
随机推荐
- java 创建匿名对象及声明map list时初始化
java 创建匿名对象 类似于c# 中的 new { a:"aaa",b:"bbb"}; 1 创建匿名对象Object myobj = new Object() ...
- [apache] apache配置文件中的deny和allow
allow 和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 例如: <Di ...
- sonar-runner命令模式运行sonar
适用环境:该种配置的模式适用于本地调试模式 前提条件:在工程路径下创建sonar-project.properties文件 该客户端的路径在系统配置文件中进行了定义 alias sonar-runne ...
- $nextTick
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextT ...
- spring security 权限框架原理
spring security 权限框架原理
- Word文档粘贴到DEDECMS
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- CentOS 7.5 通过kubeadm部署k8s-1.15.0
kubeadm是Kubernetes官方提供的用于快速安装Kubernetes集群的工具,伴随Kubernetes每个版本的发布都会同步更新,kubeadm会对集群配置方面的一些实践做调整,通过实验k ...
- [CSP-S模拟测试]:太阳神(莫比乌斯反演)
题目描述 太阳神拉很喜欢最小公倍数,有一天他想到了一个关于最小公倍数的题目.求满足如下条件的数对$(a,b)$对数:$a,b$均为正整数且$a,b\leqslant n$而$lcm(a,b)>n ...
- s6tu
# -*- coding: utf-8 -*- # @Time : 2018/03/30 15:20 # @Author : cxa # @File : liuuchnagtu.py # @Softw ...
- oracle sql查询表外键关系
SELECT F.TABLE_NAME, F.CONSTRAINT_NAME, F.COLUMN_NAME, F.POSITION, P.TABLE_NAME, P.COLUMN_NAME, P.PO ...