html和css高級指南之二——定位詳解

HTML和CSS高級指南之二——定位詳解https://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

看了這篇之後對於昨天的問題（三欄式排版），我已經明白了很多，他也詳細介紹了浮動屬性和清除浮動的方法

float屬性

1.Overflow技巧

2.clearfix技巧

position屬性

---

作者：徐尤熙
鏈接：https://www.zhihu.com/question/20543196/answer/89218605

水平居中設置
1、行內元素 設置 text-align:center
2、定寬塊狀元素 設置 左右 margin 值爲 auto
3、不定寬塊狀元素
a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設置 margin 的值爲 auto
b:給該元素設置 displa:inine 方法
c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%

在使用絕對定位的時候，他是根據左上角的點來定位的，我們的元素並不是一個點，所以就需要設置margin-left 和 margin-top。

垂直居中設置
1、行內元素 父元素高度確定的單行文本 設置 height = line-height
2、父元素高度確定的多行文本 a:插入 table （插入方法和水平居中一樣），然後設置 vertical-align:middle b:先設置 display:table-cell 再設置 vertical-align:middle。（在網上搜索“父元素高度確定的多行文本”，我認爲是在這種情況下，用display:table-cell纔有用，如果是一個單純的div框，裏面沒有內容，經測試是沒有用的 ）

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>