css中的各种常见布局写法

前端做久了越来越感觉css的博大精深,虽然css严格意义上算不上是一门编程语言,比如逻辑控制、循环操作、函数等都严重缺少或不足,尽管目前有了很流行的sass、less等css预处理器以便于编写css,但是实际上css的难处在于它的特性,css的属性毕竟太多了,每种属性还有不同的值,效果也各不相同。也难怪不少精通各种语言的大神看到css就头痛(比如这位

在此总结一下遇到过的常见布局方式

两列布局

1、左侧固定,右侧宽度自适应

(1)通过浮动

https://jsfiddle.net/tgxh/yua2q93b/

(2)通过绝对定位

https://jsfiddle.net/tgxh/w1q7e0c1/

(3)通过BFC规则

https://jsfiddle.net/tgxh/vjqg1z11/

关于BFC规则,可以参考 深入理解BFC和Margin Collapse

(4)使用flex(在移动端使用或者不考虑兼容性的话强烈推荐此方法)

https://jsfiddle.net/tgxh/ramoooLy/

 三列布局

1、左侧固定,中间和右侧各占剩余空间的50%

这个跟两列类似,只是右侧的再分成两列布局

右侧使用浮动

https://jsfiddle.net/tgxh/Lewv6axa/

右侧使用inline-block(如果两个div有换行,中间的空格是一个inline-block元素,也会占据空间,所有如果两个div设置为inline-block且宽度都是50%,那么会超出一行)

办法1:删除两个div的空格 https://jsfiddle.net/tgxh/bt8nv1f2/

办法2:父元素设置font-size为0,子元素另外设置font-size  https://jsfiddle.net/tgxh/gggzs3gw/

办法3:flex https://jsfiddle.net/tgxh/cdjr13jv/

2、左右固定,中间宽度自适应

办法1:通过浮动,左右分别左右浮动,中间设置左右margin,要点在于中间部分要放在底部  https://jsfiddle.net/tgxh/f0j9fsLy/

办法2:通过BFC,也是左右浮动,中间元素放在底部 https://jsfiddle.net/tgxh/bqsj9c4n/

办法3:通过flex,https://jsfiddle.net/tgxh/tuzbrv00/

 

小结一下,flex对于这类布局真是专治各种不服,想几列就几列,想哪一列或哪几列宽度固定也好自适应也好都毫无压力,关于flex的用法可以参见阮一峰老师的教程,相信我,用了之后你会爱上它的。

posted @ 2017-07-09 14:38  tgxh  阅读(473)  评论(0编辑  收藏  举报