CSS experience and css experience

CSS experience and css experience

1. Clear the gap between pixels below the image

   Method 1:

   img{display:block;}

   Method 2:

   img{vertical-align:top;}

   In addition to the top value, you can also set it to text-top | middle | bottom | text-bottom, or even specific <length> and <percentage> values.

   Method 3:

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

   # Test is the parent element of img.

2. Align text vertically with text input boxes

   Method:

   input{vertical-align:middle;}

3. Vertically center a single line of text in the container

   Method:

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

   You only need to set the line height of the text to the height of the container.

4. The hover and active effects are retained after the hyperlink is accessed in different colors than before the hyperlink is accessed.

   Method:

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

   Set the hyperlink style in the order of L-V-H-A, shorthand for LoVe (like) HAte (HAte)

5. Why cannot I set the color of the scroll bar for IE in Standard mode?

   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 Color Style of the scroll bar originally set on the body to the html Tag selector.

6. Enable text overflow without line breaks to be forcibly displayed in one line

   Method:

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

   Set the container width and white-space to nowrap. The effect is similar to that of the <nobr> label.

7. Display the text Overflow Boundary as a ellipsis

   Method (this method is not supported by Firefox5.0 ):

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

   First, you need to set the text to be forcibly displayed in one line, then truncate the overflow text through overflow: hidden, and display the truncated text as a ellipsis in text-overflow: ellipsis mode.

8. Enable Automatic line feed for consecutive long strings

   Method:

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

   The break-word value of word-wrap allows line breaks in words.

9. Clear floating

   Method 1:

   #test{clear:both;}

   # Test is the next sibling element of the floating element.

   Method 2:

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

   # Test is the parent element of the floating element. 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 is the parent element of a floating element.

10. The cursor that defines the mouse pointer is hand-shaped and compatible with all browsers

    Method:

    #test{cursor:pointer;}

    If you set cursor to hand, only IE and Opera are supported, and hand is a non-standard attribute value.

11. Align containers with known heights horizontally and vertically on the page

    Method:

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

    Know More: Know How containers of the height are horizontally and vertically centered on the page

12. Align images of unknown sizes horizontally and vertically in a container of known width and height

    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 is the grandfather node of img, and p is the parent node of img. Know More: how to align images of unknown sizes horizontally and vertically

13. Set the width and height of a span (that is, how to set the width and height of an inline element)

    Method:

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

    To enable inline elements to be set in width and height, you only need to define them as block-level or Inline block-level elements. Therefore, there are many methods, including setting the display attribute, float attribute, or position attribute.

14. Define multiple css rules for an element

    Method:

    . A {color: # f00 ;}. B {background: # eee ;}. c {background: # ccc ;}< div class = "a B"> Test 1 </div> <div class = "a c"> Test 2 </div>

    Multiple rules are separated by spaces, and only the class can use multiple rules at the same time.

15. Fill an element with the whole page

    Method:

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

16. Allows an element to be 10 pixels away from the top, bottom, and left 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%;}

17. Remove the dashed line of a hyperlink

    Method:

    a{outline:none;}

    IE7 and earlier browsers do not support the outline attribute and need to be implemented by using the js blur () method, as shown in <a onfocus = "this. blur ();"...

18. Container transparency and content opacity

    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 a transparent container --> </div> <div class = "inner"> I am an opaque content </div>

    The principle is to combine the container layer with the content layer. The Container layer sets transparency. The content layer overwrites the container layer by negative margin or position absolute positioning.

    Method 2:

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

    The advanced browser uses the rgba color value directly. While defining the container transparency, the IE Browser allows the sub-nodes to be relatively located and achieve the effect.

19. Align the entire page horizontally

    Method:

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

    Defining the text-align value of the body as the center will enable IE5.5 to be centered.

20. Why is the background color of the container not displayed? Why cannot containers adapt to the content height?

    Method:

    Clear floating

    This is usually caused by the absence of floating clearance, so Debug should first consider whether there is a place not to clear floating

21. Create a table with a 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> <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 the border-spacing attribute, but can be replaced by the cellspacing attribute of table.

22. Keep the page text line spacing n times the font size

    Method:

    body{line-height:n;}

    Note: Do not add units to n. Know More: how to keep the page text line spacing n times the font size

23. What are the differences between the Standard mode and Quirks mode in the Standard mode?

    Method:

    In standard mode: Element width = width + padding + border in weird mode: Element width = width

    For more information, see CSS3 attribute box-sizing.

24. Analysis on the advantages and disadvantages of image changing

    Idea 1: Use the negative value of text-indent to remove the content from the container

    . Test1 {width: 200px; height: 50px; text-indent:-9999px; background: # eee url (*. png) no-repeat;} <div class = "test"> negative indentation of the content in an image for changing words </div>

    This method has the following advantages: 1. due to different use cases, the values of negative indentation may be different and cannot be abstracted into public styles. 2. when this element is a link, the dashed line boxes in non-IE will become incomplete; 3. if this element is defined as an inline or Inline block level, there will be many differences in 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;/* or display: none */} <div class = "test"> <span> text hiding in an image </span> </div>

    This method has strong compatibility and is easy to abstract into public styles. Its disadvantage is that the structure is complex.

    Idea 3: Use padding or line-height to squeeze content out of 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"> content exclusion method for text exchange </div>

    This method has the following advantages: 1. due to different use cases, the values of padding or line-height may be different and cannot be abstracted as public styles; 2. hack is required to be compatible with IE5.5 and earlier browsers.

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

    . Test {overflow: hidden; width: 200px; height: 50px; font-size: 0; line-height: 0; color: rgba (0, 0, 0); background: # eee url (*. png) no-repeat;} <div class = "test"> use the text to change the font size and text transparency method </div>

    This method is easy to use and is recommended for use.

25. Why is only one margin of two adjacent div 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 box1 is 10px, and the top margin of box2 is 20px, but the interval between two persons on the page is 20px, instead of the expected 10 + 20px = 30px, the result is to select the largest margin between two. We call this mechanism "outer margin merge". The outer margin merge not only appears between adjacent elements, but also between parent and child.

    A few notes are as follows:
    The outer margins are merged only on block-level elements;
    Floating elements do not merge with adjacent elements;
    Absolute positioning elements are not merged with adjacent elements;
    Inline block-level elements do not produce margin merge;
    The root element does not produce a combination of outer margins (such as between html and body );
    A block-level element with an Attribute overflow set and a value not visible will not be merged with its child elements with the outer margin;

26. Disable the Chinese Input Method in the text box

    Method:

    input,textarea{ime-mode:disabled;}

    Ime-mode is a non-standard attribute. This document is only supported by IE and Firefox.

27. Solve the problem that list-style-image cannot be accurately located in the list.

    Method:

    Instead of using list-style-image to define the list project tag, use background-image instead and use background-position to locate items.
28. Set iframe background transparency in IE

    Method:

    Set the label attribute allowtransparency = "allowtransparency" of the iframe element, and set the body background color of the iframe internal page to transparent. However, this will cause some other issues in IE, such as: the iframe after transparent settings cannot cover the select
29. Solve the Problem of page flashing during Chrome's application transition

    Method:

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

    In Chrome, the page sometimes flashes when the transition effect is transition.

Hope to give div + css layout experience

Give you some important suggestions
1. When using Dreamweaver layout, the preview mode can only be used for some reference or no reference, and is ultimately based on Browser display, because the Dreamweaver Preview mode has poor error correction capability, or the compatibility is poor.

2. Try to remember the names of various style codes. Because Dreamweaver has the code prompt function, you do not need to remember all the characters, but at least you have to remember the approximate spelling of the Code or the first letter, this can help you find styles effectively. This suggestion is more suitable for beginners. Remember that the code can make your layout faster and more effective.

3. Take a look at other people's Finished pages to help you learn quickly. However, when you are familiar with them, it is not so obvious that you want to make progress and see other people's results. It is best to do more on your own, then I encountered a problem to solve the problem. The process of solving the problem is the process of learning. I often help people solve css problems in Baidu, and I often encounter some problems I did not encounter, this will allow me to learn something to solve this problem. In addition, I will teach you a way to view others' page styles more quickly, that is, firefoxfirefox has a firebug plug-in, press the shortcut key F12 to view the page layout and css style of the page you see. The 360 browser can also use

4. It is best to buy a professional basic tutorial on div + css layout, because what we have learned on the internet is messy and the basics of reading books are solid, although it may take a little longer, it will be good for future development.

How to Apply DIV + css at work

Mainly handwriting, supplemented by DW assistance.
First of all, you need to learn about HTML first and know what attributes and what functions,
When I was studying it, I took a look at other people's CSS to find out which attributes are useful, and then I made a copy of the page. No matter what the specifications are, this is to make a general impression on some common CSS attributes.
With a general impression, we have to look at the well-written websites and how others write standards. In addition, the compatibility of various browsers should be taken into account.
Recommended software: IETEST also downloads a Firefox browser. Some Components in it are helpful for learning CSS.
"Web developer" component.

Reading the tutorial is slow. You can simply remember it and make a few more pages.