css3设计模式，常用布局

html-css013

css3设计模式，常用布局,第1张

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>即可。

H5edu教育Html5开发为您解答：

1、传统的多列浮动

实现方式

· 各列固定宽度，并且左浮动；

· 一列中的数据块为一组，列中的每块依次排列；

· 更多数据加载时，需要分别插入到不同的列中；

优点：

· 布局简单；

· 不用明确数据块的高度，自适应即可。

缺点：

· 列数固定，嵌套较多

· 滚动加载更多数据时，需要指定插入到第几列中，不方便。

2、CSS3样式定义法

我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。

优点：

· 直接用CSS定义，方便快捷，是最好不过了；

· 扩展方便。

缺点：

· 目前仍有部分浏览器不支持CSS3；

· CSS3这种方式的数据排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列；

3、绝对定位

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；

缺点:

需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；

JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。