Proficient in CSS: Advanced Web Standard Solutions (2nd edition)

proficient in CSS: Advanced Web Standard Solutions (2nd edition)Jump to: Navigation, search

2. Cascade of Importance: (That is,. User!important can overwrite the inline style)
   1. !important, user > author, last browser/user agent
4. The calculation of the rule particularity (order): A,b,c,d assumes the same. Post-defined precedence
   1. Assuming that the inline style,a=1
   2. Number of B=id selectors (#id)
   3. Number of c= classes, pseudo-classes, attribute selectors
   4. d= type, number of pseudo-element selectors
6. = How to manage the order of rules in the case of large site complex content???
8. @import slower than link?
10. P41 (vertical) margin Overlay (=max (upper ' s margin-bottom, down ' s margin-top))
    1. Elements nested include, empty elements will occur overlay
    2. The Block box for the normal document stream only. inline, float, position:absolute not superimposed
12. Inline: Set height, width does not work, line-height
    1. = Inline-block
14. Cannot apply style directly to {anonymous block, text line box}
16. Position:relative: Ability to specify left, top "relative to" original position. Elements still occupy the original space
18. Position:absolute: element does not occupy document flow space (this is equivalent to promoting its z-index?). ）
    1. It is positioned relative to its nearest ancestor element, which shows that the CSS is positioned before the ancestor element. Post-descendant elements? ）
20. Position:fixed: Relative to viewport (generally for user reviews)
22. Position:float: Able to move left and right (out of the document flow) until it touches the include box (containing) or a floating box
    1. Suppose the block is included (containing block?) ) cannot hold all elements horizontally, other float elements will move down
    2. Text elements are affected by float, resulting in an effect similar to word ' text around '
       1. To stop it. Clear float for these lines of text.
       2. You can use an empty element clear:both to make the parent container include floating elements.

          (It is also possible to float containers directly.) But this will affect the next element)

          1. . clearfloat:after {content: "."; height:0; visibility:hidden; display:block; clear:both;}
             1. IE 6-in ' Holly hack '
24. P56 creating bullets with background images
26. P65 round box in CSS 3 is very easy to handle, in the CSS 2.1 era of various tricks skipped
    1. 9 Segmented Border-image:url (user-corner.gif) 25% 25% 25% 25%/25px round round;
28. CSS projection: Box-shadow
30. CSS parallax: background-position:20% 0;
32. Image replacement (CSS 2.1):
    1. FIR: Display:none caused by text is not suitable for screen readers
    2. Phark: Using text-indent:-5000px; Invalid for closing an image but opening CSS
    3. SIFR (Js+flash)
34. P87 CSS 3 agrees: Target pseudo class? (Well, there's no information leakage problem)
36. Outer chain style (common in wikis)
38. P92 text is always centered vertically in the row box (?? ), setting line-height, using height causes the text not to be centered vertically, so you must set additional padding
40. CSS Tooltip: What's the simplest title property?
42. p105 the current page in the navigation bar: use 2 IDs, one of which is applied to the BODY element for a combination match (so that the background of the navigation bar does not require special handling.)

    。

    。 Cool

44. p114 IE older version number is not supported for use on non-anchor elements: hover. Ability to enable this feature with JS or. HTC Behavior files
46. CSS image mapping: Wrap img with a div. Set its size equal to the image and position:relative; Then let the individual Li elements be positioned relative to the div. Use: Hover display border line.

    。

48. p129 long-distance flip: Actually very easy, let the anchor element wrap a div/span/li, and then use absolute positioning to move these include elements to the other position of the page, set the anchor element: hover can.
50. p136 TABLE element Border 2 models: collapse|separate
52. Form elements
    1. FieldSet: Sub-block Header (Group Panel/box)
    2. Label 2 ways to use: nested include input; Use the For property to associate input (ID)
54. p153 ' All CSS layouts are basically 3 basic concepts: positioning, floating, margin manipulation. ’
    1. IE 6-Margin:auto not supported; Fortunately, ie put text-align:center, misunderstood to let the whole thing center, and not just the text (... ）
    2. p159 in a standard-compliant browser, assume that the content of the element is too large. It will only go beyond box. However, IE expands the entire element (.

       。

       。

       -_-）

    3. 3 Column layout: Decomposed into 2 nested two-column layouts???
    4. p164 Flow layout: + min-width!

       haha I think to be able to out an online CSS test system, the topic is accurate to the PX layout, to JS to test the effect is incorrect.

       。。

       Saharan

    5. p166 Flex layout: Layout relative to font size (EM units) (not necessary for browsers that support page scaling)
       1. body{font-size:62.5%;} Sets the width of the container only in units of EM. Internal width still using%
    6. p170 faux column (slightly)
56. Bugs and bug fixes
    1. IE's ' own layout ' (haslayout)
       1. Setting the following properties causes the element to have a layout: float, display:inline-block, width/height, Zoom, WRITING-MODE:TB-RL;

          IE7 added: Overflow, min-width: No matter what value, Max-width: No matter what value except none

       2. For example: IE, this paragraph has a layout. Does not appear around the float element effect
       3. Another example: IE 6-in, the elements with layout will be incorrectly expanded to fit the content size ...
    2. Hack and filters (slightly)
    3. Common bugs on IE 6-:
       1. No matter what the margin of floating element doubles??? Changed to Display:inline;
       2. 3px text Offset
       3. The last few characters of the last element of a series of floating elements are repeated: Delete gaze (.

          。

          。！ ）

       4. *ie6 ' Peek-a-boo ' Bug
       5. * Relative to the absolute position in the container (O, I c,shit):. rel-container{height:1%;}
58. Case study
    1. Roma Italia
       1. Cufon? Displays the HTML in the selected font. No matter what image or @font-face (???? ): The EULA for the selected font must agree to font embedding on the Web
    2. Climb the Mountains
       1. : First-child
       2. Combination Class

Proficient in CSS: Advanced Web Standard Solutions (2nd edition)