CSS定位、浮动、对齐

定位 position

• 元素可以使用 top right bottom left属性定位，但是都要先设定position类型，否则不能正常工作
• position属性指定了元素的定位类型：static fixed relative absolute

static 静态定位

• 这是HTML元素的默认值，
• 元素出现在正常的流中，
• static定位不会受到上下左右的影响

fixed 固定定位

• 元素的位置相对于浏览器窗口是固定位置
• 即使窗口滚动他也不会移动，经常用作广告
• fixed定位使元素的位置与文档流无关，因此不占据空间
• fixed定位的元素与其他元素重叠

relative 相对定位

• relative 相对定位是相对于元素的正常位置
• relative 相对定位的元素移动过后，它原本所占的空间不会改变
• 相对定位的元素经常用来作为绝对定位元素的容器块

absolute 绝对定位

• 绝对定位的元素的位置是相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么他的位置是相对于整个html的

元素重叠

• 元素定位与文档流无关，所以他们可能覆盖页面上的其他元素
• Z-index属性指定了元素的堆叠顺序，也就是哪个元素应该展示在前面
• Z-index的值可以为正数或负数，数字大的在前面
• 如果没有指定2个重叠的元素，那么后定位的在先定位的元素上面

浮动 float

• html的元素默认是从上到下的排列
• float 会使元素向左或向右移动，其周围的元素也会重新排列
• float 通常用于图像和布局
• 一个浮动元素会向左或向右移动，直到他的边缘碰到包含框（父元素或者html）或另一个浮动元素的边框位置
• 浮动元素之前的不受影响
• 浮动元素之后的元素将围绕它

清除浮动 clear

• 元素浮动之后，周围的元素会重新排列，为了避免这种情况，就需要使用clear属性
• clear: left/right/both

对齐

• 对齐是我们经常要用到的布局效果

元素居中对齐

• 要水平居中对齐一个元素，可以使用margin:auto
• 需要给元素设置width属性
• 所以元素要么是块元素，要么是display:block
• 块元素居中对齐

<style>
    .center {
        margin: auto;
        width: 60%;
        border: 3px solid #73AD21;
        padding: 10px;
    }
</style>

<div class="center">
  <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>

• 图片居中对齐

<style>
    img {
        display: block;
        margin: 0 auto;
        width: 50%;
    }
</style>

<img src="" alt="图片">

文本居中对齐

• 可以使用text-align:center

元素左右对齐

• 可以使用position:absolute

.right{
    position:absolute;
    right:0;
    width:400px;
}

• 可以使用float来左右对齐

垂直居中对齐

• 可以使用padding属性

.center{
    padding:50px 0;
}

• 配合使用padding和text-align:center,让文本在父容器中水平和垂直都居中

.center {
    padding: 50px 0;
    border: 3px solid green;
    text-align: center;
}