龙空技术网

css实现网格布局

bug创造者 282

前言:

眼前兄弟们对“栅格布局css”都比较关切,小伙伴们都想要剖析一些“栅格布局css”的相关资讯。那么小编在网上收集了一些对于“栅格布局css””的相关内容,希望小伙伴们能喜欢,大家一起来学习一下吧!

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

css实现的网格布局

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

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

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

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

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

html及css代码

html及css代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css宽高相等</title>

<style>

.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%);

}

</style>

</head>

<body>

<div class="menu-cells-wrap">

<div class="menu-cell">

<div><div class="content-wrap">

<div class="content">查询房间</div>

</div></div>

</div><!-- 去掉两个div之间的空格

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">好友房间</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">房间信息</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">求和</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">认输</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">聊天</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">游戏规则</div>

</div></div>

</div><!--

--><div class="menu-cell">

<div><div class="content-wrap">

<div class="content">登录</div>

</div></div>

</div>

</div>

</body>

</html>

最后欢迎大家积极评论,欢迎吐槽。

标签: #栅格布局css