CSS usage learning summary_Experience exchange

Use classes as little as possible because they can be cascaded and recognized, such as: .News h3 without adding classes to h3

3. Use div

when there is no existing element to distinguish it.

• Home


• About Us

Can be changed to

• Home


• About Us

4. Selector
p a h1 type selector
Li a {text-decoration:none} Descendant selector
*{ padding:0;} Universal selector, all elements on the page.
5. Positioning
Relative positioning is relative to the position where it should appear
Absolute positioning is relative to the nearest positioned ancestor element (experiments found that ancestor elements need to be set to relative positioning)
Floating The box can move left and right until its edge touches the containing box or the edge of another containing box. Because the floated box is not in the normal flow of the document, a box in the normal flow of the document behaves as if the floated box does not exist.
Summary: If a div is floated, the next div will be treated as if the first one does not exist. Know when floating or containing boxes are encountered.
Clear: right The right side of the floating box is available
Clear: left The left side of the floating box is available
Clear: both Both sides of the floating box are not available
Applying the overflow attribute with a value of hidden or auto will automatically clean up Any floating elements contained.
6. Gradient background
Create a very tall but narrow gradient image, tiled horizontally
Body
{
Background: #ccc url (gradient.gif) repeat-x; }
But it is difficult to predict how high the image page will be, so you can combine it with the background color. When the image ends, the color will come out. If the color difference between the two is very close, the conversion will not be visible.
Example: Add an icon to each title
H1
{
Padding-left:30px;
Background: url(/images/bullet.gif) no-repeat left center;
}
7. Highlight different types of links
For example: links to external sites, emails, downloads, etc.
.external
{
Background: url (/images/externalLink. gif) no-repeat right top;
Padding-right:10px;
}
8. Table-specific elements
1) Summary and Caption
Summary attributes can be applied to table labels, Describe the content of the table
Caption The title of the table
2) thead tbody tfoot
I.e You can put all column headers in thead element. If you choose to use thead or tfoot element, you must use at least one tbody element. A table can only use one thead and tfoot, but can use multiple tbodies.
9. Border model of the table
1) Individual model: Each cell has a border around it
2) Overlay model: Cell Grid shared border
10. Form layout
Fieldset turns off the border. Lower versions do not support it, but you can use
Filedset
{
Border: solid 0 transparent;
}
11 . Form label label
Implicit mode: email
Display mode:
email

The use of paragraphs in forms is controversial.
12. Let the design play a part
Method 1:

#wrapper
{
Width:720px;
Margin:0 auto;
}
But this method is not normal in IE6 and below
Method Two (need to be combined based on two elements): Use automatic blank
Body
{
Text-align:center;
Min-width: 760;
}
#wrapper {
Width:720px;
Margin: 0 auto;
Text-align: left;
}
Method 3: Use positioning and negative white space to change
#wrapper {
Width:720px;
Position: relative;
Left: 50%;
Margin-left: -360;
}
13: Fluid layout: use all sizes Percent rather than pixel setting
Advantages: Width changes with browser size.
Disadvantages: As it gets smaller, the rows get narrower.
Solution: Set min-width in pixels and ems
14: Flexible layout: When the font size changes, the rows change (unit is em)
Flexible layout sets the width of the element relative to the font size.
1em=10px;
The default font size of most browsers is 16px, 10 is equivalent to 62.5% of 16 pixels.
Body
{
Font-size:62.5%;
} #wrapper
{
Width:72em;
Margin:0 auto;
Text-align: left;
}
#mainNav
{
Width: 18em;
Float:right;
}
15. Elastic fluid layout: set the width in em and set the maximum width in percentage.
#wrapper
{
Width:72em;
Max-width: 100%;
Margin:0 auto;
Text-align: left;
}
16: Fluid and elastic images
Image deformation problem: Try to put it in the background
17. Asterisk HTML trick
* html a:hover
{
Body-style: solid
}
Only useful in IE6 or below
18: !import and underline tricks
#nav
{
Position: fixed !important;
Position : static;
}
or
#nav
{
Position: fixed;
_Position : static;
}
19, when there are several columns

Nav needs to distinguish colors and display height 100%. You can make a picture with a width equal to Nav. Set a background image on the main and tile it in the vertical direction.