資訊專欄INFORMATION COLUMN
摘要：整理一些最近幾天學習的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼為自己寫哈。這點就不獻丑了，也是才學習。脫離文檔流的元素，其高度不再計算到高度內(nèi)。
整理一些最近幾天學習CSS的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼為自己寫哈。
左右兩欄或三欄布局
1、常用方法是給div加float浮動方式實現(xiàn)，加了浮動后div不再獨占一行。
2、還有就是position屬性實現(xiàn)，通過position的話需要額外加一層div，最外層div的position設(shè)為relative，子div的position設(shè)為absolute，然后根據(jù)兩欄還是三欄去設(shè)置中/右div的left值即可。
3、通過felx彈性布局。這點就不獻丑了，也是才學習。
**float浮動方式實現(xiàn)**
**position方式實現(xiàn)**
幾種常見的居中方法
塊級元素水平/垂直居中：
1、不改變float和position的情況下，設(shè)置margin: 0 auto即可實現(xiàn)快速水平居中而且不需要知道div的具體寬高，但是只能實現(xiàn)水平居中。
body{
border: 1px solid black;
}
.three {
border: 1px solid green;
height: 500px;
width: 500px;
margin: 0 auto;
}
2、如果div有浮動或position情形，可通過設(shè)置left/topd值為50%，再配合transform: translate(?, ?)實現(xiàn)水平/垂直居中，這種方式不需要知道div的具體寬高。
3、如果div的寬高已知，則設(shè)置left/topd值為50%后margin-top/margin-left分別減去div寬高的一半，也可以實現(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實現(xiàn)水平居中，ine-height值設(shè)置為父元素高度可實現(xiàn)垂直居中。不過ine-height只能設(shè)置單行文本且父元素高度要已知。
1
2、多行文本水平/垂直居中的話，父元素設(shè)置display: table，文本元素設(shè)置display: table-cell;vertical-align: middle;可實現(xiàn)垂直居中。
123
123
123
一些其他的知識點
3、英文單詞因不可分割性，div寬度不夠時不會自動換行，word-break屬性可強制換行不過中文不受此限制。
4、脫離文檔流的元素（fixed），其高度不再計算到body高度內(nèi)。
5、CSS盡量不要寫死具體高度，寬度不要也高度100%，容易引發(fā)其他問題。div的寬高應(yīng)有其內(nèi)元素撐開。
6、加了display：inline-block的話一般都需要加vertical-lign。
7、span標簽換行和不換行是有區(qū)別的。大家仔細看看html內(nèi)，四個span前2個沒換行后2個換行，瀏覽器渲染出的結(jié)果明顯有一個空格。
123456
123
456
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/55057.html
摘要：整理一些最近幾天學習的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼為自己寫哈。這點就不獻丑了，也是才學習。脫離文檔流的元素，其高度不再計算到高度內(nèi)。 整理一些最近幾天學習CSS的一些知識點，好記性不如爛筆頭，寫下來敲一遍代碼為自己寫哈。 左右兩欄或三欄布局1、常用方法是給div加float浮動方式實現(xiàn)，加了浮動后div不再獨占一行。 2、還有就是position屬性實現(xiàn)，通過posi...
摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗學習筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁面渲染國外先更到這，還有太多網(wǎng)址，先歸類一下再補充。 最近在復(fù)習JavaScript知識時遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗學習筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁面渲染國外先更到這，還有太多網(wǎng)址，先歸類一下再補充。 最近在復(fù)習JavaScript知識時遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
摘要：不是一下子能看完綜合使用編程是一番怎樣的體驗學習筆記網(wǎng)站前端開發(fā)基礎(chǔ)算法題如何優(yōu)雅地使用如何優(yōu)雅地使用零度博客碼農(nóng)網(wǎng)伯樂在線什么是頁面渲染國外先更到這，還有太多網(wǎng)址，先歸類一下再補充。 最近在復(fù)習JavaScript知識時遇到以前就不懂的閉包、上下文，雖然比以前理解深了一點，但還是懵，想緩一下。。就去看了其他。。把Git、Grunt、Gulp、jQuery、jQuery UI、Reac...
閱讀 4031·2021-11-22 13:53
閱讀 1733·2021-09-23 11:52
閱讀 2449·2021-09-06 15:02
閱讀 965·2019-08-30 15:54
閱讀 913·2019-08-30 14:15
閱讀 2394·2019-08-29 18:39
閱讀 666·2019-08-29 16:07
閱讀 428·2019-08-29 13:13
