浮动（float）属性和定位属性

浮动
1.多个块级元素想同行显示，每个块级元素都要加浮动特性
而不是第一个不需要加
2.块级元素浮动以后，就脱离了块级元素的显示特点，不再表现为独占一行
显示特点和行级元素类似，占用的实际空间大小和内容有关系
3.标准盒子模型中的内容不会被浮动盒子影响显示，会正常显示文本
4.在浮动元素的后面添加非浮动元素，并给非浮动元素添加clear属性，
可以实现清除浮动带来的影响

#bottom{

    clear: both;

}

5.上面的方法可能出现一个（新增无关元素）小问题，

更好的处理方法是给浮动元素的父元素添加after伪类，通过伪类，

给父元素添加一个无关元素，然后清除浮动

/*清除浮动*/

<div id="body" class="cleanfix">

.cleanfix:after{

    display: block;

    content: "";

    clear: both;

}

水平外边距

行级元素，水平外间距是两个元素外边距大小之和

块级元素：外边距取较大的一个

/*两种解决子元素添加上外边距，整体下移的方案。*/

            border: 3px solid blue;

            overflow: hidden;（最佳）

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

定位：根据项目需要，通过相关的方法，让元素显示的位置发生偏移

定位的方式：

static:默认

relative:相对定位

absolute:绝对定位

fixed:固定定位

注意：只有元素采用了定位，top,left,right,bottom,z-index才可以使用（普通属性是没有这些属性的）

定位属性，基本上是配合浮动属性一块儿使用

绝对定位（position：absolute）：

显示特点

1.找一个离他最近的，并且使用了定位的父元素来进行定位，如果父元素没有使用定位，继续往上找父级元素，直到HTML

2.之前占用的空间不会保留

3.如果你想给一个元素添加绝对定位，最好的办法是找到这个

元素的直接父元素，然后给这个父元素加一个相对定位

相对定位（position：relative）

特点：

1.如果仅仅给元素添加了一个相对定位，这个元素显示的位置不会发生任何变化

2.相对定位是相对于元素之前的位置进行的

3.相对定位的元素，之前显示的空间位置会被保留

4. z-index: 可以调整元素在z轴的显示顺序，值越大越靠前

            最大值是1000！

透明度：

opacity: 1;不透明

opacity: 0;全透明

固定定位(position: fixed;)

固定定位(position: fixed;)：相对于整个屏幕进行定位

定位实现垂直居中

/*方法1*/

            left:50%;

            margin-left: -50px;

            top:50%;

            margin-top: -50px;

 /*方法2*/

            left:calc(50% - 50px);

            top:calc(50% - 50px);

负边距

Margin-top：-100px;

双飞翼布局