What do you know about Div + CSS? Worth reading

Div + CSS is one of the commonly used terms in website standards (or "web standards"). Div + CSS is a webpage layout method, this web page layout method is different from the table Positioning Method in the traditional HTML web page design language, which can separate the content and presentation of web pages. XHTML is the abbreviation of the Extensible hypertext markup language. Based on Extensible Markup Language (XML), XHTML is a new language optimized and improved based on html. It is designed based on XML applications and powerful data conversion capabilities, adapt to more network applications in the future. In the XHTML website design standard, table positioning technology is no longer used, but various positioning methods are implemented by using Div + CSS.

 

Background

Since html4.01, the new version is no longer released, because the HTML language is becoming more and more complex and dedicated. That is, there are more and more tags. Even browser manufacturers have developed HTML tags that are only applicable to their specific browsers, which obviously hinders the compatibility of HTML web pages. So the W3C organization re-obtained nutrition from SGML and then released XML.
XML is a more rigorous markup language than HTML, and its full name is extensible markup language ). However, XML is too complex, and most browsers currently do not fully support xml. As a result, the XHTML language comes in handy. Many XML application technologies can be applied to HTML pages rewritten using the XHTML language. This makes web pages easier to expand and is suitable for automatic data exchange and more regular.
The key to CSS lies in its integration with scripting languages (such as JavaScript) and XML technology, that is, CSS + JavaScript + XML (in fact there is a better integration: XML + XSL + JavaScript) -- But XSL, the style sheet language can be expanded, which is too complicated and not easy to use than CSS. Since the appearance of CSS, HTML finally got rid of the messy nightmare and began to separate the page content from the style.

 

Popular advantages

• Complies with W3C standards.
• Supports backward compatibility with browsers.
• Search engines are more friendly.
• Style adjustment is more convenient.
• CSS has many advantages in its simplicity.CodeA large website can save a lot of bandwidth.
• Separation of performance and structure makes it easier for teams to work with each other to reduce their correlations during team development.

Embedding Method

Apply in-rowYou can directly declare styles in HTML files. For example, thisisfontsize16.
The preceding HTML file is displayed in the browser as thisisfontsize16.
Embedded style can be embedded in HTML files (usually in The above HTML will show that the background color is red.

External Connection setIn this way, all CSS style announcements are stored in another file.
The file is commonly named .css.
In the HTML file <Linkrel = style sheettype = "text/CSS" href = "external-stylesheet.css">
In this line, the styles declared in the file external-stylesheet.css will be added to the HTML file.
Import and applyExternal CSS styles can also be imported into HTML files. The import method is to use the @ import command.
@ Import Syntax: <style type = "text/CSS"> <! -- @ Import URL ("style.css"); --> </style>
@ Import command was originally intended to apply different styles to different browsers. However, this is no longer necessary. The purpose of @ import is to add multiple CSS styles. When multiple CSS styles are added in @ import mode and different CSS styles conflict with each other, the added CSS styles take precedence (for details, see CSS concatenation ).
There is also a way to embed data directly on tags, but this method is somewhat restrictive. Most tags can accept this solution: <Div style = "color: #000000; "> text </div>
This Code directly embeds the label to change the color of the text in the label, and directly embeds the label based on the CSS calling priority.

 

Layout advantages

1. Make the page Load faster
Because most of the page code is written in CSS, the page size becomes smaller. Compared with table nesting, div + CSS splits pages into more areas and loads them layer by layer when opening pages. Unlike table nesting, the whole page is circled in a big table, making loading slow.
2. Reducing traffic fees the page size becomes smaller and the browsing speed becomes faster, which makes it the biggest advantage for some websites that control host traffic.

3. More efficient Design Modification
Because the DIV + CSS method is used, it is easier to modify the page. Find the corresponding ID in CSS based on the area content tag, which makes it easier to modify the page and does not damage the layout style of other parts of the page.

4. Maintain visual consistency
One of the most important advantages of Div + CSS is to maintain visual consistency. In the past, the nested table creation method would make the display effect between the page and the page, or between the area and area different. Using Div + CSS to control all pages or all areas with CSS files avoids the effect deviation of different areas or pages.

5. Better indexed by search engines
Because most of the HTML code and content styles are written into CSS files, this makes the text section in the webpage more prominent and easy to be collected and indexed by search engines.

6. more friendly to viewers and browsers
We all know that the website is made for the viewer, which is more friendly to the viewer and the browser, and Div + CSS is more advantageous in this regard. Because CSS is rich in rich styles, it makes the page more flexible. It can achieve consistent and non-distorted display effects based on different browsers.

 

Problems

Although Div + CSS has some advantages, the current CSS + Div website construction has obvious problems, mainly manifested in:
First, the high dependence on CSS makes webpage design more complicated. Compared with the table layout (table) in html4.0, CSS + div is at least more complex than table positioning, even if it is difficult for a website designer, not to mention beginners, which affects the popularization and application of the XHTML website design language to a certain extent.
Second, an exception in the CSS file will affect the normal browsing of the entire website. The design elements of CSS websites are usually put in several L external files, which may be quite complex or even large. If the CSS file call is abnormal, the whole website will become terrible.
Third, the problem of browser compatibility in CSS website design is prominent. HTML-based Web Design in ie4.0 and later versions, there is almost no browser compatibility problem, but the CSS + Div designed website is normally displayed in the IE browser, to Firefox) but it may not be clear (this is why network marketing personnel are recommended to use Firefox ). CSS + Div needs further support from various browser vendors.
Fourth, the optimization of CSS + Div on search engines depends on the professional level of web design rather than CSS + Div itself. The CSS + Div web page design does not guarantee that the webpage is optimized for the search engine, or even has a simpler code design than the HTML website, what's more, the indexing and sorting of web pages by the search engine is clearly not measured by the use of tables and CSS positioning. This is why many websites with traditional table layout are ranked first in the search results, there are many reasons why the ranking of web pages made using CSS and web standards is still low. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.

 

Common Errors

1. Check whether the HTML element has a spelling error and whether it has forgotten the ending mark.
Even veteran engineers often mistake the DIV nesting relationship. You can use the Dreamweaver verification function to check whether there are any errors.

2. Check whether CSS is correct
Check whether there are spelling mistakes, whether the end is forgotten, and so on. Cleancss can be used to check whether CSS spelling is correct. Cleancss is a tool for CSS weight loss, but it can also check spelling errors.

3. Locate the error
If the error affects the overall layout, you can delete the DIV blocks one by one until a div block is deleted and displayed as normal. Then, you can determine where the error occurs.

4. Use the border attribute to determine the layout feature of the error element. If you use the float attribute layout accidentally, an error will occur. Add the border attribute to the element to determine the element boundary.

5. The clear attribute cannot be specified for the parent element of the float element.
If the clear attribute is used for the parent element of the float element in Macie, the layout of the surrounding float element will be chaotic. This is a famous bug of Macie. If you do not know it, it will lead a detour.

6. the float element must specify the width attribute.
Many browsers have bugs when displaying float elements with unspecified width. Therefore, regardless of the content of the float element, you must specify the width attribute for it.
In addition, when specifying Elements, try to use EM instead of PX as the unit.

7. The float element cannot specify attributes such as margin and padding.
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify the margin and padding attributes for the float element (you can nest a div inside the float element to set the margin and padding attributes ). You can also use the hack method to specify a special value for IE.

8. The sum of Float elements must be smaller than 100%.
If the sum of the float elements width is exactly 100%, some ancient browsers will not be able to display normally. Therefore, make sure that the sum of width is less than 99%.

9. Have you reset the default style?
Some attributes, such as margin and padding, are explained differently in different browsers. Therefore, it is best to set all the margin, padding to 0, and list style to none before development.

10. Have you forgotten to write the DTD? If the display results of different browsers are different, check whether the following line of DTD has been written at the beginning of the page:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"

 

Common Tools

1.notepad.exe notepad ,(ProgramSmall, manual editing at any time, less spam code, no visual preview)

2. Dreamweaver)

3. editplus (it should be an upgraded notepad tool with a color prompt for code editing)

4. ultraedit

5. golive (replacing Dreamweaver products in the future)

6. topstyle (there are many features with CSS code check function to reduce the chance of writing errors. In particular, the detailed CSS instructions in its help file are suitable for reference files and those who first contact CSS for learning and use)

 

Compatibility Method

Difference between IE6 and FF: Background: orange; * Background: blue;

Difference between IE6 and IE7: Background: Green! Important; Background: blue;

Difference between IE7 and FF: Background: orange; * Background: green;

Difference ff, IE7, IE6: Background: orange; * Background: Green! Important; * Background: blue;

IE7 and IE8 compatibility: <meta http-equiv = "X-UA-compatible" content = "Ie = emulateie7"/>

Head

1. Several browsers in CSS support different keywords, which can be repeatedly defined in browser compatibility! Important can be recognized by Firefox and IE7 * can be recognized by IE6 and IE7 _ can be recognized by IE6 * + can be recognized by IE7

2. Condition comments dedicated to IE <! -- Other browsers --> <LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/> <! -- [If IE 7]> <! -- Suitable for IE7 --> <LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/> <! [Endif] --> <! -- [If lte ie 6]> <! -- Suitable for IE6 and later --> <LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/> <! [Endif] -->

3. several browsers explain actual pixels. ie/Opera: actual object width = (margin-left) + width + (margin-Right) Firefox/Mozilla: actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-Right) + (border-right-width) + (margin-right)

4. mouse gesture: The cursor attribute of Firefox does not support hand, but both pointer and IE are supported. Therefore, pointer is used for compatibility.

5. When setting the style attribute of the HTML Tag in Firefox, all positions, width, height, and size values must be followed by PX. IE also supports this method, so the unit of PX is uniformly added. For example, obj. style. Height = imgobj. style. height + 'px ';

6. firefox cannot parse the abbreviated padding attribute settings, such as padding 5px 4px 3px 1px; it must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px0;

7. when the indentation of UL and ol lists is eliminated, the style should be written as: List-style: none; margin: 0px; padding: 0px; the margin attribute is valid for IE, And the padding attribute is valid for Firefox.

8. Transparent CSS control: IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60); Firefox: opacity: 0.6;

9. CSS controls rounded corners: IE: corner corners are not supported; Firefox:-moz-border-radius: 4px; or-moz-border-radius-topleft: 4px; -Moz-border-radius-topright: 4px;-moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px;

10. CSS double-line concave-convex border: IE: Border: 2px outset; Firefox:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white; -Moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;

11. ie supports the CSS method cursor: URL () to customize the Color Style of the cursor Style File and scroll bar. Firefox does not support either of the above.

12. ie has the bug that the select control is always at the top layer, and all CSS does not work for the select control.

13. ie supports label labels in form, including images and text content. Firefox does not support label containing images. clicking an image cannot make radio or checkbox labeled label for produce results.

14. textarea in Firefox does not support onscroll events

15. Firefox does not support display inline and block

16. Firefox sets margin-left for div, and margin-right is centered when it is set to auto, but not in IE.

17. When Firefox sets text-align for the body, the DIV needs to set margin: auto (mainly margin-left margin-right) to be centered.

18. It is best to set the CSS style of the hyperlink in the following order: L-v-h-. That is, <style type = "text/CSS"> <! -- A: link {} A: visited {} A: hover {}: active {} --> </style> to avoid having the hover and active styles out of some accessed hyperlinks

19. in IE, set the long paragraph to wrap automatically. In CSS, set the word-wrap: Break-word. In Firefox, use the JS insertion method. The specific code is as follows: <SCRIPT type = "text/JavaScript">/* <! [CDATA [*/function tobreakword (El, intlen) {var OBJ = document. getelementbyid (EL); var strcontent = obj. innerhtml; var strtemp = ""; while (strcontent. length> intlen) {strtemp + = strcontent. substr (0, intlen) + "; strcontent = strcontent. substr (intlen, strcontent. length);} strtemp + = "" + strcontent; obj. innerhtml = strtemp;} If (document. getelementbyid &&! Document. All) tobreakword ("div_id", 37);/*]> */</SCRIPT>

20. After the floating attribute is added to the sub-container, the container cannot automatically open the solution: Add a clear floating CSS clear: both to the next tag after the Tag ends;

21. After floating, IE6 explains that the outer margin is double the actual margin. Solution: add the display: inline

22. There is a gap below IE6. Solution: add the display: block to IMG or set the vertical-align attribute to vertical-align: Top | bottom | Middle | text-bottom

23. There is a gap between the two layers in IE6. Solution: set the right div to floating float: Left or define margin-Right:-3px relative to IE6;

24. The display method <style type = "text/CSS"> <! -- Li {width: 200px; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden ;} --> </style> (applicable only to IE)

25. Set the element height and Row Height to the same value to vertically center the text <style type = "text/CSS"> <! -- Div {Height: 30px; line-Height: 30px;} --> </style>

26. Align text and text input boxes. Vertical-align: middle must be added to CSS; attribute settings <style type = "text/CSS"> <! --... ... Vertical-align: middle;} --> </style>

27. If a browser that supports Web Standards sets a fixed height value, it will not be opened like IE6, but wants to set a fixed height and want to be opened? The solution is to remove the height attribute and set Min-height. To ensure compatibility with IE6 that does not support Min-height, you can define {Height: Auto! Important; Height: 200px; Min-Height: 200px ;}

28. In the Web standard, ie cannot set the color of the scroll bar. Solution: Set the body in CSS to <style type = "text/CSS"> <! -- HTML {scrollbar-face-color: # f6f6f6; scrollbar-Highlight-color: # FFF; scrollbar-shadow-color: # eeeeee; scrollbar-3dlight-color: # eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: # FFF; scrollbar-darkshadow-color: # fff ;}--> </style>

29. IE6 containers with a height of about 1 px cannot be defined due to the default line height problem. Solution: Set the container in CSS, for example, overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.

30. Set transparent properties for Flash so that the layer is displayed on top of Flash <Param name = "wmode" value = "Transparent"/> <! -- Solve the problem on IE //> <embed wmode = "Transparent "...... > <! -- Solve the problem on Firefox //>

31. After setting the padding attribute in Firefox, the width and height attribute values will be added accordingly. ie will not solve the problem: use! The important method defines a set of height and width.

32. firefox ignores spaces between Div and DIV, but ie processes them. Therefore, do not enter spaces or press Enter between two connected Div, otherwise, the format of different browsers may be incorrect, such as the famous 3px deviation, and the cause is difficult to find out.

33. <Div id = "parent"> <Div id = "content"> </div>, even if the height of the parent is set to 100% or auto, auto scaling cannot be properly performed in different browsers. A space with a height of 1 is generated at the bottom of the layer, the Code is as follows: <Div id = "parent"> <Div id = "content"> </div> <Div style = "Font: 0px/0px sans-serif; clear: both; display: Block "> </div>

34. The sizes of small are different for IE and Firefox. Firefox is 13px and IE is 16px.

35. IE and Firefox have different sizes for spaces. Firefox is 4px and IE is 8px.

 

Incomplete sorting. Please leave a message for discussion.-- Hnyei

Http://www.cnblogs.com/hnyei/