CSS笔记
CSS笔记
inline:
- 不能修改width和height，大小有内容撑开
- margin-top margin-bottom无效
block
- 块级元素默认会占满父级元素的宽度
- padding margin都有效
inline-block
- 不独占一行的块级元素，可以设置宽高
font-size：0px
- 可以去掉一些莫名其妙的空格
position:absolute
-
设置了TRBL
相对最近的设定了position:relative/absolute的父（祖先）节点的padding-box的区进行定位（忽略文字），找不到符合条件的父（祖先）节点，则相对浏览器窗口进行定位。 -
没有设置TRBL
则默认浮动，默认浮动在父级节点的content-box区。
inline
不支持transform
行内盒
<html>
<style>
.container {
background: orange;
margin-top: 100px;
}
.inline-box {
color: white;
padding-top: 50px;
background: #2195de;
}
</style>
<div class="container">
<span class="inline-box">TEST</span>
</div>
</html>
为什么span设置padding无法撑高父元素div？
行内盒计算高度时直接取line-height
行内盒可以有边框、内边距、外边距，然而跟行盒的高度完全没关系！
display：inline的不可替换元素就是一个行内盒
什么是不可替换元素？
不可替换元素是div、span之类的内容直接呈现的元素，相对的，可替换元素是根据其标签和属性来决定具体显示内容的元素，比如img
https://segmentfault.com/a/1190000003834571
z-index
z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。
z-index必须和定位元素position : absolute | relative | fixed一起使用，否则无效
一旦为一个元素指定了z-index值(不是auto)，该元素会建立自己的局部堆叠上下文。这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序
auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同，这个框不会建立新的局部叠放上下文。z-index:auto与z-index:0的值相等，但z-index:0会建立新的局部堆叠上下文
元素不会叠放在其堆叠上下文(即定位父级z-index为数字值)的背景之下，但可以叠放在其内容之下
- 如果定位元素z-index没有发生嵌套
- 如果定位元素z-index发生了嵌套
每一个网页都有一个默认的层叠上下文。 这个层叠上下文（桌子）的根源就是html元素。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上（物品放在桌子上）。
当你给一个元素赋予了除 auto (自动) 外的z-index值时，你就创建了一个新的层叠上下文，其中有着独立于页面上其他层叠上下文和层叠层的层叠层。 这就相当于你把另一张桌子带到了房间里。
在一个层叠上下文中一共可以有7种层叠等级，列举如下：
- 背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
- 负z-index值 —— 层叠上下文内有着负z-index值的子元素。
- 块级盒 —— 文档流中非行内非定位子元素。
- 浮动盒 —— 非定位浮动元素。
- 行内盒 —— 文档流中行内级别非定位子元素。
- z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。
- 正z-index值 —— 定位元素。 层叠上下文中的最高等级。
[图片上传失败...(image-1b3987-1594031922510)]
定位元素还会产生新的层叠上下文，而这整一个层叠层会显示在另一个层叠上下文中的所有层叠层的上面或者下面。
当给一个元素设置了z-index为数值的时候，这个元素就会自己形成一个自己的局部执行上下文，他的子元素不管z-index值为多少都不会在它的背景以下，参照7级堆叠规则。
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
padding: 20px;
}
.one,
.two,
.three,
.four {
position: absolute;
}
.one {
background: #f00;
outline: 5px solid #000;
top: 100px;
left: 200px;
z-index: 10;
}
.two {
background: #0f0;
outline: 5px solid #000;
top: 50px;
left: 75px;
z-index: 100;
}
.three {
background: #0ff;
outline: 5px solid #000;
top: 125px;
left: 25px;
z-index: 150;
}
.four {
background: #00f;
outline: 5px solid #ff0;
top: 200px;
left: 350px;
z-index: 50;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>
<div class="four"></div>
</body>
</html>
.one — z-index = 10
.two — z-index = 10.100
.three — z-index = 10.150
.four — z-index = 50
我们所做的其实是把div.one和它所包含的一切放在了div.four之下。 不管我们给div.one中的元素设置了什么z-index值，他们永远都会显示在div.four的下面。
同级的元素，如果都没有设置z-index，那设置了position为absolute、fixed、relative的元素会在上层
<a data-v-f3c707ce="" data-hover="RATATOUILIE">
::before
RATATOUILIE
</a>
如果标签a和伪元素同时设置了数值z-index，那伪元素一定在a上面，因为a建立了一个新的局部层叠上下文，虽然a自己本身处于根元素上下文，但是伪元素是处于a所创建的新的上下文，所以伪元素不会处于a之下
