display和float

display和float

**块级元素：**独占一行，里面可以放行内元素，类似于一个大容器

<h1><p><li><div>等

**行内元素：**放在一行里面的元素，类似于一个一个小组件，设置高度没有效果

<img><em><strong><span>等

块级和块级一起放时会垂直排列，行内元素可以放在一行里。

可以用display来更换块级和行内

display:block /*变成块级元素*/

display:inline /*变成行内元素*/

display:inline-block /*既有块级元素的特点也有行内元素的特点*/

float 浮动

div:nth-of-type(1){
    width: 100px;
    height: 150px;
    border: 1px solid red;
    display: inline-block;
    float: left;
}

可以使元素像气球一样浮起，可以向左飘或右飘，但是飘起来就会脱离父级，父级边框会有塌陷问题

解决方案：

1. 增加父级边框的宽高度
2. 在父级里结尾增加一个div，清除浮动，clear：both

div:nth-of-type(4){
    clear: both;
    margin: 0;
    padding: 0;
}

3. 使用父级的伪类，在父级里结尾新增一个空内容，清除浮动

body:after{
    content: "";
    display: block;
    clear: both;
}

position定位

• position：relative 相对定位

相对于自身的位置来定位，可以距离原地的位置向右移动，left：30px

• position：absolute 绝对定位

相对于浏览器或父级来定位，如果在父级里定义了position：relative，那么就会相对于父级来进行绝对定位，如果没有定义就会以浏览器来定位

• position：fixed 固定定位

固定在某一个位置，无论怎么滑动浏览器滚动条都不会改变位置，绝对定位是会改变位置的。

多层堆叠z-index

当多层叠到同一个位置时，会有覆盖的效果，当需要把重要的一层放在最上层时，用到z-index来实现

<div>
    <img src="img/bg.png">
</div>
<div>
    测试
</div>

div:nth-of-type(2){
    z-index;999 /*数字越大，放在最前面*/
}
div:nth-of-type(1){
    opacity:0.5 /*透明度*/
}