CSS之佈局相關

邊距屬性相關

• margin
  
  • 外邊距合併
    
    • 當兩個外邊距相遇時,他們將形成一個外邊距,稱之爲外邊距合併。外邊距的值,以大值爲準
  • A Problem
    
    • 描述
      
      • 內外嵌套的div元素,如果設置內層div的margin-top,默認會作用於外層div的margin-top上,而內層沒有效果
    • 解決方案
      
      • 外層元素添加邊框
      • 外層元素添加padding-top
      • 外層元素設置display:table (推薦)

多列屬性相關

• column-count 元素被分隔的列數
• column-gap 列與列之間的間隔
• column-rule 列規則, 列分隔符的寬度、樣式、顏色
• 注意: 存在瀏覽器兼容性問題, 儘量添加前綴
• 示例代碼
  

div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;
}