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