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;
}