摘要:整理一些最近幾天學(xué)習(xí)的一些知識(shí)點(diǎn),好記性不如爛筆頭,寫(xiě)下來(lái)敲一遍代碼為自己寫(xiě)哈。這點(diǎn)就不獻(xiàn)丑了,也是才學(xué)習(xí)。脫離文檔流的元素,其高度不再計(jì)算到高度內(nèi)。
整理一些最近幾天學(xué)習(xí)CSS的一些知識(shí)點(diǎn),好記性不如爛筆頭,寫(xiě)下來(lái)敲一遍代碼為自己寫(xiě)哈。
左右兩欄或三欄布局
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)**
幾種常見(jià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盡量不要寫(xiě)死具體高度,寬度不要也高度100%,容易引發(fā)其他問(wèn)題。div的寬高應(yīng)有其內(nèi)元素?fù)伍_(kāi)。
6、加了display:inline-block的話一般都需要加vertical-lign。
7、span標(biāo)簽換行和不換行是有區(qū)別的。大家仔細(xì)看看html內(nèi),四個(gè)span前2個(gè)沒(méi)換行后2個(gè)換行,瀏覽器渲染出的結(jié)果明顯有一個(gè)空格。
123456123 456
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/55057.html
摘要:整理一些最近幾天學(xué)習(xí)的一些知識(shí)點(diǎn),好記性不如爛筆頭,寫(xiě)下來(lái)敲一遍代碼為自己寫(xiě)哈。這點(diǎn)就不獻(xiàn)丑了,也是才學(xué)習(xí)。脫離文檔流的元素,其高度不再計(jì)算到高度內(nèi)。 整理一些最近幾天學(xué)習(xí)CSS的一些知識(shí)點(diǎn),好記性不如爛筆頭,寫(xiě)下來(lái)敲一遍代碼為自己寫(xiě)哈。 左右兩欄或三欄布局1、常用方法是給div加float浮動(dòng)方式實(shí)現(xiàn),加了浮動(dòng)后div不再獨(dú)占一行。 2、還有就是position屬性實(shí)現(xiàn),通過(guò)posi...
摘要:不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開(kāi)發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂(lè)在線什么是頁(yè)面渲染國(guó)外先更到這,還有太多網(wǎng)址,先歸類(lèi)一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文,雖然比以前理解深了一點(diǎn),但還是懵,想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
摘要:不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開(kāi)發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂(lè)在線什么是頁(yè)面渲染國(guó)外先更到這,還有太多網(wǎng)址,先歸類(lèi)一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文,雖然比以前理解深了一點(diǎn),但還是懵,想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
摘要:不是一下子能看完綜合使用編程是一番怎樣的體驗(yàn)學(xué)習(xí)筆記網(wǎng)站前端開(kāi)發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂(lè)在線什么是頁(yè)面渲染國(guó)外先更到這,還有太多網(wǎng)址,先歸類(lèi)一下再補(bǔ)充。 最近在復(fù)習(xí)JavaScript知識(shí)時(shí)遇到以前就不懂的閉包、上下文,雖然比以前理解深了一點(diǎn),但還是懵,想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
閱讀 4021·2021-11-22 13:53
閱讀 1717·2021-09-23 11:52
閱讀 2435·2021-09-06 15:02
閱讀 930·2019-08-30 15:54
閱讀 901·2019-08-30 14:15
閱讀 2385·2019-08-29 18:39
閱讀 650·2019-08-29 16:07
閱讀 416·2019-08-29 13:13