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>