CSS层级关系 学习笔记
CSS 文档流
|
|
格式化上下文
|
Formatting Context
即初始元素定义的环境
|
块格式化上下文
|
Block Formatting Context
BFC
|
行内格式化上下文
|
Inline Formatting Context
|
让元素脱离文档流的办法
|
float 其它元素对它围绕无视
postion:absolute 其它元素对它完全无视
|
创建块格式化上下文的方法
|
根元素或包含根元素的元素
|
三维空间
|
如果所有元素都在文档流中,那么后面的元素会在上面
|
position属性定位元素
|
除了默认的static值外的元素就是定位元素
|
|
每个元素都属于一个层叠上下文
|
|
层叠上下文中具有相同堆栈级别的框根据文档树出现的顺序层叠在一起???
不懂
|
层叠水平
|
Stacking Level
所有元素都有层叠水平 相当于职级
然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢?因为否则没有意义
这句什么意思
普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。
注意 层叠水平 不是 z-index
|
层叠顺序
|
![]() |
|
![]() |
|
![]() |
|
z-index属性只适用于定位元素。所以,即使为元素提供z-index的值将其置于其他元素之前,z-index也不会对元素产生影响,除非它被定位;也就是说,除非它具有除static之外的position值。
|
|
如果你想要更改定位元素在z轴上的渲染顺序,可以使用z-index属性。例如,你有两个绝对定位的元素,它们在某个点上重叠,并且你希望其中一个元素显示在另一个元素的前面,即使它在源代码中出现在它之前,你也可以使用z-index属性来实现这一点
没看懂
|
|
![]() |
|
获取除默认值auto之外的z-index值的元素实际上为其所有定位的后代元素创建层叠上下文。我们之前提到过,每个层叠上下文都有一个根元素,它包含其中的所有元素。当你将z-index属性应用于这个元素时,它将在其包含的下下文中指定元素的z轴顺序,并且还将创建以该元素为根的新层叠顺序上下文
好像理解了一半
|
|
![]() 每个堆叠塔代表一堆积木的堆叠环境
|
|
|
CSS层级关系 学习笔记的更多相关文章
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS零基础学习笔记.
酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS权威指南学习笔记 —— HTML元素分类
HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...
随机推荐
- 安装本地jar到maven仓库
mvn install:install-file -DgroupId=com.alibaba -DartifactId=dubbo -Dversion=2.8.4 -Dpackaging=jar -D ...
- JS中字符串的编码 解码
DEPTNAME 是一个字符串 编码: DEPTNAME = encodeURI(encodeURI(DEPTNAME)); 解码: DEPTNAME = decodeURI(DEPTNAME,&qu ...
- Maven项目-jar包冲突:MyServlet is not a Servlet解决方法
异常显示:运行时jar包冲突异常 问题所在: jar包冲突,自己导入的jar包与tomcat中的jar包相同. 解决方法: 对(servlet,jsp)jar包设置作用域. 再次启动项目,问题已解决.
- vue-router重定向redirect
- uniGUI之多页面框架(16)
效果图: 左边的树 的树结点 ,通过 结点名 与 右 侧TabSheet名 一致时,显示 相关页面. 这是相关 源代码 procedure TMainForm.UniFormCreate(Sender ...
- eclispe javaw.exe in your current path的解决方法
https://blog.csdn.net/bd2569/article/details/70576666 问题背景:解压缩下面文件夹后打开eclipse软件(是安装包,解压即可使用的那种)弹出“.. ...
- win32下的命令行集合 (最优秀的工具)
HIDECMD.rar下载:以隐藏窗口的方式运行批处理. curl.exe 7.12.2 文件传输 593,670 curl是一个利用URL语法在命令行方式下工作的的文件传输工具 E6ED60CDA8 ...
- C++ STL vector容量(capacity)和大小(size)的区别
很多初学者分不清楚 vector 容器的容量(capacity)和大小(size)之间的区别,甚至有人认为它们表达的是一个意思.本节将对 vector 容量和大小各自的含义做一个详细的介绍. vect ...
- SpringMVC--文件上传与下载
http://blog.csdn.net/u012706811/article/details/51059419
- Day3-K-Can you solve this equation? HDU2199
Now,given the equation 8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y,can you find its solution between 0 and ...