九宫格布局
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin:0;
padding:0;
}
.container {
width:170px;
height:170px;
margin-left:auto;
margin-top:auto;
}
.box {
margin-left:5px;
margin-top:5px; //为之后每个格子都要向左向上移动5px做准备，以免第一列和第一行超出范围
}
.box:after { //清除浮动
content:'.';
display:block;
height:0;
width:0;
visibility:hidden;
overflow:hidden;
clear:both:
}
.box a, .box a:visited {
float:left;
display:inline;
width:50px;
height:50px;
text-align:center;
line-height:50px; //垂直水平居中
border:5px solid #ccc;
z-index:1; //这一步很关键
position:relative; //保证z-index起作用
margin-left:-5px;
margin-top:-5px;
}
.box a:hover {
border-color:#f00;
z-index:2; //如果不设置这一步，则只会显示一半，另一半被旁边格子的border掩盖了
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a href="#" title="1">1</a>
<a href="#" title="2">2</a>
<a href="#" title="3">3</a>
<a href="#" title="4">4</a>
<a href="#" title="5">5</a>
<a href="#" title="6">6</a>
<a href="#" title="7">7</a>
<a href="#" title="8">8</a>
<a href="#" title="9">9</a>
</div>
</div>
</body>
CSS清除浮动
方法一：添加空元素，clear:both
<div>1</div>
<div>2</div>
<div class="clear"></div>
.clear{clear:both;height:0;line-height:0;}
方法二：父级定义overflow:hidden;
<div class="outer">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.outer {overflow:auto/hidden;zoom:1}
方法三：父级元素:after
.outer:after{
clear:both;
content:'.';
display:block;
width:0;
height:0;
visibility:hidden; //允许浏览器渲染，但不显示
overflow:hidden;
}
CSS垂直水平居中
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
方法一：表格显示方式
#wrapper {
display:table;
}
#cell {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.content {
display:inline-block;
}
方法二：文本水平垂直居中
.content{
height:200px;
line-height:200px;
text-align:center;
} //只适合单行文字的水平垂直居中
方法三：盒模型的水平垂直居中
padding填充
<div class="wrapper">
<div class="content"></div>
</div>
.wrap {
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:400px;
height:400px;
background-color:#ccc;
}
.content{
width:100px;
height:100px;
padding:(400-100) / 2; //平分padding
background-color:#333;
background-clip:content-box;
}
margin填充
.content{
margin-left:auto;
margin-right:auto;//实现了水平居中
margin-top:(400-100)/2;//平分margin
}
方法四：left:50%;top:50%
.wrap{
width:400px;
height:400px;
position:relative;
}
.content{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
.content {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
<div class="wrap">
<div class="content-relative">
<div class="content-inner"></div>
</div>
</div>
.wrap {
width:400px;
height:400px;
position:relative;
}
.content-relative {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
background-color:transparent;
}
.content-inner {
width:100%;
height:100%;
position:relative; //避免继承absolute
left:-50%;
top:-50%;
}
方法五：text-align:center+absolute
<div class="wrap">
<div class="content"></div>
</div>
.wrap{
text-align:center;//由于content的display:inline-block,所以起作用，相当于content设置left:50%;
width:400px;
height:400px;
}
.content{
position:absolute;
display:inline-block;
width:200px;
height:200px;
margin-left:-(100px/2);
margin-top:(400px-100px)/2;
}
.wrap{
position:relative;
width:400px;
height:400px;
}
.content{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:200px;
height:200px;
}
