CSS小结7

CSS学习7 常见技巧

1 文字的水平居中

    <style type="text/css">
        div
        {
            display:inline-block;
            width:500px;
            height:50px;
            line-height:50px;
            text-align:center;   /*实现div元素内文字水平居中*/
            border:1px dashed gray;
        }
    </style>
</head>
<body>
    <div>CSS实现单行文字水平居中：text-align:center;</div>

2 块元素居中：
   保证margin-left和margin-right都为auto,就可以保证块元素水平居中；如果要是使用margin:0:auto来实现块元素居中，就要
指定这个元素的宽度；

<style type="text/css">
        div
        {
            margin:0 auto;
           width:80%;
            height:100px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div></div>

3 行内元素：
使用text-align:center剧中；
     <style type="text/css">
        div{text-align:center;}
    </style>
</head>
<body>
    <div><strong>strong元素</strong></div>
    <div><span>span元素</span></div>
    <div><a href="http://www.lvyestudy.com">a元素</a></div>

4 INLINE-BLOCK元素的居中，比如图片
    <style type="text/css">
        body{text-align:center;}
        div
        {
            display:inline-block;
            width:100px;
            height:100px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <div></div>

5 垂直居中
   1) 单行文字垂直居中：
    定义line-height和height属性值相等就可以
   <style type="text/css">
        div
        {
            height:100px;
            line-height:100px;
            border:1px solid gray;
        }
</style>
</head>
<body>
<div>《web前端开发精品课》</div>

   2）多行文字
       如果父元素高度固定，文字可能是两行或者多行，则
       <style type="text/css">
        p
        {
            display:table-cell;
            vertical-align:middle;
            width:400px;
            height:120px;
            border:1px dashed gray;
        }
span{display:inline-block;}
</style>
</head>
<body>
<p>
<span>《web前端开发精品课•HTML和CSS基础教程》<br />
《web前端开发精品课•HTML和CSS进阶教程》<br />
《web前端开发精品课•CSS3教程》</span>
</p>

6） CSS SPRITE
    把所有图标放到一张背景图片中去，然后利用backgroud-position属性对背景进行定位，
可以利用css sprite generator在线生成地址：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

猜你喜欢