很久没有研究css了,成天用各种框架也基本都不需要自己写,最近要做一个相册页面,碰到的第一个问题就是如何排布。
先给出设计稿,然后再说说样式如何写
分析一下,有一个容器,容器有padding,每一行的每一个item之间又有margin,首先想到的是这样
.container { padding: 10px; } .container .item { float: left; width: 24%; margin-left: 1%; border: 1px solid #CCC; }
然而,这种情况会造成两个问题,首先第一个是第一个item自身的margin-left加上.container的padding会造成左边空白比上下左右都要大,还会造成item与item之间的垂直间距与水平间距不能控制到一样的大小。
于是考虑到使用calc属性
.container { padding: 5px; } .container .item { width: 25%; position: relative; float: left; } /* 这个图片仅仅是为了获取宽高,实际是看不见的 */ .container .item > img { opacity: 0; width: 100%; } /* 这个才是每一个item里容器 .container .item .body { border: 1px solid #CCC; width: calc(100% - 10px); height: calc(100% - 10px); margin: auto; left: 0; top: 0; bottom: 0; right: 0; }
以上代码如果要是用sass来实现的话,更容易了,这种实现方法相当于实际上每一个item占用的大小就是25%,只是里面的body都上下左右都有5px的边距。item与item之间的边距实际上就是每一个item的右间距加上右边item的左边距,每一个item的下边距加上它下方item的上边距。
这种实现方法有几个好处:
1、上下左右都是一样的边距
2、纯样式
3、图片比例不会被破坏