CSS階段總結(jié)

daryl 發(fā)布于2019-08-30 15:54 / 1562人閱讀

摘要：布局之左右布局與左中右布局方法為子元素設(shè)置浮動，然后在其父元素上使用類來清除浮動。

CSS布局之左右布局與左中右布局

方法：為子元素設(shè)置浮動，然后在其父元素上使用clearfix類來清除浮動。代碼示例：

html部分：

  a
  b
  c


CSS部分：
.child{
  float: left;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

水平居中 子元素為內(nèi)聯(lián)元素、單個塊狀及多級塊狀元素布局方案不同，具體總結(jié)如下：

內(nèi)聯(lián)元素：對父元素設(shè)置text-align: center；

單個塊狀元素：對子元素設(shè)置margin: 0 auto;

多個塊狀元素：有三種方式
a、子元素全部設(shè)置為display: inline-block;，父元素設(shè)置為text-align: center；
b、flex布局，父元素display: flex; justify-content: center;
c、如果是在多行各自居中，直接給子元素設(shè)置margin: 0 auto;

垂直居中 子元素為單行內(nèi)聯(lián)、多行內(nèi)聯(lián)及塊狀元素布局方案不同，具體總結(jié)如下：

單行內(nèi)聯(lián)元素：父元素高度一定，設(shè)置line-height等于height

多行內(nèi)聯(lián)元素：父元素設(shè)置：display: table-cell; vertical-align: middle;

塊狀元素：1、固定高度的塊級元素：通過絕對定位元素距離頂部50%，并設(shè)置margin-top為向上偏移元素高度的一半

        2、未知高度的塊級元素：借助CSS3中的`transform`屬性向Y軸反向偏移50%的方法來實(shí)現(xiàn)

一些小技巧

合理使用偽元素

a標(biāo)簽去掉其默認(rèn)樣式時，顏色可設(shè)置為繼承父元素a{color:inherit;}

合理使用max-width屬性

云服務(wù)器 GPU云服務(wù)器七大階段階段三個階段 webrtc階段

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117113.html

相關(guān)文章

關(guān)于Html+css階段學(xué)習(xí)總結(jié)

摘要：再之后，通過專業(yè)老師的指導(dǎo)，開始進(jìn)行前端知識的全面及系統(tǒng)性的學(xué)習(xí)。而這篇文章便是對這次學(xué)習(xí)的一次階段性總結(jié)。的學(xué)習(xí)并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習(xí)。一、學(xué)習(xí)經(jīng)歷進(jìn)入大學(xué)不久，就加入了社團(tuán)，從而對前端有了一個初步的了解，之后也做過一些學(xué)校的官網(wǎng)，積累了一些微小的經(jīng)驗(yàn)。到了大二的時候，學(xué)校開設(shè)了專門的html+css課程，從中也學(xué)到...

CoXie 2019-08-30 14:21 評論0 收藏0
關(guān)于Html+css階段學(xué)習(xí)總結(jié)

摘要：再之后，通過專業(yè)老師的指導(dǎo)，開始進(jìn)行前端知識的全面及系統(tǒng)性的學(xué)習(xí)。而這篇文章便是對這次學(xué)習(xí)的一次階段性總結(jié)。的學(xué)習(xí)并不是太難，也可以說是很容易，但千里之行，這才剛剛開始，熟練的掌握，還需要不斷的練習(xí)。一、學(xué)習(xí)經(jīng)歷進(jìn)入大學(xué)不久，就加入了社團(tuán)，從而對前端有了一個初步的了解，之后也做過一些學(xué)校的官網(wǎng)，積累了一些微小的經(jīng)驗(yàn)。到了大二的時候，學(xué)校開設(shè)了專門的html+css課程，從中也學(xué)到...

Rindia 2019-08-02 10:06 評論0 收藏0
前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎(chǔ)的就是。對應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動畫。前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...

everfly 2019-08-02 15:30 評論0 收藏0
前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎(chǔ)的就是。對應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動畫。前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...

bang590 2019-08-30 11:21 評論0 收藏0
前端培訓(xùn)-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎(chǔ)的就是。對應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動畫。前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...

james 2019-08-23 18:34 評論0 收藏0