css比较经典的例子

九宫格布局

<!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;
}

css比较经典的例子

九宫格布局

CSS清除浮动

方法一：添加空元素，clear:both

方法二：父级定义overflow:hidden;

方法三：父级元素:after

CSS垂直水平居中

方法一：表格显示方式

方法二：文本水平垂直居中

方法三：盒模型的水平垂直居中

padding填充

margin填充

方法四：left:50%;top:50%

方法五：text-align:center+absolute

bottle_

引用和评论

PPT 字体嵌入

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

CSS炫酷光晕按钮特效