CSS杂项

position 的 5 个取值：static | relative | absolute | sticky | fixed
z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值不是static的元素），z-index 属性指定：

1. 元素在当前堆叠上下文中的堆叠层级。
2. 元素是否创建一个新的本地堆叠上下文。

注意！！！不到万不得已不要写height和width，不然很容易出bug

内联元素、块级元素的高度分别是由什么决定的

• div （块级元素）：高度由其内部文档流元素的高度总和决定（决定不是相等！）
• span（内联元素）：内联元素不接受宽高，如给span设置width和height以及margin-top和margin-bottom都没用（设置 margin-left margin-right 是有效的），应加一个display: inline-block，内联元素高度与字体及与字体有关的参数有关，line-height（行高）很难确定，详见文章字体度量、line-height 和 vertical-align

什么是文档流（Normal Flow）

文档流：文档内元素的流动方向

• 内联元素：从左往右流动，当流动遇到阻碍，换行继续从左往右流动

示例代码：

<span>文字1haaaaaaaaaaaaaaaaa</span>
<span>文字2</span>
<span>文字3</span>
<span>文字4</span>
<span>文字5</span>
<span>文字6</span>
<span>文字7</span>
<span>文字8</span>
<span>文字9</span>
<span>文字10</span>

效果图（调试方法：CSS中加border，如border: 1px solid red;）：

如果内联元素是一个很长的单词，默认情况下单词是不会分开的（中文可以分开）

haaaaaaaaaa被默认为一个单词，因此不会换行分开
更改是否可以被打断

• 块级元素：每一个块独占一行，其他的块另起一行（相当于从上往下流动）

示例代码：

<div>块1</div>
<div>块2</div>
<div>块3</div>
<div>块4</div>
<div>块5</div>
<div>块6</div>
<div>块7</div>
<div>块8</div>
<div>块9</div>
<div>块10</div>

效果图：

块级元素单独占一行

如何让块级元素在一行？

方法一：在CSS中设置display: inline-block;（不推荐）
方法二：设置浮动：
①给所有的子元素添加float:left;
②给子元素的父亲添加一个名叫clearfix的类

内联元素如何居中？

如：想让span中的文字水平垂直居中
示例代码：
方法一：垂直居中：应在span的css样式里加上display: inline-block使其变为行内块级元素，同时line-height与padding上下高度之和应等于总高度；水平居中：测量文字的宽度，使其与padding左右宽度之和等于总宽度。

<div><span>你好</span></div>

div{
  border: 1px solid green;
  max-width: 80px;
  min-height: 80px; /* 用max-width/height设置的最大宽度、高度，能够自适应（优于width/height）*/
  
} 
span{
  line-height: 40px;
  padding:20px 23px ;
  display: inline-block;
}

效果图：

文字水平垂直居中

方法二：垂直居中：令line-height的高度等于总高度；水平居中：同方法一。

span{
  line-height: 80px;
  padding:0px 23px ;
}

脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

• float:left
• fixed:完全脱离文档流，相对于窗口定位

示例代码（相对于窗口左上角定位）：

position: fixed;
top: 0;
left: 0;

• absolute：绝对定位，相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）

<div class="a">
  <div class="b"></div>
</div>

.a{
  border: 1px solid green;
  width: 80px;
  height: 80px;
  position: relative;
} 
.b{
  border: 20px solid transparent;
  width: 0px;
  border-left-color: #E6686A;
  border-top-width: 0px;
  position: absolute;
  left:30px;
  top:100%;
}

效果图：

用CSS写一个三角形（triangle）

步骤一：

<div class="a">

.a{
  border: 60px solid red;
  width: 0px;
  height: 0px;
  border-top-color: blue;
  border-right-color: black;
  border-left-color: green;
} 

步骤二：根据需要设置透明transparent

.a{
  border: 60px solid transparent;
  width: 0px;
  height: 0px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: green;
} 

步骤三：设置border-top/left/right/bottom-width： 0px;

.a{
  border: 60px solid transparent;
  width: 0px;
  height: 0px;（可删掉）
  border-top-color: transparent;（可删掉）
  border-right-color: transparent;（可删掉）
  border-left-color: green;
  border-top-width: 0;
} 

其他CSS形状

令一个div水平居中（前提：有宽度width）：

margin-left: auto;
margin-right: auto;

content-box 与 border-box 的区别是：

• content-box 的 width 不包括 padding 和 border
• border-box 的 width 包括 padding 和 border
  伪类的使用