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

Today, I will talk to you about how to understand the weird patterns in CSS programming. Many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something from this article.

Weird pattern box model

I learned the box-sizing property of css3 today, reviewed the box model of css by the way, and finally found it necessary to do a comprehensive arrangement of the box model.

Regardless of the case of css3, the box model has two modes, one is the standard mode, and the other is the weird mode.

When you create a new html page with the editor, you are sure to find a DOCTYPE tag at the top, for example:

All of the above DOCTYPE are standard document types, and no matter which schema is used to fully define DOCTYPE, the standard schema will be triggered, while if the DOCTYPE is missing, the weird schema (quirks schema) will be triggered under ie6,ie7,ie8.

First, define a div block to demonstrate the difference between standard mode and weird mode. Here is the Css style

.box {

Width: 200px

Height: 200px

Border: 20px solid black

Padding: 50px

Margin: 50px

}

The box model in standard mode is shown in the following figure, with total box width / height = width/height+padding+border+margin

Standard model box model

The box model in weird mode is shown in the following figure. The total width and height of the box include the width of the inner margin padding and the width of the border border. The total width / height of the box = width/height + margin = content area width / height + padding + border + margin

Weird pattern box model

Seeing that you should have a clear understanding of the two modes of the box model, let's introduce the css3 attribute box-sizing on this basis.

Box-sizing has two values, one is content-box and the other is border-box.

When set to box-sizing:content-box, the standard mode is used to parse the calculation, which is also the default mode

When set to box-sizing:border-box, the parsing calculation will be performed in weird mode

Currently, the prefix for using this attribute is as follows:

-webkit-box-sizing: content-box

-moz-box-sizing: content-box

CSS weird schema and document type definition DTD

In standard mode, browsers represent pages according to specifications, while weird modes usually simulate the behavior of older browsers (such as Microsoft IE4 and Netscape Navigator4) to prevent old sites from not working. The difference between these two modes is typical of IE's parsing of the box model: in standard mode, the width of web page elements is determined by the addition of the widths of the three padding/border/width. In weird mode, widht itself includes the widths of padding and border. In addition, the classic method of centering block-level elements in standard mode is to set width, and then margin-right:auto,margin-left:auto; does not work in weird mode.

The same code, in order to ensure backward compatibility, browser manufacturers have invented standard mode and weird mode to parse web pages. The performance in weird mode and standard mode is likely to be very different. Because the purpose of inventing weird mode is to be compatible with code in old browsers, many of its parsing methods are substandard. So, in general, we should avoid triggering weird modes. Standard mode should be chosen.

How is the weird pattern triggered? DTD-related .DTD full name Document Type Definition, that is, document type definition .DTD is an effective way to ensure the correct format of HTML documents. You can compare HTML documents with DTD files to see whether the document conforms to the specification, and whether elements and tags are used correctly. An DTD document contains the definition rules of elements, the definition rules of the relationship between elements, the attributes that can be used by elements, and the entity or symbol rules that can be used.

Four types of DTD are most commonly used in web pages:

(1) strict type for HTML4.01: strict

(2) transition type for HTML4.01: Transitional

(3) the strict type used in XHTML1.0

(4) transition type for XHTML1.0

According to W3C standards, we need to declare the DTD type of the file at the beginning of HTML. If you omit the DTD declaration, Firefox will still follow the standard mode to parse the web page, but in IE (including IE6/7/8) will trigger a weird mode. In order to avoid weird patterns causing us unnecessary trouble, we should form a good habit of writing DTD statements.

After reading the above, do you have any further understanding of how to understand weird patterns in CSS programming? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.