Mastering CSS: Advanced Web Standards Solutions (2nd Edition)_html/css_WEB-ITnose

Mastering CSS: Advanced Web Standards Solutions (2nd Edition)

Jump to: Navigation, Search

1. Cascading importance: (that is, user !important can override inline style)
   1. !important, user>author, and finally browser/user agent
2. Calculation of rule specificity (order): a, b, c, d If they are the same, the one defined later takes precedence
   1. If it is inline style, a =1
   2. b=number of ID selectors (#id)
   3. c=number of class, pseudo-class, attribute selectors
   4. d=type, pseudo- Number of element selectors
3. => How to manage the order of rules in a large website with complex content? ? ?
4. @import is slower than link?
5. p41 (vertical) margin overlay (=max(upper's margin-bottom, down's margin-top))
   1. Elements nested and included, and empty elements will be overlaid
   2. only for the block box of ordinary document flow, inline, float, position:absolute will not overlap
6. inline: setting the height and width has no effect, line-height
   1. = > inline-block
7. Cannot directly apply styles to {anonymous block, text line box}
8. position: relative: you can specify left and top "relative to" the original Position, the element still occupies the original space
9. position:absolute: The element does not occupy the document flow space (this is equivalent to raising its z-index?)
   1. Positioned relative to its nearest ancestor element (It can be seen from this that CSS positions ancestor elements first and descendant elements later?)
10. position:fixed: relative to viewport (generally used for user comments)
11. position:float: can be moved left and right (out of the document flow), until it hits the containing box or another floating box
    1. If the containing block (containing block?) cannot be horizontal Accommodating all elements, other float elements will move down
    2. Text elements will be affected by float, causing an effect similar to WORD's 'text wrapping'
       1. To prevent this, clear these text lines float.
       2. You can use an empty element clear:both to make the parent container contain floating elements. (You can also use the float container directly, but this will affect the next element)
          1. .clearFloat:after { content: "."; height:0; visibility:hidden; display:block; clear:both; }
             1. 'Holly hack' in IE 6-
12. p56 created using background image Bullets
13. p65 The rounded corner box is easy to handle in CSS 3. Skip the various tricks in the CSS 2.1 era
    1. 9-segmented border-image: url(user-corner. gif) 25% 25% 25% 25% / 25px round round;
14. CSS shadow: box-shadow
15. CSS parallax: background-position: 20% 0;
16. Image replacement (CSS 2.1):
    1. FIR: display:none of text causing unsuitability for screen readers
    2. Phark: use text-indent:-5000px; for The case of turning off the image but turning on CSS is invalid
    3. sIFR (JS Flash)
17. p87 CSS 3 allows: target pseudo-class? (Well, there is no problem of information leakage in this way)
18. External link style (common in Wiki)
19. p92 The text is always vertically centered in the line box (??), set line-height That’s it. Using height will cause the text to not be vertically centered, so additional padding must be set
20. CSS Tooltip: How about the simplest title attribute?
21. p105 Highlight the current page in the navigation bar : Use 2 IDs, one of which is applied to the body element for combined matching (in this way, the background of the navigation bar does not need special processing...) Cool!
22. p114 The old version of IE does not support using :hover on non-anchor elements. You can use JS or .htc behavior files to enable this function
23. CSS image mapping: wrap the img with a div, Set its size equal to the image and position:relative; then position each li element relative to the div, and use :hover to display the border line. . .
24. p129 Long-distance flip: It is actually very simple. Let the anchor element wrap a div/span/li, and then use absolute positioning to move these containing elements to other positions on the page. Just set the :hover of the anchor element. .
25. p136 2 models of table element border: collapse|separate
26. Form element
    1. fieldset: block title (Group Panel/Box)
    2. label 2 ways to use: nesting contains input; use for attribute to associate input (id)
27. p153 'The basis of all CSS layouts are 3 basic concepts: positioning, floating, margin manipulate. '
    1. IE 6 - does not support margin:auto; Fortunately, IE misinterprets text-align:center; as centering everything, not just the text (...)
    2. p159 In standards-compliant browsers, if the content of an element is too large, it will simply extend outside the box. However, IE expands the entire element (...-_-)
    3. 3-column layout: broken down into 2 nested 2-column layout? ? ?
    4. p164 flow layout: min-width! (Haha, I think an online CSS exam system can be developed. The question is about layout accurate to px. JS is required to check whether the effect is correct... ha)
    5. p166 Flexible layout: relative to the font size (em units) layout (not necessary for browsers that support page scaling)
       1. body{font-size:62.5%;} only sets the width of the container in em units, the internal width still uses %
    6. p170 faux column (omitted)
28. bugs and bug fixes
    1. IE's 'own layout' (hasLayout)
       1. Setting the following attributes will cause the element to have layout: float, display:inline-block;, width/height, zoom, writing-mode:tb-rl; added in IE7: overflow, min-width: any value, max- width: any value except none
       2. For example: in IE, text paragraphs have layout, and there will be no effect of surrounding float elements
       3. Another example: in IE 6-, elements with layout will be wrong Expands to fit content size...
    2. Hacks and filters (omitted)
    3. Common bugs on IE 6-:
       1. Any float Doubling the element's margin? ? ? Change to display:inline;
       2. 3px text offset
       3. Repeat last few characters of last element of a series of floated elements: remove comment (..!)
       4. * 'peek-a-boo' bug with IE6
       5. * Absolute positioning (o, i c, shit) in relative containers: .rel-container{height:1%;}
29. Case Study
    1. Roma Italia
       1. Cufon? Display html with the selected font, without any images or @font-face (???): the EULA for the selected font must allow font embedding on the web
    2. Climb the Mountains
       1. :first-child
       2. Combined class