CSS學習部分知識點記錄

時間 2019-11-08

標籤 css 學習部分知識記錄欄目 CSS 简体版

原文原文鏈接

整理一些最近幾天學習CSS的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼爲本身寫哈。html

左右兩欄或三欄佈局
一、經常使用方法是給div加float浮動方式實現，加了浮動後div再也不獨佔一行。瀏覽器

二、還有就是position屬性實現，經過position的話須要額外加一層div，最外層div的position設爲relative，子div的position設爲absolute，而後根據兩欄仍是三欄去設置中/右div的left值便可。佈局

三、經過felx彈性佈局。這點就不獻醜了，也是才學習。學習

**float浮動方式實現**
<style>
    div {
        float: left;
    }

    .one {
        height: 500px;
        width: 500px;
        background: gray
    }

    .two {
        height: 500px;
        width: 500px;
        background: rebeccapurple
    }
</style>


**position方式實現**
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

<style>
    .father{
        position:relative;
    }
    .one {
        height: 500px;
        width: 500px;
        background: gray;
        position: absolute ;
    }

    .two {
        height: 500px;
        width: 500px;
        background: rebeccapurple;
        position: absolute;
        top: 0;
        left: 500px;
    }
</style>

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>

幾種常見的居中方法spa

塊級元素水平/垂直居中：
一、不改變float和position的狀況下，設置margin: 0 auto便可實現快速水平居中並且不須要知道div的具體寬高，可是隻能實現水平居中。code

body{
        border: 1px solid black;
    }

    .three {
        border: 1px solid green;
        height: 500px;
        width: 500px;
        margin: 0 auto;

    }
</style>

<body>
    <div class="three"></div>
</body>

二、若是div有浮動或position情形，可經過設置left/topd值爲50%，再配合transform: translate(?, ?)實現水平/垂直居中，這種方式不須要知道div的具體寬高。orm

<style>
    .abc {
        height: 500px;
        border: 1px solid black;
    }

    .three {
        background: darkgray;
        height: 300px;
        width: 300px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
</style>

<body>
    <div class="abc">
        <div class="three"></div>
    </div>
</body>

三、若是div的寬高已知，則設置left/topd值爲50%後margin-top/margin-left分別減去div寬高的一半，也能夠實現水平/垂直居中htm

.abc {
        height: 500px;
        border: 1px solid black;
    }

    .three {
        background: darkgray;
        height: 300px;
        width: 300px;
        position: relative;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-left: -150px;

    }
</style>

<body>
    <div class="abc">
        <div class="three"></div>
    </div>
</body>

行內元素水平/垂直居中：
一、行內元素設置text-align: center實現水平居中，ine-height值設置爲父元素高度可實現垂直居中。不過ine-height只能設置單行文本且父元素高度要已知。blog

<style>
    .abc {
        height: 200px;
        border: 1px solid black;
        text-align: center;
        line-height: 200px;
    }
</style>

<body>
    <div class="abc">
        <p>1</p>
    </div>
</body>

二、多行文本水平/垂直居中的話，父元素設置display: table，文本元素設置display: table-cell;vertical-align: middle;可實現垂直居中。three

<style>
    .abc {
        height: 200px;
        width: 200px;
        border: 1px solid black;
        display: table;
        text-align: center;
    }

    .abc>p {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<body>
    <div class="abc">
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </div>
</body>

一些其餘的知識點
三、英文單詞因不可分割性，div寬度不夠時不會自動換行，word-break屬性可強制換行不過中文不受此限制。

四、脫離文檔流的元素（fixed），其高度再也不計算到body高度內。

五、CSS儘可能不要寫死具體高度，寬度不要也高度100%，容易引起其餘問題。div的寬高應有其內元素撐開。

六、加了display：inline-block的話通常都須要加vertical-lign。

七、span標籤換行和不換行是有區別的。你們仔細看看html內，四個span前2個沒換行後2個換行，瀏覽器渲染出的結果明顯有一個空格。

<body>
    <div>
        <span>123</span><span>456</span>
    </div>
    <div>
        <span>123</span>
        <span>456</span>
    </div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。