Common css skills [continuously updated]_html/css_WEB-ITnose

1. Horizontal scroll bar removal
demo:

Code analysis:
Vertically displayed normally, horizontal overflow hidden.

2. About background tiling (100% display)
demo:
.outer {width:100%;background:url() no-repeat center top;}
. core {width:1000px; margin:auto;}
Code analysis:
Double-layer div nesting, the outer div sets the width to 100%, no-repeat background does not repeat, the scaling base point of the center background image is in the middle , the top is displayed from top to bottom; the inner div is set to a fixed width, and the margin is automatically [displayed in the center].

3. Position and z-index
demo: The
layer is covered and cannot be displayed normally.
Problem analysis:
Set the position and z-index of the div. Details: POSITION and Z-INDEX

4. Remove the dotted border of the hyperlink
deme:
After clicking the hyperlink, a dotted border
appears Code analysis:
IE browser: a {blr:expression(this.onFocus=this.blur());}
FF browser: a {outline: none;} or narrow the range: a:focus { outline: none; } Note: The latter makes the mouse Press the left button on the link and during the period before releasing it, the dotted outline will still be displayed.

5. Add to favorites (concise code)
demo:
Upper right corner: Add Collection
Code analysis:
Add to favorites

6. The div uses float to overflow fatherdiv
demo:
Fdiv does not set the height, the div uses float, and the content overflows.
Solution:
Add Bdiv and apply clear: both to clear float or set height to Fdiv.

7. CSS abbreviation rules
① Abbreviation of color
demo:
#ff00ee->#f0e Simple abbreviation Note: #f0f0fe->#f0f0fe cannot be abbreviated
②, the abbreviation of the unit
The value is 0, you don’t need to write the unit
demo:
margin: 0px->margin: 0
③, the abbreviation of margin and padding
Describe the rules , clockwise up, right, bottom left
demo:
margin-left: 15px; margin-right: 20px; margin-top: 30px; margin-buttom: 10px; -->
margin: 30px 20px 10px 15px; top=30px, right=20px, bottom=10px, left=15px;
margin: 30px; top=right=bottom=left=30px;
margin: 30px 20px; top=bottom=30px; Left = right = 20px;
margin: 30px 10px 15px; top = 30px; bottom = 10px; left = right = 15px;
Note: top, right, bottom, left and clockwise are not only applicable here
④, Abbreviation of border
Rules: border: border-width border-style border-color
demo:
div {border-width: 1px; border-style: solid; border-color: #f00;}/ *Border width, border style, border color*/
->div {border: 1px solid #f00;}
Border-top, border-right, border-buttom, border-left cannot be abbreviated, but they can:
div{ border-width: 1px; /* The border width in all four directions of the border is 1px*/
border-style: solid dashed double; /* Upper border: solid; Lower border: dashed; Left and right borders: double; */
border-color: #f00 #000; /*Top and bottom border colors: #f00; Left and right border colors: #00*/
}