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

This article will explain in detail the example analysis on the front end of Css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Mobile terminal

The mobile hasn't got on the bus yet. Let's first summarize three basic mobile development features: viewports (viewport), media queries (@ media), and relative font size.

1.1 viewports (viewport)

With the viewports added, the page is automatically cropped to fit the size of the moving page.

1.2 Media Inquiry (media query)

The following is just a demonstration of the use of media queries. In practice, we often use media queries to display different layouts according to devices of different widths.

/ * HTML * /

1.3 relative font size (rem/em)

Rem is the font size relative to the root font, and em is the font size relative to the parent.

/ * HTML * /

Second, selector

2.1 commonly used

Tag, id, and class are all commonly used selectors. Class is the most commonly used.

/ / id is unique on the page, and class can have multiple attributes.

2.2 relationship

The offspring (parent child-child), the offspring (parent > child), the brothers (+) are adjacent (~).

The brother selector is often used to make a border in the middle of the navigation bar.

2.3 pseudo elements

Pseudo classes are:: before,:: after,:: selection,:: first-line,:: first-letter.

Among them:: before is often used to make triangles and icons to the left of the landing box. See kingkit for more.

/ * HTML * /

2.4 pseudo class

LVHA (: link,:visited,:hover,:active),: focus, lang, first-child (last-child,nth-child (n))

Div:first-child {}

2.5 priority

The highest priority is to set the element of! important, followed by the weight of the element. When the weight is the same, who is closer to HTML (inline > inner chain > outer chain), the priority of proximity is higher.

The weight distribution is attr:1000,id:100,class:10,tag:1. When there are multiple selector combinations, the sum of their weights is the total weight. The one with great weight has the highest priority.

Display: noneyed importance; / / the highest priority. IE6 does not support! important in the same selector.

According to the principle of proximity (inline > inline > outer chain), the closer the level is, the higher the priority is.

Highest priority

3. Style reset (reset)

3.1 commonly used resets

* {box-sizing:border-box;} / * IE8+ * /

3.2 reset plug-in (Normalize.css,IE8+)

Of course, you can also use plug-in brakes to help you without writing the reset style yourself.

Fourth, browser prefix

The use of unstandardized new features is often accompanied by a bunch of compatible prefixes. Each browser uses its own private prefix to implement the new function, and we need to add a standard attribute after we have written the compatibility attribute. After the attributes are standardized, we don't need to add standard attributes again.

Div

4.1 Origin of prefixes

Before the experimental features are standardized, browser manufacturers want developers to experience these new special effects as soon as possible. These functions can be used directly through the prefixed CSS attribute.

After standardization, styles can be set through properties without prefixes. However, for users who do not update their browsers, styles still need to be accessed through private properties.

In this way, you have to write N pieces of compatible code. Chrome (- webkit-), firefox (- moz-) and opera (- o -). Safari, like chrome, has a private attribute prefix of-webkit-.

4.2 solution

At this point, what you need is an Autoprefixer or-prefix-free.

V. compatibility

In addition to handwritten IE compatibility, you can also use IE9.js to automatically handle the bug of IE6-9. In addition, IE6-9 supports fillets, background gradients, border images, box shadows, rgba and other visualization functions can be used with CSS3PIE. Respond.js can be used to make IE6-8 support media queries. IE6-7 supports CSS3 box-sizing and can use borderBoxModel.js. IE6-8 supports: advanced CSS selectors such as first-child, which can be used with selectivizr. Let IE8 and the following browsers support H5 new elements, you can use html5shiv.js.

5.1 IE condition comment

Only IE will parse this type of code, and other browsers will treat it as comments. See Paradise's merry-go-round for more.

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.