和margin兩個是常用的屬性，但我們知道屬於同乙個 bfc 的兩個相鄰 box 的 margin 會發生重疊，所以如果margin使用的過於頻繁的時候，box 的垂直距離可能就會發生重疊。
-top
值會加在父元素上的 bug（最後乙個子元素的margin
-bottom也存在類似的問題）。這裡是不是有人問為什麼呢？
將會合併為乙個margin共享。 毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。
來替代margin。當然有的時候使用padding不能滿足需求，這時你也可以在「非空內容」這個條件做文章。即在父元素新增乙個偽元素。
的時候一定要注意 collapsing margins 問題。
:fixed
這個屬性。其實如果其父元素中有使用transform，fixed的效果會降級為absolute。
效果，我們該怎麼解決這個問題呢？我們就改考慮什麼情況下fixed和absolute的表現效果會是一樣的。
的直接父元素的高度和螢幕的高度相同時fixed和absolute的表現效果會是一樣的。-y
:auto
。基礎單位 px
// less
/*@size 建議取雙數*/
.circle(@size, @backgroundcolor)
[data-dpr="3"] &
}
相對單位 rem
相對單位 em
-height
使用 em。因為在需要調整字型大小的時候，只需修改font
-size的值，而line
-height已經設定成了相對行高了。
text-indent: 2em$vm_fontsize: 75;
@function rem($px)
$vm_design: 750;
html
@media screen and (min-width: 540px)
} // body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body
// sass
$direction: left;
// less
@direction: left;
無論是變數的定義和使用只能在宣告塊 {} 裡面
css 變數字元限制為： [0-9]、[a-za-z]、_、-、中文和韓文等。
:root
.div1
.font-description
// less
/* 多行顯示 */
.line-camp( @clamp:2 )
.font-des-style( @fontsize, @color, @lineheight, @textalign:left )
使用偽類 + transform
.border_bottom
.border_bottom:after
.border_bottompadding並不希望改變元素的width
,height
值，這個時候我們就可以為該元素設定box
-sizing
:border
-box
;
。
html
*, *:before, *:after
sizing
值，又無需為每乙個元素重複設定box
-sizing
:border
-box
;。
超出省略
.line-camp( @clamp:2 )webkit
-box
-orient
:vertical
在使用 webpack 打包的時候這段**會被刪除掉，原因是optimize
-css
-assets
-webpack
-plugin這個外掛程式的問題。
.line-camp( @clamp:2 )// html
姓名手機號碼
賬號密碼
// css
div
"原創寫作，實屬不易，感謝支援"
提高幸福感的 9 個 CSS 技巧
建議使用 padding 代替 margin 我們在設計稿還原的時候，padding 和 margin 兩個是常用的屬性，但我們知道屬於同乙個 bfc 的兩個相鄰 box 的 margin 會發生重疊，所以如果 margin 使用的過於頻繁的時候，box 的垂直距離可能就會發生重疊。還有乙個問題就是...
晨讀 如何增加自己的幸福感？
你知道哈佛大學排名第 一 最受歡迎的課是講什麼的嗎？不是講賺錢的，也不是講怎麼管理人的，而是 幸福課 這個課試 釋乙個非常重要的問題 人來到這個世上，到底追求什麼才是最重要的。課程的老師堅定地認為 幸福感是衡量人生的唯一標準，是所有目標的最終目標。何謂幸福？是一種快樂 滿足 或積極的體驗，是一種能體...
此刻的幸福感是難以言喻的
在人海茫茫中遇到了你，也許是一葉障目的緣故罷，曾經竟不失荒唐的認為安全感是奢望並且難以觸及的，僅是為了追求那一絲並不飄渺的所謂踏實，不覺竟已是鑄就了如此多的物是人非。或許，曾經所執守追逐著的並非是所求之物本身。或者說，當追尋著一些人或事物時卻因為目的性過於明確反是物極必反迷失了自己真正想要的究竟是什...