作為乙個不喜歡寫樣式的前端，遇到了直接對外的活動頁面的需求，一下炸出一堆問題：
沒錯，就是很簡單的乙個css，實現的方法有很多。然後我們再看一下這個視覺效果要怎麼實現：
img+脫離文字流的方法?雙div+定位？
其實，乙個div+padding馬上解決，div背景100%然後center+padding-top，div裡面的文字就自然到下面去了，然後定位定準就好了。另外，文字換成偽元素也可以。
一些人也知道，padding的百分比相對於width，那麼這樣就可以實現了乙個等比例的盒子，然後隨便縮放都可以了。比如做乙個正方形，邊長是螢幕寬度一半：
.scale50
複製**
對於這個欄的左邊部分，用margin還是padding呢？這個情況當然是padding，因為有乙個邊線?。對於這個欄的上面，是padding還是margin呢？實際上，在這個情況下都是一樣的，但是有乙個潛在問題：如果有兩行，而且垂直方向還有其他盒子的margin，那麼就會發生垂直方向的margin坍塌（取較大值）;或者當有父盒子包裹，他的margin會走到外面影響外面。這時候，又要加上轉化為bfc的**。
比如，有乙個設計稿是這樣的：
可能看起來是居中，然後很快寫出來子絕父相的萬金油居中。然後設計突然走過來說，怎麼總是感覺有點不對啊，於是看一下下半部分：
真的不是居中啊，水平方向的也是。那麼，這時候，寫死margin不就搞定了，保證視覺不來找你。
?...許多天後，測試說，某某手機視覺就出問題了。當然，寫死px肯定藥丸啊，所以移動端就是要用rem解決。我這裡乙個rem等於50px，那換算一下，圖上第乙個div（綠色的鉤）的margin就是176 148 0 151，換成rem是3.52 2.96 0 3.02，後面的樣式問題只要不是橫屏或者ipad的（無視覺稿的前提）都不是你的鍋了。
正的就是撐開整個margin-box，那負的我們就可以想象出來，吃掉這個margin-box。一般的情況下，就是平移。如果加上了float就神奇了，還能跨行平移。雙飛翼和聖杯布局其中一部分就是利用這個原理
前面都是廢話，不就是乙個盒子模型嘛。沒錯，盒子模型，誰都知道，但是用起來誰用的好，這就難說了
接下來，準備用n種方法實現三列布局，中間自適應，兩邊固定寬度html:
class="container">
class="m">中間div>
class="l">左邊div>
class="r">右邊div>
div>
複製**
.container
.l, .m, .r
.l .m
.r 複製**
"calc?! 避免recalculate啊"這時候，去吧，ie盒模型：
.m
複製**
還是一樣的html
.container
.m, .l, .r
.m .l
.r 複製**
接著，用到負margin，先把左邊到移動一行，即是-100%，右邊就移動乙個身位-50px就ok，現在已經是視覺上的3列。最後，中間部分開頭被遮住，而且佔了100%行寬。那麼我們只能用容器的padding或者自己的margin壓自己。
如果是用容器padding，將左右兩邊騰出來，剛剛好放下lr兩個div。最後，l和r還是在m裡面，所以還要移一下，relative就好。這就是聖杯布局
如果是用自己的margin壓自己，那麼就需要多乙個div包住自己。前面步驟一樣，包住自己的div佔滿一行，但是自身有margin，完美解決。這就是雙飛翼布局。圖示和上圖基本一模一樣，只是最外那層不是container而是m，真正的展示出來的中間部分是m裡面的div，另外，l和r也不用relative了。
"m">
"margin-setting">
中間複製**
class="container">
class="l">左邊div>
class="m">這是中間內容div>
class="r">右邊div>
div>
複製**
.container
.m, .l, .r
.m .l
.r 複製**
是不是遇到過行內元素總是有間隔的問題，html加注釋就可以去掉分隔符，當然這裡要實現3列布局：
class="l">左邊div>
class="m">中間div>
class="r">右邊div>
複製**
.l, .m, .r
.l .m
.r 複製**
class="container"
l="左邊">中間div>
class="r">右邊div>
複製**
.container
.container
::before
.r 複製**
html還是按順序：
class="container">
class="l">左邊div>
class="m">這是中間內容
div>
class="r">右邊div>
div>
複製**
.container
.l .m
.r 複製**
.container
.container
div:nth-of-type(1)
.container
div:nth-of-type(2)
.container
div:nth-of-type(3)
複製**
div
div::before
div::after
複製**
又瞎搞一堆亂七八糟的，先冷靜一下
牛飛盤隊（弱雞的DP自我救贖）
題面 老唐最近迷上了飛盤，約翰想和他一起玩，於是打算從他家的n頭奶牛中選出一支隊伍。每只奶牛的能力為整數，第i頭奶牛的能力為r i 飛盤隊的隊員數量不能少於 1 大於n。一支隊伍的總能力就是所有隊員能力的總和約翰比較迷信，他的幸運數字是f，所以他要求隊伍的總能力必須是f的倍數。請幫他 算一下，符合這...
菜雞的自救之路
博主研二在讀，渾渾噩噩，一無所學。一朝面臨畢業求職，惶惶恐恐，雖無大志，但也不甘墮落。於是今日開啟菜雞的自我拯救之路，爭取通過數月乃至一年的努力，不求成為大神，起碼脫離菜雞稱號，等來年春招，在面臨殘酷的競爭時不至於任人宰割。首先明確需要點亮的技能樹都有哪些 畢業要緊，最理想的情況當然是在滿足科研專案...
2018 11 21！鹹魚自我救贖之路的開始
千言萬語，不知從何說起 既然這樣，先介紹一下自己吧。我是一條鹹魚，從小的時候就是一條鹹魚。無論在什麼方面都沒有出眾的地方。大學學習的是軟體工程，出來這兩年卻去做了別的職業，東奔西走。最近突然開始思考 我的路在 我的事業在 快27歲了，眼看著周 圍的同學朋友都走上了人生正軌，而我卻還是個讓家人擔心的孩...