div css How much do you know? Worth a look_html/css_WEB-ITnose

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

 

产生背景　　

     HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后发布了XML。
　　XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。
　　而CSS关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）??但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

 

流行优势　　

符合W3C标准。 　　 支持浏览器的向后兼容。 　　 搜索引擎更加友好。 　　 样式的调整更加方便。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

嵌入方式

行内套用　　可以在HTML文件内直接宣告样式。 　　举例来说，Thisisfontsize16.
　　以上的HTML文件在浏览器上会显现为：Thisisfontsize16.
　　嵌入套用样式可以嵌入于HTML文件中(通常是在内)。 　　举例来说，背景颜色是红**ody>
　　以上的HTML会显现出：背景颜色是红色 　　

外部连接套用 　　在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。
　　该档案通常名称为.css。
　　在HTML文件的

..

之中，我们将用以下的程式码将这个.css档案连接进入：
　　
　　以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。
汇入套用　　外部的CSS样式也可以被汇入进HTML文件。 　　汇入的做法为利用@import这个指令。
　　@import的语法为：
　　@import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，后被加入的CSS样式有优先的顺位(详情请见CSS串接)。
　　还有一种嵌入的方式是直接写在标签上的，不过这种写法有些限制，大多数标签都可以接受这种解法: 　　

文字

This code changes the color of the text in the label by directly embedding the label, and the writing method of directly embedding the label according to the priority call level of css is more direct and preferential to call.

Layout advantages

1. Make the page load faster
Since most of the page code is written in CSS, the page volume capacity becomes smaller. Compared with the table nesting method, DIV CSS separates the page into more areas, which are loaded layer by layer when the page is opened. Instead of enclosing the entire page in a large table like table nesting, the loading speed is very slow.
2. Reduce traffic costs: The page size becomes smaller and the browsing speed becomes faster, which is the biggest advantage for some websites that control host traffic. ​

3. More efficient when modifying the design
Due to the use of DIV CSS production method, it is easier to save time when modifying the page. According to the regional content tag, find the corresponding ID in CSS, which makes it more convenient to modify the page without destroying the layout style of other parts of the page.

4. Maintain visual consistency
One of the most important advantages of DIV CSS: maintain visual consistency; the previous nested table production method will cause differences between pages, or areas and areas. The display effect will vary between times. Using the DIV CSS production method, all pages or all areas are uniformly controlled by CSS files, which avoids effect deviations reflected in different areas or different pages.

5. Better indexed by search engines
Since most of the HTML code and content styles are written into CSS files, this makes the text part of the web page more prominent and easier to search. Engine collection.

6. More friendly to viewers and browsers
We all know that websites are made for viewers and are more friendly to viewers and browsers. DIV CSS is more friendly in this regard. Advantages. Because CSS is rich in styles, it makes the page more flexible. It can achieve unified and non-deformed display effects according to different browsers.

Problems

Although DIV CSS has certain advantages, the current problems in CSS DIV website construction are also relatively obvious, mainly in:
First, the high reliance on CSS makes web design more complicated. Compared with the table layout (table) in HTML4.0, although CSS DIV is not out of reach, it is at least much more complicated than table positioning. Even for website design experts, it is easy to have problems, let alone beginners. To a certain extent, it has affected the popularization and application of XHTML website design language.
Second, abnormal CSS files will affect the normal browsing of the entire website. The design elements produced by CSS websites are usually placed in several external files. This one or several files may be quite complex or even large. If the CSS file is called abnormally, the entire website will become miserable.
Third, the browser compatibility issue with CSS website design is quite prominent. Web design based on HTML4.0 has almost no browser compatibility issues in versions after IE4.0. However, a website designed with CSS DIV may display pages normally in IE but not in Firefox. It’s unrecognizable (which is why Internet marketers are advised to use Firefox). CSS DIV still needs further support from various browser manufacturers.
Fourth, whether CSS DIV is optimized for search engines depends on the professional level of web design rather than CSS DIV itself. CSS DIV web design does not guarantee that the web page will be optimized for search engines. It does not even guarantee that the web page will have a simpler code design than the HTML website. Moreover, the inclusion and sorting of web pages by search engines is obviously not measured by whether tables and CSS positioning are used. This This is the reason why many websites made with traditional table layouts are ranked high in search results, while many web pages made using CSS and web standards are still ranked 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 mistakes

1. Check whether the HTML element has spelling errors or whether the closing tag is forgotten
Even veterans often make mistakes in the nesting relationship of divs . You can use Dreamweaver's verification function to check for errors.

2. Check whether the CSS is correct
Check whether there are spelling errors, whether you forgot the ending }, etc. You can use CleanCSS to check CSS for spelling errors. CleanCSS is a tool to reduce weight for CSS, but it can also check for spelling errors.

3. Determine the location where the error occurred
If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a certain div block, then you can determine the location where the error occurred. ​

4. Use the border attribute to determine the layout characteristics of the error element. Using the float attribute for layout will cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.

5. The parent element of a float element cannot specify the clear attribute
If you use the clear attribute on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours.

6. Float elements must specify the width attribute
Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.
In addition, when specifying elements, try to use em instead of px as the unit.

7. Float elements 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 margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values ​​for IE.

8. The sum of the widths of float elements must be less than 100%
If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.

9. Have you reset the default style?
Different browsers have different interpretations of certain attributes such as margin, padding, etc. Therefore, it is best to set all margin and padding to 0, list style to none, etc. before development.

10. Did you forget to write the DTD? If the display results of different browsers are still different no matter how you adjust it, then you can check whether you forgot to write the following line of DTD at the beginning of the page:
　

Common tools

1. Notepad.exe notepad, (small program, ready to use at any time Manual editing, less junk code, no visual preview)

2.Dreamweaver (an old web page editing tool, full-featured, relatively large program, but not very friendly to DIV CSS visualization support)

3..editplus (should be an upgraded version of the notepad tool, with color tips for code editing)

4.Ultraedit

5.Golive (a product that will replace Dreamweaver in the future)

6.Topstyle (has quite a lot of functions, and comes with a CSS code checking function to reduce the chance of writing errors. In particular, its HELP file contains a detailed introduction to CSS instructions, which is very suitable for use as a reference document and for those who are new to CSS. Learn to 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 between FF, IE7 and IE6: background:orange;*background:green! important;*background:blue; 　

IE7, IE8 compatible: 　　

HEAD 　　🎜>

1. Several browsers in CSS support different keywords, which can be repeatedly defined for browser compatibility! important Can be recognized by FireFox and IE7* Can be recognized by IE6, IE7_ Can be recognized by IE6* Can Recognized by IE7

2. IE-specific conditional comments

3. Several browsers’ interpretation of actual pixels IE/Opera: The actual width of the object = (margin-left) width (margin-right) Firefox/Mozilla: Actual width of object = (margin-left) (border-left-width) (padding-left) width (padding-right) (border-right-width) (margin-right) 　

4. Mouse gesture problem: FireFox’s cursor attribute does not support hand, but it supports pointer, and IE supports both; so for compatibility, pointer is used 　　

5. FireFox When setting the Style attribute of the HTML tag, all position, width, height, and size values ​​must be followed by px. IE also supports this writing method, so the px unit is added uniformly. For example, Obj.Style.Height = imgObj.Style.Height 'px';

6. FireFox cannot parse the abbreviated padding attribute setting, 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 eliminating the indentation of ul, ol and other lists, 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. CSS control transparency: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox ：opacity:0.6; 　

9. CSS control rounded corners: IE: does not support rounded corners; 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 bump 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 cursor style file and scroll bar color Style; FireFox does not support either of the above

12. IE has a bug that the Select control is always on top, and all CSS does not work on the Select control

13. IE supports Form The Label label in the label includes pictures and text content; FireFox does not support Label containing pictures. Clicking the picture will not cause the Radio or CheckBox marked label for to have an effect

14. TextArea in FireFox does not support the onScroll event

15. FireFox does not support inline and block of display

16. When FireFox sets the margin-left and margin-right of the Div to auto, it is already centered, but it does not work 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 follow this order for CSS style settings of hyperlinks: L-V-H-A. That is, This can be avoided Some hyperlinks that have been visited no longer have hover and active styles

19. To set automatic line wrapping for long paragraphs in IE, set word-wrap:break-word in CSS; use JS insertion method in FireFox to achieve this , the specific code is as follows: 　

20. After adding the floating attribute to the container, the container will not be able to open automatically. Solution: Add a CSS clear: both; to the next label after the label ends.

21. IE6 explains the margins after floating Solution to double the actual margin: add display:inline 　　

22. There will be a gap below the image under IE6 Solution: add 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 under IE6. Solution: Set the right div to also float float:left or define margin-right:-3px relative to IE6;

24. How to display ellipsis when the content in LI exceeds the length (only applicable to IE)

25. Set the height and line height of the element to The same value can center the text vertically 　

26. To align text and text input boxes, you must add vertical-align:middle; attribute setting in CSS 　

27. If a browser that supports WEB standards sets a fixed height value, it will not be stretched like IE6, but if you want to set a fixed height, you also want to be able to be stretched. What about spreading? The solution is to remove the height attribute and set min-height. In order to be compatible with IE6 that does not support min-height, it can be defined like this: { height:auto!important; height:200px; min-height:200px; } 　

28. Solution to the problem that IE cannot set the scroll bar color in web standards: change the setting of body in CSS to