分享CSS的八个小技巧-css教程-PHP中文网

分享CSS的八个小技巧

零下一度

发布： 2017-05-13 14:15:04

原创

1706人浏览过

css有很多的功能，在这里，小编给大家分享css中的八个小技巧。

1、兼容所有浏览器显示半透明效果的方法

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTrans
for
m.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    
width
: 200px;
    
height
: 200px;
    
margin
: 0 auto;
    
background
: url("../img/pic.jpg");
}

登录后复制

2、_height,_width的作用

使用_height解决float的div不闭合的问题，可以将_height属性去掉就可以达到效果。

<div id="wrap">
    <div class="column_
left
">
        <h1>Float left</h1>
    </div>
    <div class="column_
right
">
        <h1>Float right</h1>
    </div>
</div>
#wrap {
    b
ord
er: 6px solid #ccc;
    
overflow
: auto;
    _height: 1%;
}
.column_left {
    width: 20%;
    
padding
: 10px;
    float: left;
}
.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}

登录后复制

3、使用min-height min-width解决div，或者span的固定高度问题

立即学习“前端免费学习笔记（深入）”；

有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height

4、使用media指令引入两种css：打印版本的css和屏幕显示的css

<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">

登录后复制

5、用.fixTable{ table-layout: fixed; overflow:hidden; }加上nobr标签实现隐藏

6、可以使用page-break-after，page-break-before控制打印时的分页

7、*html{}的作用是为了兼容6.0以下的IE版本，对html节点的选取，其他的浏览器都认为html标签是文档的根节点，而ie6以下的ie版本却认为在html标签的上面还有一个根节点

8、使用text-indent显示图片，而隐藏文字

h1 {    background: url(../img/pic.jpg) no-repeat;    width: 200px;    height: 200px;    text-indent: -2000px}

登录后复制

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

以上就是分享CSS的八个小技巧的详细内容，更多请关注php中文网其它相关文章！