為什麼會有這個疑問呢？首先說明一下，接觸前端有一年的時間了，自認為對靜態布局不在話下，果然，自負的人最容易被打臉吶，剛換了乙份工作，公司對前端要求比較嚴格。
公司使用的是bootstrap開發，我們都知道bootstrap框架最核心的是它的柵格系統，我當然也很喜歡這個啦，不過最近ui給我的設計圖總是和bootstrap相矛盾，就好比說，有個模組需要每乙個元素在移動端和螢幕之間有固定的間距，但是在響應到pc端時，要在有效寬度內貼邊對齊。這就很扯淡啦。我畫個圖表示一下內心的狂躁……
就是實現下面這種結果，看著真的沒什麼難度，不過因為我是用bs的柵格來布局的，所以需要修改bs的padding的值，這種方法不算明智，所以我思考和彙總了幾種實現的做法。都是很基礎的。
1.怎樣讓四個沒有內邊距和邊框的元素貼邊平分？
class="box">
1div>
2div>
3div>
4div>
div>
/* * 怎樣讓四個沒有內邊距和邊框的元素貼邊平分？
*/ .box
.box>div
.box>div:nth-child(n+2)這個是最基礎的，也是最簡單的，沒什麼好說的了，使用最簡單的平分寬度實現。效果圖：
2.怎樣讓四個有內邊距和邊框的元素貼邊平分？
這個就有意思了，每次在開發過程中，只要設定width+padding+border，問題就接踵而來了。不是元素被擠到下一行，就是這一行的寬度沒有平分完。所以我使用了下面的幾種方法。
先設定基礎樣式：
class="div-box div-box1">
1div>
2div>
3div>
4div>
div>
/** 怎樣讓四個有沒有內邊距和邊框的元素貼邊平分？
*/ /*基礎樣式*/
.div-box
.div-box div
/*居中方式一:怪異盒模型+平分寬度*/
.div-box1
div .div-box1
.div-box1
div .div-box1
div:nth-child(n+2)
/*居中方式二:浮動+怪異盒模型+平分寬度*/
.div-box2
::after
.div-box2
div .div-box2
div:nth-child(n+2)
/*居中方式三:彈性盒子（用這個最好啦）*/
.div-box3
.div-box3>div
.div-box3>div
:nth-child(n+2)
/*居中方式四:寬度屬性計算（不提倡，相容性不好）*/
.div-box4
.div-box4>div
.div-box4>div
:nth-child(n+2)
最後，只有掌握最基礎最底層的技術，才能在開發過程中更高效地完成任務。勤勞能致富，後面我要更努力去思考更有用的知識。：)
css js解決文字兩端對齊以及分散對齊
乙個很簡單的設計排版樣式，a圖表示居左對其，但實際上我們想要的可能是b所示的對齊方式。這就是傳說中的兩端對齊 還有一種更確切的說法是兩端分散對齊。最開始的時候 我試圖使用css來解決這個小問題，查閱了很多辦法，發現沒有一種完美相容的解決方式。在一些csser使用了css的兩端對齊方案是基於 text...
CSS實現子元素垂直居中對齊
題目如下 實現子元素垂直居中對齊 子元素垂直居中對齊 1 方法1 利用margin 2 方法二 利用css的 position屬性，把div2相對於div1的top left都設定為50 然後再用margin top設定為div2的高度的負一半拉回來，用marg left設定為寬度的負一半拉回來。p...
css 元素的垂直對齊方式
vertical align 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。例如 style display table cell vertical align top...