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