css多列布局 multi-column(瀑布流布局)

html-css023

css多列布局 multi-column(瀑布流布局),第1张

column-count :指定元素应该分为的列数

column-fill:指定css如何填充列

column-gap:指定列之间的差距

column-rule:对于设置所有column-rule-*属性的简写属性

column-rule-color:指定列之间的颜色规则

column-rule-style:指定列之间的样式规则

column-rule-width:指定列之间的宽度规则

column-span:指定元素应该跨越多少列

column-width:指定列的宽度

columns缩写属性设置列宽和列数

 break-inside: avoid //防止断裂

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局,absolute绝对定位,flex弹性盒子,table表格布局,grid网格布局 / 栅格化布局

3.移动端布局:流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分:

子元素纵向等距排列:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。