建議使用 padding 代替 margin
我們在設計稿還原的時候，padding 和 margin 兩個是常用的屬性，但我們知道屬於同乙個 bfc 的兩個相鄰 box 的 margin 會發生重疊，所以如果 margin 使用的過於頻繁的時候，box 的垂直距離可能就會發生重疊。
還有乙個問題就是第乙個子元素的 margin-top 值會加在父元素上的 bug（最後乙個子元素的 margin-bottom 也存在類似的問題）。這裡是不是有人問為什麼呢？
所有毗鄰的兩個或多個盒元素的 margin 將會合併為乙個 margin 共享。 毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding 或 border 分隔。至於為什麼合併我個人覺得這和排隊的安全距離有點類似，人與人之間的安全距離是 1m，如果安全距離不合併，那麼我們 在排隊的時候是不是人與人的距離就變成 2m 了。當然很可能不是這個原因。
所以我們可以在首位元素使用 padding 來替代 margin。當然有的時候使用 padding 不能滿足需求，這時你也可以在「非空內容」這個條件做文章。即在父元素新增乙個偽元素。
所以我們在使用 margin 的時候一定要注意 collapsing margins 問題。position:fixed 降級問題
知道曾經的你是不是遇到吸頂效果，就是使用 position:fixed 這個屬性。其實如果其父元素中有使用 transform，fixed 的效果會降級為 absolute。
解決方案：
既然會降級為 absolute 效果，我們該怎麼解決這個問題呢？我們就改考慮什麼情況下 fixed 和 absolute 的表現效果會是一樣的。
即當使用 fixed 的直接父元素的高度和螢幕的高度相同時 fixed 和 absolute 的表現效果會是一樣的。
如果這個直接父級內的元素存在滾動的情況，那就加上 overflow-y: auto。合理使用 px | em | rem | % 等單位
在 css 中有許多距離單位，比如 px | em | rem | %，還有 css3 中的 vh | vw 等單位。
那麼我們在專案中應該如何使用呢？我們在 pc 端不需要考慮的這麼複雜，所以這裡我們主要講講這些單位在移動端中的使用。
基礎單位 px
px 是我們最早接觸到的單位了，不過我們在移動端自適應的要求下，使用的頻率不是很高；我總結了以下使用的情況：
比較小的圖案
比如需要我們畫乙個 r 為 5px 的圓，如果我們使用 rem 作為單位，我們很快會發現在一些機型上的圖案不圓，會呈現橢圓形。這是由於 rem 轉 px 會存在精度丟失問題。
所以這個時候我們就需要使用 px 配合 dpr 來實現：
// less
/*@size 建議取雙數*/
.circle
(@size, @backgroundcolor)
[data-dpr="3"] &
}
這個問題下面我會單獨做一小節講，在這裡就不累述。
字型大小（基本都是用 rem 作為單位）
一般情況字型的大小我也會使用 rem 作為單位，因為精度丟失我認為在可以接受的範圍之內。
相對單位 rem
rem 是 css3 新增的乙個相對單位（root em），即相對 html 根元素的字型大小的值。
rem 應該是自適應使用的最廣泛的單位了。
相對單位 em
em 也是乙個相對單位，卻是相對於當前物件內文字的字型大小。
line-height
一般建議在 line-height 使用 em。因為在需要調整字型大小的時候，只需修改 font-size 的值，而 line-height 已經設定成了相對行高了。
首行縮排兩個字元
在存在首行縮排的需求，我也會使用這個單位。
text-indent: 2em
視口單位 vw | vh
vw: 1vw = 視口寬度的 1%
vh: 1vh = 視口高度的 1%
我們知道以 rem 單位設計的彈性布局，是需要在頭部載入一段指令碼來進行監聽解析度的變化來動態改變根元素字型大小，使得 css 與 js 耦合了在一起。
那麼有沒有方案解決這個耦合的問題呢？
答案就是視口單位 vw | vh
以下就是前人給出的使用方案：
$vm_fontsize
: 75;
@function
rem($px)
$vm_design
: 750;
html
@media screen and (
min-width
: 540px) }
// body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body
一般設計稿中的某一類的文字（元素）都是用相同的字型大小、顏色、行高等樣式屬性，所以這些值我們不必每次都重複寫，因為當 ui 更新設計方案，你需要改的地方就很多了。這些重複使用的值我們完全可以存放在變數裡面。
sass 和 less 稍微有點區別：
// sass
$direction
: left;
// less
@direction
: left;
變數定義的語法是： --*； // 為變數名稱
變數使用的語法是：var()；
無論是變數的定義和使用只能在宣告塊 {} 裡面
css 變數字元限制為： [0-9]、[a-za-z]、_、-、中文和韓文等
:root
.div1
和重複變數一樣，重複的樣式也可以歸類。我覺得優秀的**其中有一條肯定是**的復用性強。
這個時候，mixin( 可以理解成 class 中的 class )就能發揮它的作用了。
這是乙個描述性文字的樣式：
.font-description
// less
/* 多行顯示 */
.line-camp
(@clamp
:2 )
.font-des-style
(@fontsize, @color, @lineheight, @textalign
:left )
1px 方案
做過移動端需求的前端肯定是避免不了處理 1px 細線問題，這個問題的原因就是 ui 對頁面美觀度的要求越來越高（不要和我說這是 retina 屏的問題）。
據小生所知好像沒有什麼相容性特別好的方案，這裡我只是提供兩種種相對較好的方案。
使用偽類 + transform
.border_bottom
.border_bottom:after
使用 box-shadow 模擬
.border_bottom
這個方案基本可以滿足所有場景，不過有個缺點也就是顏色會變淺。
從 html 元素繼承 box-sizing
在大多數情況下我們在設定元素的 border 和 padding 並不希望改變元素的 width,height 值，這個時候我們就可以為該元素設定 box-sizing:border-box;。
我不希望每次都重寫一遍，而是希望他是繼承而來的，那麼我們可以使用如下**：
html
*, *:before, *:after
內聯首屏關鍵 css
效能優化中有乙個重要的指標 —— 首次有效繪製（fmp），即指頁面的首要內容（primary content）出現在螢幕上的時間。這一指標影響使用者看到頁面前所需等待的時間，而 內聯首屏關鍵 css（即 critical css，可以稱之為首屏關鍵 css） 能給使用者乙個更好的心理預期。
既然是內聯關鍵 css，也就說明我們只會將少部分的 css **直接寫入 html 中。至於內聯哪些 css 你可以使用 critical。
文字超出省略、文字兩端對齊
需求中我們也經常遇到這樣的需求，這裡直接提供方案。
.line-camp
(@clamp
:2 )
-webkit-box-orient: vertical 在使用 webpack 打包的時候這段**會被刪除掉，原因是 optimize-css-assets-webpack-plugin 這個外掛程式的問題。
解決方案：
可以使用如下的寫法：
.line-camp
(@clamp
:2 )
// html
姓名手機號碼
賬號密碼
// css
divdiv:after
前端詞典 提高幸福感的 9 個 CSS 技巧
和margin兩個是常用的屬性，但我們知道屬於同乙個 bfc 的兩個相鄰 box 的 margin 會發生重疊，所以如果margin使用的過於頻繁的時候，box 的垂直距離可能就會發生重疊。top 值會加在父元素上的 bug 最後乙個子元素的margin bottom也存在類似的問題 這裡是不是有人...
晨讀 如何增加自己的幸福感？
你知道哈佛大學排名第 一 最受歡迎的課是講什麼的嗎？不是講賺錢的，也不是講怎麼管理人的，而是 幸福課 這個課試 釋乙個非常重要的問題 人來到這個世上，到底追求什麼才是最重要的。課程的老師堅定地認為 幸福感是衡量人生的唯一標準，是所有目標的最終目標。何謂幸福？是一種快樂 滿足 或積極的體驗，是一種能體...
此刻的幸福感是難以言喻的
在人海茫茫中遇到了你，也許是一葉障目的緣故罷，曾經竟不失荒唐的認為安全感是奢望並且難以觸及的，僅是為了追求那一絲並不飄渺的所謂踏實，不覺竟已是鑄就了如此多的物是人非。或許，曾經所執守追逐著的並非是所求之物本身。或者說，當追尋著一些人或事物時卻因為目的性過於明確反是物極必反迷失了自己真正想要的究竟是什...