CSS Surface Question Summary 2

1. What is your favorite image replacement method and how do you choose to use it?

Image substitution, just like we usually add text to the text, and then hide the text through CSS and display a background image in its place, so that the search engine can still search the HTML text, even if we disable the CSS, the text can still be displayed.

Image substitution technology The intention of using Display:none is not just to replace text, but there are some deeper reasons to do so. In fact, without any hint or help, the computer cannot recognize or read the text contained in the image. For example, the IMG element in HTML, if there is no ALT attribute, and so on Google and other search engines, as well as the auxiliary browsing device (for example, screen reader can read the page content, and in the form of sound to tell the viewer), such as the inability to render the image of the client, will be proud of no meaning. The image substitution technique retains the original text in the replaced element, so it is not problematic for any customer to understand the content of the page.

The idea of replacing text with a picture is quite simple: it is to use the background image in the style to replace the text content in the HTML template to achieve a page rendering effect that the style cannot achieve .

A) FIR (Fahrner Image Replacement) method

When the picture cannot be displayed, it will cause the area to have no content. At the same time, content that is hidden by using display:none will be ignored by many mainstream screen readers, causing usability problems and should be avoided as much as possible.

<H1 id= "FIR" > <a href= "#" >fir measure</a></div>

#FIR {
width:300px;
height:200px;
Background-img:url ("Fir.png");
}
#FIR a{
Display:none;
}

b) Phark method

The Text-indent property, and sets a large negative value for it to achieve the effect of hidden text. This method is easy to understand and supports browsing Web pages such as readers. The problem of FIR still exists when the picture cannot be displayed.

C
By setting the span size to "0", the hidden text effect is achieved so that the reader can read it completely and achieve the effect of replacing text in the picture.
<H1 id= "Thirdmeasure" >    <span>the third measure</span>
D
Set the position of the H1 to relative so that the elements inside the H1 are positioned with the H1 as a reference, then the span element is absolutely positioned to fill the entire H1 area, and the background image is applied to the span tag, which is the principle of overriding the span tag in text content Above, once the background image in the span cannot be displayed, the lower text content will be displayed without affecting the normal use. However, this method also has a flaw, that is, the background map is not transparent, otherwise it will reveal the following text.
<H1 id= "4thMeasure" >    <span></span>the Fourth measure
More image replacement methods: Http://www.w3cplus.com/css/ten-image-replace-text-with-css
2. What are the methods of hiding content (if you also want to make sure that screen readers are available?) ）
There are several possibilities to hide content:
1) Hide the text
A) for block-level elements or display:block elements text-indent:-9999px;
Text-indent is the first line indentation, so for multiple lines of text, if you use it alone has obvious shortcomings, need to add white-space:nowrap; To compensate for the shortcomings, but there is a problem: the physical space still exists, it is necessary to set up line-height:0; Or use an ultra-small font
(under IE a bit bug), the final code is as follows:
b
. texthidden{    display:block    width:0;    height:0;    Overflow:hidden;  }
c) Display:none
It is easy and effective to make things disappear, including the container itself, but it has two familiar flaws, which are unfriendly to search engines and ignored by screen readers.
2) Hide Hyperlinks (alternative black chain)
3) for statistical code hiding
4) Hide out of picture
Overflow:hidden
5) CSS Hidden scroll bar
Overflow-x:hidden;overflow-y:hidden;
6) CSS Hidden div layer
Display:none; or Visibility:hidden;
3. Media Enquiry
When using media queries, you first set up a meta tag to be compatible with the display of your mobile device
<meta Name="viewport" content="Width=device-width, initial-scale=1.0, maximum-scale=1.0 , User-scalable=no ">      

 
   

  
    
 
     
Width = device-width: widths equal to the width of the current device
 
     
Initial-scale: initial zoom ratio (default = 1.0)
 
     
Minimum-scale: The minimum scale to allow the user to zoom (the default setting is 1.0)
 
     
Maximum-scale: maximum scale allowed to be scaled by the user (default = 1.0)
 
     
user-scalable: Whether the user can zoom manually (the default is no, because we don't want the user to zoom out of the page)
 
    
 
   
Then to load the compatible JS file
Because IE8 neither supports HTML5 nor supports CSS3 Media, we need to load two JS files to ensure that our code is compatible:
<!--[If Lt IE 9]>
　　<script src= "Https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" ></script>
<script src= "Https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" ></script>
<! [endif]-->
Finally, you can start writing media query statements.
@media screen and (min-width:960px) and (max-width:1200px) {body{background:yellow; }}
4, how to optimize the page print style?
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Xxx.css"/>
Where media specifies the property is the device, the monitor is screen, the printer is print, the TV is television, the projector is projection.
<link rel= "stylesheet" type= "Text/css" media= "print" href= "Yyy.css"/>
However, there are some caveats to printing a style sheet:
1, it is best not to use a background picture in the plot style table, because the printer cannot print the background in CSS. To display a picture, use HTML to insert it into the page.
2, it is best not to use pixels as a unit, because the plot style sheet to print out will be physical, it is recommended to use PT and cm.
3. Hide unnecessary content. (@print Div{display:none;} There may be a lot of page elements on the website that are completely useless on the print version, like navigation links, sidebar,
Elements such as forms and ad columns often waste ink when printing, and we can use the Display property in plot style sheets to set them to not display. Users often want to print only the content of the page.
4. It is best to use less floating properties in plot style tables because they will disappear.
5. Disclosure of links
6. Emergent link text
7. If you want to know the effect of the plot style sheet, select Print Preview directly on the browser.
http://blog.csdn.net/xujie_0311/article/details/42271273
5. What are the issues that need to be considered when writing an efficient CSS?
1) Try to write the style in a separate CSS file, referenced in the head element (benefit: Separation of content and style, easy to manage and maintain; Reduce page volume; CSS files can be cached, reused, and maintenance costs reduced)
2) do not use @import, @import affect the loading speed of CSS files
3) Avoid the use of complex selectors, the less the better, sometimes the module of the project more and more complex functions, we write CSS selectors will be nested multi-layered, more and more complex. It is recommended that the selector should not be nested more than three layers.
4) Reduce the amount of code with CSS inheritance
Part of the CSS code can be inherited, if the parent element has already set the style, the child element does not need to set the style, this is an effective way to improve performance. Common inheritable properties such as: color,font-size,font-family, etc., non-inheritable such as: position,display,float, etc.
5) Use the CSS Sprint, sprite chart, to combine multiple images into one image and use background-position to display and position images.
http://www.zhihu.com/question/19886806
1) Avoid using multi-class selectors, IE6 and older browsers for similar. Foo.bar multi-class selectors are not resolved correctly
2) Remove empty CSS rules
3) Correct use of display properties, due to the role of display, some style combinations will not work, the increase in style volume and also affect the resolution performance.
4) do not misuse floating, although floating inevitable, but there is no denying that many CSS bugs are caused by floating
5) without abusing Web fonts, web fonts are often bulky, and some browsers block page rendering damage performance when downloading Web fonts.
6) do not use the ID selector in the selector, mainly considering the reuse of the style and the coupling with the page
6, if the design of the use of non-standard fonts, you how to achieve?
1) Use picture instead
2) invoking server-side fonts
@font-face{


Srules}
Name: Font names
URL: Specify OpenType fonts with absolute or relative addresses
Srules: Style sheet definition
Examples of Use:
@font-face {/    * font-properties */    Font-family:pictos;    Src:url (' Pictos/pictos-web.woff '),  

URL (' Pictos/pictos-web.eot '); /* old version IE */}
 
   
 
  
    
 
     
 
      
123
 
      
div {    font-family: pictos;}
 
     
 
    
 
 
   
Multiple src for compatibility with various versions of the browser
7. The browser determines whether the element matches a CSS selector
The browser first produces a collection of elements, which are often generated by the index of the last part (if no index is a collection of all elements). Then, if the previous part is not met, the element is removed from the collection until the entire selector is matched, and the element in the collection matches the selector.
For example, there is a selector:
Body.ready. Container. cl{    Background-color:pink;}
First find all the elements in the class that have CL in a collection, and then find the ancestor elements of those elements, if none of the ancestor elements of an element container this class to remove this element from the collection, the remaining elements in the collection conform to the. Container. Cl This rule, And then from the container class, looking for container ancestor element has no tag name body, the class name contains the ancestor of ready, if not to remove this element from the collection, now the elements in the collection are consistent with Body.ready. Container. CL this rule out.
That's roughly the case, but the browser will have some strange optimizations.
Attention:
1, why to match from the back forward because of the efficiency and the direction of the flow of documents. Efficiency says that finding the elements of the father and the previous brother is quicker and easier than traversing all the sons.
The parsing direction of the document flow is that because of the current CSS, an element can determine his match if it determines all the elements of the element before the document flow, and the application can determine the attributes of the elements that have occurred, even if the HTML is not loaded. The judgment of a selector is only related to an element and the sibling of its predecessor, its ancestor node, when the browser loads, when the HTML is loaded in half, all the elements that have been loaded, their ancestor elements and their previous sibling elements must have been loaded, So this time the CSS will definitely be able to determine its style.

2, why is the use of sets are mainly also efficiency. Based on the assumption that the number of CSS rule is much smaller than the number of elements and the use of the index, traversing each CSS rule through a collection filter is much faster than traversing each element and then traversing each rule match.
8, understanding of the box model, and how to tell the browser in CSS to use a different box model to render your layout
DIV+CSS has two kinds of box models
Standard box model
IE Box model
The width and height of the standard box model are the widths and heights of the content area, and increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box, but the width of the IE6 browser is not the width of the content, but the sum of the contents, padding, and border widths.
How to make the browser can be processed according to the standard box model, is to add DOCTYPE declaration at the top of the webpage. If you do not add the DOCTYPE statement, then each browser will be based on their own behavior to understand the page.
In CSS3, there is this attribute: Box-sizing, which has two optional values, one is the default Content-box one is Border-box, choose the latter, the box model will be processed in IE6 manner.
From the original: http://www.cnblogs.com/sydeveloper/p/3809131.html
9. All values of display properties
 
   

  
    
 
     
 
      
value
 
      
Description
 
     
 
     
 
      
None
 
      
This element is not displayed.
 
     
 
     
 
      
Block
 
      
This element is displayed as a block-level element with a newline character before and after this element.
 
     
 
     
 
      
Inline
 
      
Default. This element is displayed as an inline element with no line break before or after the element.
 
     
 
     
 
      
Inline-block
 
      
Inline block element. (CSS2.1 new value)
 
     
 
     
 
      
List-item
 
      
This element is displayed as a list.
 
     
 
     
 
      
Run-in
 
      
This element is displayed as a block-level element or inline element, depending on the context.
 
     
 
     
 
      
Compact
 
      
There is a value compact in CSS, but it has been removed from CSS2.1 due to a lack of broad support.
 
     
 
     
 
      
Marker
 
      
The CSS has a value of marker, but it has been removed from the CSS2.1 due to a lack of broad support.
 
     
 
     
 
      
Table
 
      
This element is displayed as a block-level table (similar to <table>) with a newline character before and after the table.
 
     
 
     
 
      
Inline-table
 
      
This element is displayed as an inline table (similar to <table>) and there are no line breaks before or after the table.
 
     
 
     
 
      
Table-row-group
 
      
This element is displayed as a grouping of one or more rows (similar to <tbody>).
 
     
 
     
 
      
Table-header-group
 
      
This element is displayed as a grouping of one or more rows (similar to <thead>).
 
     
 
     
 
      
Table-footer-group
 
      
This element is displayed as a grouping of one or more rows (similar to <tfoot>).
 
     
 
     
 
      
Table-row
 
      
This element is displayed as a table row (similar to <tr>).
 
     
 
     
 
      
Table-column-group
 
      
This element is displayed as a grouping of one or more columns (similar to <colgroup>).
 
     
 
     
 
      
Table-column
 
      
This element is displayed as a cell column (like <col>)
 
     
 
     
 
      
Table-cell
 
      
This element is displayed as a table cell (similar to <td> and <th>)
 
     
 
     
 
      
Table-caption
 
      
This element is displayed as a table header (like <caption>)
 
     
 
     
 
      
Inherit
 
      
Specifies that the value of the display property should be inherited from the parent element.
 
     
 
    
 
   
10.What is the difference between inline and inline-block,block? 
Display:block
The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
The block element can set the Width,height property.
The block element can set the margin and padding properties.
Display:inline
The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
The inline element setting width,height property is invalid.
The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.
Display:inline-block
In simple terms, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.
11, the Horizontal spacing of inline-block
Inline-block between elements that are rendered horizontally, with line breaks or spaces separated
. Space a {    display:inline-block;    padding:. 5em 1em;    Background-color: #cad5eb;} <div class= "Space" >    <a href= "# #" > Melancholy </a>    <a href= "# #" > Calm </a>    <a href= " # # "> Blood </a></div>
One, the element between the white space between the reason is the label section between the spaces, so, remove the space in the HTML, natural spacing on the wood. Considering the readability of the code, it is not advisable to make a line, so you can remove the space in JS and keep it in HTML.
Second, font-size:0
. space {    font-size:0;}. Space a {    font-size:12px;}
See: http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
12, Line-height value for the percentage and value
<div style= "FONT-SIZE:14PX;" >    <p style= "FONT-SIZE:16PX;" >something about Line-height</p></div>
1) Set Line-height to pixel value
Div set line-height:13px; So p directly inherits this line-height also for 13px;
2) Set the Line-height to a single number
Div set Line-height:5; So the line-height:14*5=60px of the Div
line-height:16*5=80px of P
3) Set Line-height to a percentage
Div set line-height:120%;
Div line-height:120%*14px=16.8px;
P line-height:16.8px
CSS Surface Question Summary 2 (EXT)