CSS小结7
CSS学习7常见技巧
1文字的水平居中
<styletype="text/css">
div
{
display:inline-block;
width:500px;
height:50px;
line-height:50px;
text-align:center;/*实现div元素内文字水平居中*/
border:1pxdashedgray;
}
</style>
</head>
<body>
<div>CSS实现单行文字水平居中：text-align:center;</div>
2块元素居中：
保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；
<styletype="text/css">
div
{
margin:0auto;
width:80%;
height:100px;
border:1pxsolidgray;
}
</style>
</head>
<body>
<div></div>
3行内元素：
使用text-align:center剧中；
<styletype="text/css">
div{text-align:center;}
</style>
</head>
<body>
<div><strong>strong元素</strong></div>
<div><span>span元素</span></div>
<div><ahref="http://www.lvyestudy.com">a元素</a></div>
4INLINE-BLOCK元素的居中，比如图片
<styletype="text/css">
body{text-align:center;}
div
{
display:inline-block;
width:100px;
height:100px;
border:1pxsolidgray;
}
</style>
</head>
<body>
<div></div>
5垂直居中
1)单行文字垂直居中：
定义line-height和height属性值相等就可以
<styletype="text/css">
div
{
height:100px;
line-height:100px;
border:1pxsolidgray;
}
</style>
</head>
<body>
<div>《web前端开发精品课》</div>
2）多行文字
如果父元素高度固定，文字可能是两行或者多行，则
<styletype="text/css">
p
{
display:table-cell;
vertical-align:middle;
width:400px;
height:120px;
border:1pxdashedgray;
}
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>《web前端开发精品课•HTML和CSS基础教程》<br/>
《web前端开发精品课•HTML和CSS进阶教程》<br/>
《web前端开发精品课•CSS3教程》</span>
</p>
6）CSSSPRITE
把所有图标放到一张背景图片中去，然后利用backgroud-position属性对背景进行定位，
可以利用cssspritegenerator在线生成地址：css.spritegen.com
原理：
{
background:url(images/sprite.png)no-repeat;
height:30px;
padding-left:30px;
}
.chrome{background-position:-0px-0px;}
.firefox{background-position:-0px-30px;}
.ie{background-position:-0px-60px;}
.opera{background-position:-0px-90px;}
.safari{background-position:-0px-120px;}
</style>
7）iconfont网站：用字体文件代替图片文件，实现小图标效果：
国内的www.iconfont.cn国外的icomoon.io