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
,_width
The role of
Use_height
Solvefloat
Thediv
The problem of not closing can be_height
Attribute removal can achieve the effect.
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
#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-width
Solvediv
, orspan
The fixed height of the problem
Sometimes we need to set a fixed height for an element, but infirefox
Or ..opera
Only 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. Usemedia
Two kinds of instructions are introducedcss
: printed version ofcss
And 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; }
Addnobr
Tag Hides
6, can usepage-break-after
,page-break-before
Controls paging when printing
7、*html{}
The role of is to be compatible with IE versions below 6.0, righthtml
The selection of nodes is considered by other browsers.html
The tag is the root node of the document, while ie versions below ie6 are considered to be inhtml
There is also a root node above the label.
8. Usetext-indent
Show pictures and hide text
h1 {
background: url(../img/pic.jpg) no-repeat;
width: 200px;
height: 200px;
text-indent: -2000px
}