使用css实现网格布局

css实现的网格布局，自适应宽度变化，间隙完全相等，每个小格子的宽和高也相等。

实现这样的页面效果所涉及的知识点：

块元素在行内布局时，注意两个div之间的空格。

css实现div宽和高相等的关键是使用padding-bottom这个属性，我们设置为100%，完全撑父div。

div垂直水平居中有很多种方法，这里我采用绝对布局，然后做变换来实现。

css3的盒模型有两种，一种是IE的盒模型：盒子的宽高包含边框，填充和边距，另一种W3C盒子模型：与IE盒模型相反。

html及css代码：

css宽高相等

.menu-cells-wrap {

border: 5px solid green;

padding: 2px;

width: 600px;

box-sizing: content-box;

}

.menu-cell {

width: 25%;

display: inline-block;

position: relative;

box-sizing: border-box;

background: white;

}

.menu-cell> div {

box-sizing: border-box;

position: absolute;

padding: 2px;

width: 100%;

height: 100%;

left: 0;

top: 0;

}

.menu-cell:before {

content: "";

display: inline-block;

padding-bottom: 100%;

width: .1px;

vertical-align: middle;

}

.content-wrap {

position: relative;

width: 100%;

height: 100%;

box-sizing: content-box;

background: orange;

}

.content-wrap:active {

background: lightblue;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！