CSS Use experience Summary

2. Clear a few pixels of white 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. Make text vertical align the input box

   Method:

   input{vertical-align:middle;}

6. To center a single line of text vertically inside a container

   Method:

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

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

8. Hover and active effects are retained after hyperlinks have been accessed and before they are accessed

   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. Make text overflow bounds non-wrapping force display within a line

    Method:

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

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

14. Make text overflow bounds appear as ellipses

    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. Make continuous long string wrap

    Method:

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

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

18. 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. Defines 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. To center a container of known height 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. Allows images of unknown dimensions to be horizontally vertically centered within a known wide-height 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. Set the width and height of the span (that is, how to set the width height of the 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. Define multiple 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. Let an element fill the entire page

    Method:

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

32. 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. Remove the dotted box of a hyperlink

    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. transparent container, opaque content

    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. To center the entire page 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:

    Clear floating

    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. make 1 pixel fine border table

    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. 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. Disable the Chinese input method in the 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. Solve the problem that list-style-image can't be accurately located in the list

    Method:

    Do not use List-style-image to define list item marker symbols, instead using background-image instead, and positioning by background-position
55. Set the iframe background transparency under IE

    Method:

    Set the Tag property of the IFRAME element allowtransparency= "Allowtransparency" and set the body background color of the internal page of the IFRAME to transparent. However, this will cause some other problems under IE, such as: Set the transparent IFRAME will not cover the Select
57. Troubleshoot page flicker when Chrome is applying transition

    Method:

    -webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

    Under Chrome, a page flicker sometimes occurs when you use the transition effect transition

CSS Use experience Summary