CSS Tips Summary

Relative offsets specify properties such as left top to perfectly control the position of an element

Such as:

position:relative; left:2px;

Today, there is a very interesting question, when the two-side floating box, when the length of a box is too large, it will be the other box to the next line, this time can be used margin-right:-2px; Set the right margin to a negative number to solve!

The CSS write expression controls the size of the picture, forcing its width height to the specified size when the picture size is larger than a certain value.

img {max-width:163px; width:expression (This.width > 163?) "163px": this.width); Height:expression (This.width > 163?) "163px": this.width); }

CSS <li> horizontal display, and specifies the width of the method. When the direct use of Display:inline,<li> is horizontal, but can not specify the width of <li>, so that the background image in the <li> can not control the background image of the deviation position. At this time can use Display:block; Float:left; This <li> is still horizontal display, but also can specify the width, can arbitrarily control the position of the background image.

How the elements of <li> align vertically

First set the height of Li height:25px, if you do not set line-height, he will align top, the best way is to set the height of line-height and Li's height consistent, so that the text in the alignment is Vertical center alignment. Because the text is vertically aligned within the height range of the line-height. In the cutting PSD picture, although the cut is required to be transparent, but in the process of cutting, appropriate background display, can clearly see the shadow of the picture, translucent position, cut to more accurate. CSS Selector priority sort write in front > write in the back > inline style >id selector >class selector >dom Selector

/* The intersection selector is only valid for elements of P and class PP1 */
p.pp1{Color:white;}

/* Set selector All selected elements are valid */
. p1,. span1{background-color:black; color:white;}

/* Direct descendant selector, separating this space with spaces as separators affects all descendant elements only */
P b{font-weight:700;}
/* greater than, affects only immediate descendant elements */
p>b{font-weight:700; background-color:maroon;}

The actual width of a box is comprised of the content + padding + margin + border. Note that the border is also to occupy the width.

Border none and hidden do not display a border, the effect is the same, but when applied to the table, hidden can resolve the conflict.

When a box is set with a background image, the background image covers a range of padding and content (ie, Firefox is padding + content _ Border) and tiles the image with the upper-left corner of the padding as the datum point.

Block-level elements (blocks) occupy a single line, regardless of the content. such as: <ul li> <div>

Inline elements occupy only the length of the content, and are automatically displayed on the same line when the contents of multiple elements are not in line. such as:<span><a>

The horizontal margin between the elements in the row is the left margin + right margin (the margin-left of the left element + the margin-right of the right element).

The vertical margin between block-level elements is the larger of the two (the margin-bottom above and the larger of the margin-top below).

The distance between nested boxes is the padding of the margin+ parent element of the child element

Attached: HTML block-level elements and inline elements

Block element HTML tag classification details

* Address-addresses
* BLOCKQUOTE-Block reference
* Center-align Block
* DIR-List of directories
* Div-Common block-level easy, is also the main tag of CSS layout
* DL-Definition List
* Fieldset-form control Group
* Form-interactive form (can only be used to accommodate other block elements)
* H1-Big title
* H2-Subtitle
* H3-3 level Title
* H4-4 level Title
* H5-5 level Title
* H6-6 level Title
* HR-Horizontal divider Line
* Isindex-input Prompt
* menu-List of menus
* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content
* NoScript-Optional script content (this content is displayed for browsers that do not support script)
* Ol-Sort Form
* P-Paragraph
* Pre-formatted text
* Table-form
* ul-Non-sorted list

Inline elements (inline Element) HTML tag Classification details

* A-Anchor point
* ABBR-abbreviation
* Acronym-First word
* B-Bold (not recommended)
* Bdo-bidi Override
* Big-Large font
* BR-line break
* Cite-citation
* Code-computer code (required when referencing the source)
* DFN-Define Fields
* EM-emphasis
* Font-typeface settings (not recommended)
* I-Italic
* img-Images
* Input-Enter box
* KBD-Define keyboard text
* Label-table label
* Q-Short reference
* S-Medium dash (not recommended)
* Samp-Define sample computer code
* Select-Project selection
* Small-Small font text
* span-a common inline container that defines chunks within a text
* Strike-Medium dash
* Strong-Bold Emphasis
* Sub-subscript
* SUP-Superscript
* TEXTAREA-multi-line text input box
* TT-Telex text
* U-Underline
* var-Define Variables

Variable element HTML tag classification details

* Applet-java Applet
* Button-Buttons
* Del-delete text
* Iframe-inline Frame
* INS-Inserted text
* Map-image block (map)
* Object-object Object
* Script-client-side scripting

Float:inherit; Inherit the float property from the parent element;

Clear:left/right; Eliminate the effect of left/right floating box on this box. Clear:both; Clear the effect of floating on both sides of the box.

Absolute positioning Position:absolute; Having no effect on the other boxes is equivalent to extracting them from the HTML code and covering them. The setting for its location is when it has a positional property parent element (with the Position property, and the Position property is not static), with its parent property being the positioning datum and, if not, the browser as the anchor. When two block-level elements are set to the Abosolute property, the value of the Z-index property can be set to determine which element displays I above, with a large value displayed above.

!important raise the priority so that the statement is not overwritten by subsequent statements.

IE6 can recognize *, but not!important,
IE7 can recognize *, can also identify!important;
FF does not recognize *, but can identify!important;
In addition, add one, underline "_",
IE6 support underscores, IE7 and Firefox do not support underscores.

1em indicates the letter M standard width of its parent element.  1EX indicates the standard height of the letter x. Note that it is compared to the parent element.

Font-size:4em; line-height:1.5;   Float:left; Such a setting can make the first letter, which takes up three lines to display.

Text-indent:2em; You can set the size character position of the parent element to the first stroke speeds. 2.

Verticla-align vertical alignment is generally only valid in vertical direction. If the text is placed in a div, it will not be effective. If you have only one line of text, you can align the center as long as you set Line-height to height.

Tip 1 The background color is set to the bottom color of the gradient background image, so you can achieve a harmonious effect for the entire page, no matter how long.

The smaller the bits of a PNG image, the smaller the file size. However, 8-bit and 24-bit in IE6 does not support transparency.

By setting the Display:block of a, you can move the mouse into the block and change the hand shape instead of moving to the text.

In order to prevent the mouse pointer from passing through the border of the beating, you can normally add to the background color of the same border, when moving to color.