国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)部分知識(shí)點(diǎn)記錄

lookSomeone / 3344人閱讀

摘要：整理一些最近幾天學(xué)習(xí)的一些知識(shí)點(diǎn)，好記性不如爛筆頭，寫下來(lái)敲一遍代碼為自己寫哈。這點(diǎn)就不獻(xiàn)丑了，也是才學(xué)習(xí)。脫離文檔流的元素，其高度不再計(jì)算到高度內(nèi)。

整理一些最近幾天學(xué)習(xí)CSS的一些知識(shí)點(diǎn)，好記性不如爛筆頭，寫下來(lái)敲一遍代碼為自己寫哈。

左右兩欄或三欄布局
1、常用方法是給div加float浮動(dòng)方式實(shí)現(xiàn)，加了浮動(dòng)后div不再獨(dú)占一行。

2、還有就是position屬性實(shí)現(xiàn)，通過(guò)position的話需要額外加一層div，最外層div的position設(shè)為relative，子div的position設(shè)為absolute，然后根據(jù)兩欄還是三欄去設(shè)置中/右div的left值即可。

3、通過(guò)felx彈性布局。這點(diǎn)就不獻(xiàn)丑了，也是才學(xué)習(xí)。

**float浮動(dòng)方式實(shí)現(xiàn)**



**position方式實(shí)現(xiàn)**


幾種常見的居中方法

塊級(jí)元素水平/垂直居中：
1、不改變float和position的情況下，設(shè)置margin: 0 auto即可實(shí)現(xiàn)快速水平居中而且不需要知道div的具體寬高，但是只能實(shí)現(xiàn)水平居中。

    body{
        border: 1px solid black;
    }

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

    }

2、如果div有浮動(dòng)或position情形，可通過(guò)設(shè)置left/topd值為50%，再配合transform: translate(?, ?)實(shí)現(xiàn)水平/垂直居中，這種方式不需要知道div的具體寬高。


3、如果div的寬高已知，則設(shè)置left/topd值為50%后margin-top/margin-left分別減去div寬高的一半，也可以實(shí)現(xiàn)水平/垂直居中

    .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;

    }

行內(nèi)元素水平/垂直居中：
1、行內(nèi)元素設(shè)置text-align: center實(shí)現(xiàn)水平居中，ine-height值設(shè)置為父元素高度可實(shí)現(xiàn)垂直居中。不過(guò)ine-height只能設(shè)置單行文本且父元素高度要已知。




    

        
1

2、多行文本水平/垂直居中的話，父元素設(shè)置display: table，文本元素設(shè)置display: table-cell;vertical-align: middle;可實(shí)現(xiàn)垂直居中。




    

        
123

        
123

        
123

一些其他的知識(shí)點(diǎn)
3、英文單詞因不可分割性，div寬度不夠時(shí)不會(huì)自動(dòng)換行，word-break屬性可強(qiáng)制換行不過(guò)中文不受此限制。

4、脫離文檔流的元素（fixed），其高度不再計(jì)算到body高度內(nèi)。

5、CSS盡量不要寫死具體高度，寬度不要也高度100%，容易引發(fā)其他問題。div的寬高應(yīng)有其內(nèi)元素?fù)伍_。

6、加了display：inline-block的話一般都需要加vertical-lign。

7、span標(biāo)簽換行和不換行是有區(qū)別的。大家仔細(xì)看看html內(nèi)，四個(gè)span前2個(gè)沒換行后2個(gè)換行，瀏覽器渲染出的結(jié)果明顯有一個(gè)空格。


    

        123456
    

    

        123
        456

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114639.html

相關(guān)文章

  • CSS學(xué)習(xí)部分知識(shí)點(diǎn)記錄

    摘要：整理一些最近幾天學(xué)習(xí)的一些知識(shí)點(diǎn)，好記性不如爛筆頭，寫下來(lái)敲一遍代碼為自己寫哈。這點(diǎn)就不獻(xiàn)丑了，也是才學(xué)習(xí)。脫離文檔流的元素，其高度不再計(jì)算到高度內(nèi)。 整理一些最近幾天學(xué)習(xí)CSS的一些知識(shí)點(diǎn)，好記性不如爛筆頭，寫下來(lái)敲一遍代碼為自己寫哈。 左右兩欄或三欄布局1、常用方法是給div加float浮動(dòng)方式實(shí)現(xiàn)，加了浮動(dòng)后div不再獨(dú)占一行。 2、還有就是position屬性實(shí)現(xiàn)，通過(guò)posi...

    maxmin 評(píng)論0 收藏0

  • 前端開發(fā)學(xué)習(xí)-網(wǎng)址記錄

    摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁(yè)面渲染國(guó)外先更到這，還有太多網(wǎng)址，先歸類一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點(diǎn)，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    CatalpaFlat 評(píng)論0 收藏0

  • 前端開發(fā)學(xué)習(xí)-網(wǎng)址記錄

    摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁(yè)面渲染國(guó)外先更到這，還有太多網(wǎng)址，先歸類一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點(diǎn)，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    anonymoussf 評(píng)論0 收藏0

  • 前端開發(fā)學(xué)習(xí)-網(wǎng)址記錄

    摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁(yè)面渲染國(guó)外先更到這，還有太多網(wǎng)址，先歸類一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點(diǎn)，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...

    zhigoo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<