《我的部落格地圖》
一.布局
原理：元素浮動 || 絕對定位 均可以使元素脫離常規文件流
方案：尺寸和定位，即所有與尺寸和定位有關的屬性，都可以用來布局。
「浮動」，可形象化理解為，當你將木塊壓入水下，它會向水面浮動，直到浮力等於重力，對於浮動元素而言，當兩個元素的border接觸時浮動終止。
注意：浮動≠布局，浮動起初僅僅用於文字環繞的樣式，而布局是乙個設計方案層面的問題。
1.左側固定寬度，右側自適應
方案一：左側元素設固定寬度且左浮動，右側元素設margin-left且不設寬度
#div01
#div02
方案二：左側元素設絕對定位，右側元素設margin-left且不設寬度
#div01
#div02
方案三：父元素設為table，子元素設為table-cell
方案四：彈性盒模型
flex 屬性用於 設定|| 檢索 彈性盒模型物件的 子元素 如何分配空間。
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex-grow、flex-shrink、flex-basis這三個屬性的作用是：在flex布局中，父元素在不同寬度下，子元素是如何分配父元素的空間的。
flex-grow(父元素的寬度大於所有子元素的寬度的和時,子元素索取父元素的剩餘空間)屬性用於設定或檢索彈性盒的 擴充套件比率。如果元素不是彈性盒物件的元素，則flex-grow 屬性不起作用。
flex-shrink(當父元素的寬度小於所有子元素的寬度的和時，子元素如何縮小自己的寬度。)屬性用於設定或檢索彈性盒的 收縮比率。注意：如果元素不是彈性盒物件的元素，則flex-shrink 屬性不起作用。
flex-basis屬性用於設定或檢索彈性盒 伸縮基準值。注意：如果元素不是彈性盒物件的元素，則flex-basis 屬性不起作用。
2.右側固定寬度，左側自適應
方案一：固定寬度區域浮動，自適應區域使用margin，注意div結構順序，有點微妙
#parent01
#div01
#div02
方案二：固定寬度使用絕對定位，自適應寬度使用margin
#parent
#div01
#div02
方案三：table和table-cell
方案四：flex和flex-basis/flex-grow
3.左右兩側固定寬度，中間自適應
方案一：固定寬度區域浮動，自適應區域使用margin，注意div結構順序，有點微妙
#parent
#div01
#div02
#div03
方案二：固定寬度使用絕對定位+top+left+right
，自適應區域使用margin，注意div結構順序，有點微妙
方案三：table和table-cell
方案四：flex和flex-basis/flex-grow或flex-grow/width
4、偽類和偽元素
單冒號(:)用於css3偽類，雙冒號(::)用於css3偽元素。
偽類，用於向某些選擇器新增特殊的效果。
偽元素，用於將特殊的效果新增到某些選擇器。
偽類有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang
偽元素有：:first-line，:first-letter，:before，:after
5、更改input元素placeholder屬性預設樣式
::-webkit-input-placeholder
6、元素顯示與隱藏
display：none；看不見摸不著，不佔據 普通流 位置，不存在於dom樹中，不渲染該元素；
visibility：hidden；看不見摸得著，佔據 普通流 位置，存在於dom樹中，不渲染該元素；
Oracle面試集錦
oracle 面試題集錦 技術篇 1.解釋冷備份和熱備份的不同點以及各自的優點 解答 熱備份針對歸檔模式的資料庫，在資料庫仍舊處於工作狀態時進行備份。而冷備份指在資料庫關閉後，進行備份，適用於所有模式的資料庫。熱備份的優點在於當備份時，資料庫仍舊可以被使用並且可以將資料庫恢復到任意乙個時間點。冷備份...
zookeeper面試集錦
先新增一台zookeeper機器同步資料，然後關閉原先的機器 1.資料發布訂閱，2.統一命令服務 3.分布式通知與協調 4.分布式鎖 5.集群監控 6.分布式佇列 7.master選舉 集群容災數量 集群總節點數 2 1,假設5臺，最多可以掛2臺，如果掛三颱，集群選舉達不到滿足條件，6臺的話也是最多...
CSS問題集錦
1.如何選擇指定div下的所有的h1 h2.標題？如div的id為 cnblogs post body 我原來定義的css是 1 cnblogs post body h1 h2 h3 h4 2 結果沒有達到預期的效果。後來將css定義為 1 cnblogs post body h1,cnblogs ...