CSS detail set (3)

CSS detail set (3)
1. Display layers on flash

Solution: Set transparency for FLASHOr

2. Vertically center a layer in the browser

Solution: use absolute percentage to locate the negative value of the external patch.

. Code

1. {Position: absolute;
2. Top: 50%;
3. Left: 50%;
4. Margin:-100px auto-100px;
5. Width: 200px;
6. Height: 200px;
7. } 3. Add to favorites front-end framework for sharing

   Solution:

   . Code
   1. <Script type = "text/javascript">
   2. // <li>function bookmark(){ <li>var title=document.title <li>var url=document.location.href <li>if (window.sidebar) window.sidebar.addPanel(title, url,""); <li>else if( window.opera &amp;&amp; window.print ){ <li>var mbm = document.create_r_rElement_x('a'); <li>mbm.setAttribute('rel','sidebar'); <li>mbm.setAttribute('href',url); <li>mbm.setAttribute('title',title); <li>mbm.click();} <li>else if( document.all ) window.external.AddFavorite( url, title); <li>} <li>//
   3. </Script>. Code
      1. Add to favorites
         
         Iv. Implement page background gradient using IE (not supported by FF and chrome)

         From top to bottom:

         . Code
         1. Body {filter: progid: DXImageTransform. Microsoft. Gradient (gradientType = 0, startColorStr = # ffffff, endColorStr = #000000 );}

            Top left to bottom right:

            . Code
            1. Body {
            2. Filte: Alpha (style = 1, opacity = 25, finishOpacity = 100, startX = 50, finishX = 100, startY = 50, finishY = 100); background-color: skyblue;
            3. }

               From left to right:

               . Code
               1. Body {FILTER: progid: DXImageTransform. Microsoft. Gradient (gradientType = 1, startColorStr = # ffffff, endColorStr = #000000 );}
                  
                  

                  From top to bottom:

                  . Code
                  1. Style = "filter: progid: DXImageTransform. microsoft. gradient (gradienttype = 0, startColorStr = blue, endColorStr = white);" 5. border: none; different from border: 0

                     Theoretical performance differences:

                     Front-end framework sharing

                     Border: 0. Although border is set to "0" pixels, it cannot be seen on the page, but it is understood by the default value of border. The browser still renders border-width/border-color, that is, the memory occupied. Border: none; set border to "none", that is, none. When the browser parses "none", no rendering action is performed, that is, no memory value is consumed.

                     Compatibility differences:

                     Compatibility differences only apply to browsers such as Internet Explorer 6 and Internet Explorer 7, as well as tag buttons and inputs. This is true for Windows, Windows 7, and vista XP.

                     When border is "none", it seems that the border for IE6/7 is still invalid. When border is "0", it feels more effective than "none, all browsers hide borders in a consistent manner. How can we make border: none; fully compatible? You only need to add the background attribute on the same selector.

                     6. css achieves high-profile layout with multiple columns, positive and negative margins

                     Apply a high-level column style to each column to be implemented:

                     . Code
                     1. . E {padding-bottom: 32767px; margin-bottom:-32767px ;}
                        
                        7. display: inline-block. As the name suggests, it is a block in the case of inline. You can set the height and width. Front-end framework sharing. Code
                        1. . Element-class {
                        2. Display:-moz-inline-stack; // Firefox only code
                        3. Display: inline-block; // some standard browsers
                        4. Zoom: 1; // IE only
                        5. * Display: inline; // Only IE know this code (CSS Hack)
                        6. } 8. Clear floating. Code
                           1. . Clearfix: after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0 ;}
                           2. . Clearfix {zoom: 1 ;}
                              9. Use the ellipsis to truncate text. Code
                              1. Div {width: 200px; height: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap ;}