position 的 5 个取值：static | relative | absolute | sticky | fixed
z-index 属性指定了一个具有定位属性的元素及其子代元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值不是static的元素），z-index 属性指定：
- 元素在当前堆叠上下文中的堆叠层级。
- 元素是否创建一个新的本地堆叠上下文。
注意！！！不到万不得已不要写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
伪类的使用
网友评论