Shulou(Shulou.com)06/02 Report--

The editor today takes you to understand the causes and solutions of the misplacement of css pages in html. The knowledge points in the article are introduced in great detail. Friends who feel helpful can browse the content of the article together with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Let's follow the editor to learn more about the causes and solutions of css page misplacement in html.

(HTML) the causes and solutions of the dislocation of DIV+CSS web pages

Every time we encounter the layout that we want to set up the equipment to be exposed on one line, but for various reasons, we see that it is at the end of the line that a box organization falls out of place (see below).

Dislocation-3 dislocation and below 1 and 2

Dislocation two web page organization dislocation tree model

Generally speaking, there are two reasons for the organization dislocation of DIV CSS web pages, one is the miscalculation of width, the other is the formation of IE BUG, rated as IE6 and IE7. Then we introduce dislocation and manipulation methods to everyone next to each other.

I. the method of fault scheme for width calculation

Width calculation difference pool, assuming that the total width is 500px, there are three boxes, and the respective css width is 200px, 200px, and 100px. This is no problem and may not be misplaced in a row, but do not forget the width of these attributes if you include the css border, padding, and margin attributes. In particular, padding and border border take up width space and don't ignore it. If a box is inserted into the control frame, the width of the 2px frame will be reduced under the condition of just matching the width in the box, otherwise the calculated width of the total 3 boxes will be greater than the total width, resulting in dislocation.

Summary of CSS construction dislocation caused by width title:

The sum of the width of the inner box is greater than the outer width, resulting in dislocation. We do not necessarily calculate the sum of configuration width, frame, paddind and margin at the time of checking.

Second, the extra IE BUG is the dislocation of IE6 and IE7

This is the most common title. After we have searched the first point of the width title problem, but the width has no title, it is misplaced in IE6 and IE7, and there is no misplaced title problem in IE8 and other readers. At this time, we have to think about whether you can use the margin attribute. Usually we use CSS floating (css float) to apply margin (margin-right margin-left here is rated as this attribute) this property will cause a double value of fire, at this time we mainly use css hack to attempt this problem. Let IE6 or IE7 identify the specified margin pattern alone.

Such as:

1. IE6 is identified separately (margin-left only needs IE6 dislocation to deal with)

{margin-left:5px;_margin-left:2px}

At this time, other browsers except IE6 set margin-left:5px,IE6 to identify margin-left:2px alone.

2. Both IE7 and IE6 are identified (margin-left does not distinguish between ie6 and ie7, other versions and brand-related hunters)

{margin-left:5px;*margin-left:2px;}

At this time, in addition to IE6 and IE7, other readers set up margin-left:5px,IE6 and IE7 identification * margin-left:2px

What are the characteristics of html 1, simplicity: hypertext markup language version upgrade using superset mode, thus more flexible and convenient, suitable for beginner front-end developers to use. 2. Extensibility: the wide application of hypertext markup language brings the requirements of strengthening functions and increasing identifiers. Hypertext markup language adopts the way of subclass elements to ensure the expansion of the system. 3. Platform independence: hypertext markup language can be used on a wide range of platforms, which is one of the reasons why the World wide Web is so popular. 4. Versatility: HTML is the universal language of the network, which allows web producers to create complex pages that combine text and pictures, which can be viewed by anyone else on the Internet, no matter what type of computer or browser they are using.

Thank you for your reading, the above is the whole content of "what are the reasons and solutions for the misplacement of css pages in html?" learn friends to hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.