摘要：中全部元素都是盒模型，盒子會(huì)占用一定的空間，依次排放在中，形成了文檔流。某個(gè)元素脫離文檔流后，在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。設(shè)置屬性為，脫離文檔流，并不在頁(yè)面展示了。
后端工程師雖然大部分工作都是跟服務(wù)器緩存數(shù)據(jù)庫(kù)打交道，但有時(shí)也需要寫(xiě)一些前端代碼。
有些公司的OAM后臺(tái)基本是由后端工程師承包的，所以前端基礎(chǔ)知識(shí)是必須要掌握的；就算開(kāi)發(fā)中不直接寫(xiě)前段代碼，了解前端知識(shí)能讓我們跟前端小伙伴更愉快的交流。
Js對(duì)于后端小伙伴來(lái)說(shuō)不算難點(diǎn)，能夠順手的使用（當(dāng)然十分依賴 jQuery），涉及到 css 就會(huì)有點(diǎn)懵逼了。
后臺(tái)開(kāi)發(fā)一般不會(huì)用到太難的前端技巧，能夠在完成正確布局的基礎(chǔ)上，再稍微做一些美化，就已經(jīng)夠用了。
下面的內(nèi)容有一些代碼樣例，這是一部分前置的 css 樣式。
.green {
background-color: lightseagreen;
}
.red {
background-color: orangered;
}
.container {
border: 1px solid #0000f1;
}
.w100 {
width: 100px;
height: 100px;
}
.w50 {
width: 50px;
height: 50px;
}
把元素放到正確的位置上
1）文檔流
瀏覽器會(huì)把 html 元素按照從上到下，從左到右依次排放。
Html 中全部元素都是盒模型，盒子會(huì)占用一定的空間，依次排放在HTML中，形成了文檔流。
某些特殊的 css 樣式會(huì)把元素脫離文檔流。某個(gè)元素脫離文檔流后，在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。
1.1）float 浮動(dòng)方式脫離文檔流
示例：
效果：
給中間的紅色塊添加浮動(dòng)：
效果：
紅色塊在原來(lái)的行內(nèi)向左浮動(dòng)并脫離了文檔流，下面的綠色塊頂上來(lái)了。
float還有一些其他用法，但float一般不常用，這里不多做討論。
1.2）使用定位脫離文檔流
如果給元素設(shè)置了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會(huì)脫離文檔文檔流。
脫離前的代碼示例：
效果：
脫離后：
效果：
雖然兩個(gè)紅色塊還在原來(lái)的坑上，但實(shí)際上它們已經(jīng)不占文檔流了，所以下面的兩個(gè)綠色塊都上來(lái)了。
1.3）display: none
設(shè)置 display 屬性為 none，脫離文檔流，并不在頁(yè)面展示了。
2）display 樣式
display 樣式?jīng)Q定了元素的展現(xiàn)形式。
display 有很多取值，比如上面提到的 none 值表示不在頁(yè)面展示。
對(duì)于后端小伙伴來(lái)說(shuō)，除了 none 外，只需要再了解三個(gè)值就足夠用了，它們分別是 block，inline-block，inline。
2.1）block 塊元素
塊元素在瀏覽器中展示時(shí)，通常會(huì)以新行來(lái)開(kāi)始（和結(jié)束）。
常見(jiàn)的（display 默認(rèn)為 block）塊元素有 ...,
,
, , ,
。
舉個(gè)栗子：
效果為：
三個(gè)塊級(jí)元素各占一行。同時(shí)你可能會(huì)發(fā)現(xiàn)這三個(gè)元素上下之間有間距，這是因?yàn)?p h1-h6 標(biāo)簽?zāi)J(rèn)是有 margin-top margin-bottom 的。
同時(shí)可以給塊級(jí)元素設(shè)置高寬，寬度未設(shè)置時(shí)默認(rèn)是 100%。
2.2）inline 元素
行內(nèi)（inline）元素會(huì)在一行內(nèi)從左向右排布，如果一行排滿了，會(huì)往下一行堆疊。
常見(jiàn)的行內(nèi)元素有 span label b i sub sup，等文本格式化標(biāo)簽。
舉個(gè)栗子：
哈哈
呵呵
呵呵
呵呵
呵呵
哈哈
呵呵
呵呵
呵呵
呵呵
哈哈
呵呵
呵呵
呵呵
呵呵
哈哈
呵呵
呵呵
呵呵
呵呵
哈哈
呵呵
呵呵
呵呵呵呵
效果為：
細(xì)心的話，你會(huì)發(fā)現(xiàn)上面這些元素都設(shè)置了 w100 這個(gè)類，但是高寬都沒(méi)有變化。這是因?yàn)?strong>行內(nèi)元素不能設(shè)置高寬，只會(huì)根據(jù)內(nèi)容的高寬自適應(yīng)。
ps:每個(gè)行內(nèi)元素之間的空格是因?yàn)樵诰庉嬊袄飪蓚€(gè)標(biāo)簽之間有個(gè)回車以及多個(gè) tab（空格），這些不可見(jiàn)字符被當(dāng)成一個(gè)空格展示了。最后兩個(gè)元素沒(méi)有間隔，所以中間沒(méi)有空格。
2.3）inline-block 行內(nèi)塊
行內(nèi)塊元素既可以設(shè)置高寬，又可以像行內(nèi)元素一樣并排排列。
常見(jiàn)的行內(nèi)塊元素有 img input button select等。
示例：
效果為：
2.4）display小結(jié)
各個(gè)元素都有自己默認(rèn)的 display 屬性，但我們可以給元素設(shè)置 display 屬性覆蓋默認(rèn)的屬性。
比如給 div 設(shè)置 display: inline-block，就可以讓塊兒并排排列了。給 span 設(shè)置 display:inline-block，就可以設(shè)置高寬了。
示例：
我看起來(lái)像是p標(biāo)簽了
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52981.html
-
摘要：中全部元素都是盒模型，盒子會(huì)占用一定的空間，依次排放在中，形成了文檔流。某個(gè)元素脫離文檔流后，在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。設(shè)置屬性為，脫離文檔流，并不在頁(yè)面展示了。
后端工程師雖然大部分工作都是跟服務(wù)器緩存數(shù)據(jù)庫(kù)打交道，但有時(shí)也需要寫(xiě)一些前端代碼。
有些公司的OAM后臺(tái)基本是由后端工程師承包的，所以前端基礎(chǔ)知識(shí)是必須要掌握的；就算開(kāi)發(fā)中不直接寫(xiě)前段代碼，了解前端...
Jiavan
評(píng)論0
收藏0
-
摘要：中全部元素都是盒模型，盒子會(huì)占用一定的空間，依次排放在中，形成了文檔流。某個(gè)元素脫離文檔流后，在文檔流中的其他元素將忽略該元素并填補(bǔ)其原先的空間。設(shè)置屬性為，脫離文檔流，并不在頁(yè)面展示了。
后端工程師雖然大部分工作都是跟服務(wù)器緩存數(shù)據(jù)庫(kù)打交道，但有時(shí)也需要寫(xiě)一些前端代碼。
有些公司的OAM后臺(tái)基本是由后端工程師承包的，所以前端基礎(chǔ)知識(shí)是必須要掌握的；就算開(kāi)發(fā)中不直接寫(xiě)前段代碼，了解前端...
用戶83
評(píng)論0
收藏0
-
摘要：轉(zhuǎn)自前端外刊評(píng)論非常感謝，翻譯的很好，受益很多，轉(zhuǎn)到此處讓前端小伙伴們也驚呆下上次我寫(xiě)前端工程師必知必會(huì)已經(jīng)是三年前了，那是我寫(xiě)過(guò)最火的文章了。測(cè)試的第二大障礙是工具。
轉(zhuǎn)自：前端外刊評(píng)論
非常感謝，翻譯的很好，受益很多，轉(zhuǎn)到此處讓前端小伙伴們也驚呆下........
上次我寫(xiě)《前端工程師必知必會(huì)》已經(jīng)是三年前了，那是我寫(xiě)過(guò)最火的文章了。三年了，我仍然會(huì)在Twitter上...
stefan
評(píng)論0
收藏0
男|高級(jí)講師
-
閱讀 2511·2021-11-18 10:02
-
閱讀 1976·2021-11-09 09:45
-
閱讀 2399·2021-09-26 09:47
-
閱讀 1010·2021-07-23 10:26
-
閱讀 1063·2019-08-30 15:47
-
閱讀 3356·2019-08-30 15:44
-
閱讀 957·2019-08-30 15:43
-
閱讀 881·2019-08-29 13:50
