css3设计模式，常用布局

html-css07

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

<style type="text/css">

.demo1{width:600pxoverflow:hidden}

.demo1 li{width:100pxheight:100pxfloat:left}

.demo1 li img{width:100pxheight:100px}

</style>

<ul class="demo1">

  <li><img src="xx.jpg" /></li>

  <li><img src="xx.jpg" /></li>

  <li><img src="xx.jpg" /></li>

</ul>

上面就是流式布局，其实就是浮动，希望帮助到你