CSS skills


1. Compatible with all browsers to display semitransparent effects

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTransform.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,_widthThe role of

Use_heightSolvefloatThedivThe problem of not closing can be_heightAttribute removal can achieve the effect.

<div id="wrap">
    <div class="column_left">
        <h1>Float left</h1>
    <div class="column_right">
        <h1>Float right</h1>
#wrap {
    border: 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. Usemin-height min-widthSolvediv, orspanThe fixed height of the problem

Sometimes we need to set a fixed height for an element, but infirefoxOr ..operaOnly the height is set below. When there is not enough content, the expected effect cannot be achieved. We can use it at this time.min-height

4. UsemediaTwo kinds of instructions are introducedcss: printed version ofcssAnd on-screen displaycss

<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. Use.fixTable{ table-layout: fixed; overflow:hidden; }AddnobrTag Hides

6, can usepage-break-after,page-break-beforeControls paging when printing

7、*html{}The role of is to be compatible with IE versions below 6.0, righthtmlThe selection of nodes is considered by other browsers.htmlThe tag is the root node of the document, while ie versions below ie6 are considered to be inhtmlThere is also a root node above the label.

8. Usetext-indentShow pictures and hide text

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