CSS Tips and Experiences

2. How do I clear a few pixels of blank space below the picture?

   Method 1:

   img{display:block;}

   Method 2:

   img{vertical-align:top;}

   In addition to the top value, it can also be set to Text-top | Middle | Bottom | Text-bottom, even specific <length> and <percentage> values can be

   Method 3:

   #test{font-size:0;line-height:0;}

   #test为img的父元素

4. How do I get text to align vertically with this input box?

   Method:

   input{vertical-align:middle;}

6. How do I let a single line of text center vertically within a container?

   Method:

   #test{height:25px;line-height:25px;}

   Just set the line of text higher than the height of the container

8. How do I make hyperlinks and the colors before and after access retain hover and active effects after access?

   Method:

   a:link{color:#03c;}a:visited{color:#666;}a:hover{color:#f30;}a:active{color:#c30;}

   Set hyperlink styles in L-v-h-a order, shorthand for Love (likes) HAte (annoying)

10. Why can't I set the color of the scroll bar under the standard mode IE?

    Method:

    html{scrollbar-3dlight-color:#999;scrollbar-darkshadow-color:#999;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eee;scrollbar-arrow-color:#000;scrollbar-face-color:#ddd;scrollbar-track-color:#eee;scrollbar-base-color:#ddd;}

    Define the scroll bar color style that you originally set on body to the HTML tag Selector.

12. How do I force a text overflow boundary to be displayed in a row without wrapping?

    Method:

    #test{width:150px;white-space:nowrap;}

    Set the container width and white-space to nowrap, with similar effects <nobr> labels

14. How do I make a text overflow boundary appear as an ellipsis?

    Method (This method Firefox5.0 is not yet supported):

    #test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    You first need to set the text to be displayed on a single line, then truncate the overflow text through Overflow:hidden and display the truncated text as an ellipsis in text-overflow:ellipsis manner.

16. How do I make a continuous long string wrap?

    Method:

    #test{width:150px;word-wrap:break-word;}

    Word-wrap's Break-word value allows word wrapping in words

18. How do I clear floating?

    Method 1:

    #test{clear:both;}

    #test为浮动元素的下一个兄弟元素

    Method 2:

    #test{display:block;zoom:1;overflow:hidden;}

    #test为浮动元素的父元素. Zoom:1 can also be replaced with a fixed width or height

    Method 3:

    #test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:‘‘;}

    #test为浮动元素的父元素

20. How do I define the cursor shape of the mouse pointer to be hand-shaped and compatible with all browsers?

    Method:

    #test{cursor:pointer;}

    If cursor is set to hand, only IE and opera are supported, and hand are non-standard attribute values

22. How do I let a container with a known height center horizontally vertically in the page?

    Method:

    #test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

    Know more: How containers of known height are horizontally vertically centered in the page

24. How do I make a picture of an unknown size vertically centered horizontally within a known wide container?

    Method:

    #test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

    #test是img的祖父节点, p is the parent node of the IMG. Know more: Images of unknown size vertically centered horizontally

26. How do I set the width and height of a span (that is, how to set the width height of an inline element)?

    Method:

    span{display:block;width:200px;height:100px;}

    To enable an inline element to be set to a wide height, simply define it as a block-level or inline block-level element. So the method is very diverse, you can set the Display property, you can set the Float property, or the Position property, and so on.

28. How do I define several different CSS rules for an element?

    Method:

    .a{color:#f00;}.b{background:#eee;}.c{background:#ccc;}<div class="a b">测试1</div><div class="a c">测试2</div>

    Multiple rules are separated by a space, and only class can use more than one rule at a time, and the ID can not

30. How do I make an element fill an entire page?

    Method:

    html,body{height:100%;margin:0;}#test{height:100%;}

32. How do I make an element 10 pixels from the bottom right and left 4 sides of the window?

    Method:

    html,body{height:100%;margin:0;}html{_padding:10px;}#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

34. How do I get rid of a dotted box with hyperlinks?

    Method:

    a{outline:none;}

    IE7 and earlier browsers because the outline attribute is not supported, it needs to be implemented by JS's blur () method, such as <a onfocus= "This.blur ();" ...

36. How is the container transparent and the content opaque?

    Method 1:

     . Outer{width:200px;height:200px;background: #000; Filter:alpha ( OPACITY=20); opacity:.2;}. inner{width:200px;height:200px;margin-top:-200px;} <div class= "outer" ><!--I am transparent container--></div><div class= "inner" > I am opaque content </div>  

    The principle is the container layer and the content layer and level, the container layer to set the transparency, the content layer through the negative margin or position absolute positioning, etc. to cover the container layer

    Method 2:

     . outer{width:200px; Height:200px;background:rgba (0,0,0,.2); background: #000 \9;filter:alpha (opacity=20) \9;}. Outer. inner{position:relative\9;} <div class= "outer" ><div class= "inner" > I am opaque content </div></div>  

    Advanced browser directly using the Rgba color values, ie browser in the definition of transparent containers, while the child nodes relative positioning, but also to achieve the effect

38. How do I get the entire page centered horizontally?

    Method:

    body{text-align:center;}#test2{width:960px;margin:0 auto;text-align:left;}

    Defining the body's Text-align value as center will enable the IE5.5 to be centered

40. Why does the background color of the container not show up? Why is the container not adaptive to content height?

    Method:

    To clear the float, please refer to 9th of this page

    Usually this happens because there is no clear float, so debug should be the first time to think of whether there is no clear floating place

42. How do I do a table with a thin 1-pixel border?

    Method 1:

      #test {border-collapse:collapse;border:1px solid #ddd;} #test th, #test td{border:1px solid #ddd;} <table id= "test" ><tr><th> name </th><td>joy du</td></tr><tr><th > Age </th><td>26</td></tr></table>  

    Method 2:

      #test {border-spacing:1px;background: #ddd;} #test tr{background: #fff;} <table id= "Test" cellspacing= "1" ><tr><th> name </th><td>joy du</td></tr> <tr><th> age </th><td>26</td></tr></table>  

    ie7 and earlier browsers do not support border-spacing properties, but can be overridden by the table's Label property cellspacing.

44. How do I keep page text line spacing always at the tone of n-fold font size?

    Method:

    body{line-height:n;}

    Note, do not give the N-plus units. Know more: How to keep page text line spacing always at the tone of n-fold font size

46. What is the box model difference between standard mode and model quirks mode?

    Method:

    Standard mode: Element width = width + padding + border Weird mode: element width = width

    For related information, see CSS3 Properties box-sizing

47. Several methods and advantages and disadvantages analysis of the word-changing with graphs

    Idea 1: Use negative values from text-indent to move content out of the container

    .test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}<div class="test">以图换字之内容负缩进法</div>

    The advantage of this method is that the structure is simple Not ideal place: 1. The negative indentation value may be different, not easily abstracted into a common style, because of the use of the scene, 2. When the element is linked, the dashed box will become incomplete in non IE, 3. If the element is defined as inline or inline block level, there will be more differences under different browsers

    Idea 2: Use Display:none or Visibility:hidden to hide the content;

    .test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}.test span{visibility:hidden;/* 或者display:none */}<div class="test"><span>以图换字之内容隐藏法</span></div>

    The advantage of this method is that it is highly compatible and easy to abstract into common style, the disadvantage is that the structure is more complex

    Idea 3: Use padding or line-height to extrude content outside the container;

    .test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}<div class="test">以图换字之内容排挤法</div>

    The advantage of this method is that the structure is concise, the disadvantage lies in: 1. The values of padding or line-height may not be the same as in the case of different scenarios, not easily abstracted into common styles; 2. To be compatible with IE5.5 and earlier browsers hack

    Idea 4: Use ultra-small font and text full-transparent method;

    .test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}<div class="test">以图换字之超小字体+文本全透明法</div>

    This method is simple and easy to use, it is recommended

49. Why is only 1 of the 2 adjacent Div's margin effective?

    Method:

    .box1{margin:10px 0;}.box2{margin:20px 0;}<div class="box1">box1</div><div class="box2">box2</div>

    In this example, the bottom margin of the box1 is 10px,box2 with the top margin of 20px, but the interval between 2 on the page is 20px instead of the expected 10+20px=30px, and the result is the largest margin of choice between the 2 of them, We call this mechanism "margin merger"; margin merging is not just between adjacent elements, but also between father and son.

    Simple list of points to note:
    The margin merge appears only on block-level elements;
    Floating elements do not create margin merges with adjacent elements;
    An absolutely positioned element does not create margin merges with adjacent elements;
    No margin merges between inline block-level elements;
    There is no margin merge between the root elements (such as HTML and body);
    Block-level elements that have the property overflow set and whose value is not visible do not merge with the outer margin of its child elements;

51. How do I disable the Chinese input method in a text box?

    Method:

    input,textarea{ime-mode:disabled;}

    Ime-mode is not a standard attribute, only IE and Firefox support when writing this document

53. How to solve the problem that list-style-image in the list can't be accurately located?

    Method:

    Do not use List-style-image to define list item marker symbols, instead using background-image instead, and positioning by background-position
55. How do I fix a pseudo-object: Before and: After the weird performance problem on the Input tab?

    Phenomenon:

    When writing this article, in addition to opera, the input tag uses pseudo-objects in all browsers: Before and: After has no effect, even opera's performance is equally surprising. You can try it. Browser version: Ie6-ie10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
57. How to troubleshoot Pseudo-objects: before and: After cannot define transitions and animations on Chrome,safari,opera?

    Phenomenon:

    When writing this article, in addition to Firefox, under all browsers pseudo objects: Before and: After cannot define transitions and animation effects. Browser version: Ie6-ie10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51. If this transition or animation effect is required, you can consider using real objects.

CSS Tips and Experiences