CSS學習部分知識點記錄

maxmin 發布于2019-08-02 16:18 / 2819人閱讀

摘要：整理一些最近幾天學習的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼為自己寫哈。這點就不獻丑了，也是才學習。脫離文檔流的元素，其高度不再計算到高度內。

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

左右兩欄或三欄布局
1、常用方法是給div加float浮動方式實現，加了浮動后div不再獨占一行。

2、還有就是position屬性實現，通過position的話需要額外加一層div，最外層div的position設為relative，子div的position設為absolute，然后根據兩欄還是三欄去設置中/右div的left值即可。

3、通過felx彈性布局。這點就不獻丑了，也是才學習。

**float浮動方式實現**



**position方式實現**

幾種常見的居中方法

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

    body{
        border: 1px solid black;
    }

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

    }

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

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

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

    }

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

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

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

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

5、CSS盡量不要寫死具體高度，寬度不要也高度100%，容易引發其他問題。div的寬高應有其內元素撐開。

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

7、span標簽換行和不換行是有區別的。大家仔細看看html內，四個span前2個沒換行后2個換行，瀏覽器渲染出的結果明顯有一個空格。

云服務器 GPU云服務器深度學習部分和 javascript應該學習哪部分學習機器學習知識深度學習知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/55057.html

CSS學習部分知識點記錄

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

lookSomeone 2019-08-30 10:53 評論0 收藏0
前端開發學習-網址記錄

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

CatalpaFlat 2019-08-29 11:31 評論0 收藏0
前端開發學習-網址記錄

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

anonymoussf 2019-08-20 12:06 評論0 收藏0
前端開發學習-網址記錄

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

zhigoo 2019-08-01 15:54 評論0 收藏0