[Original] Web Front-end development practices-CSS part of Reading Notes

How to organize CSS-layering

The ability to apply css is divided into two parts: one is the css API, the focus is on how to use css to control the style of elements in the page; the other is the css framework, focusing on how to organize css. Css can be organized from multiple perspectives, such as by function or by block. Here we will talk about the organization method of base.css + common.css + page.css. All the styles in the website are divided into three categories by function: base, common, and page. These three are stacked structures.

1. base Layer-simplified and common

It is located at the bottom layer of the three and provides the css reset function and the atomic class, which has the smallest granularity. This layer will be referenced by all pages, which is the bottom layer of the page style dependency. Websites of different styles can use the same base layer. Therefore, this layer should be highly portable, it strives to be streamlined and general. This layer is relatively stable and basically does not require maintenance. It can be simply stored in a file, such as base.css.

Css reset removes all the default styles of the browser from the beginning. It is to "Overwrite" the default styles provided by the browser by redefining the label style. Common labels can be explicitly listed to avoid "*", such as some css reset code from YUI:

/* CSS reset */

Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0; padding: 0 ;}

Table {border-collapse: collapse; border-spacing: 0 ;}

Fieldset, img {border: 0 ;}

Address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal ;}

Ol, ul {list-style: none ;}

Caption, th {text-align: left ;}

H1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal ;}

Q: before, q: after {content :";}

Abbr, acronym {border: 0 ;}

Generic atomic classes are a series of common basic classes, including: Text, positioning, length, and margin. Due to their atomicity, most of them only contain one sentence of css except a few special classes, for example :. f12 {font-size: 12px;}. Due to its versatility, the naming should be as short as possible to ensure that the naming has semantics. For example, paddingtop20 can be written as pt20. There are several special classes in the generic atomic class, which are described as follows:

1). fl class and. fr class: Besides setting float: left and float: right, you should also set display: inline to solve the double margin Bug of ie6.

. Fl {float: left; display: inline ;}

. Fr {float: right; display: inline ;}

2). bc class: to center block-level elements and set the width, you can use it with. w100 and other classes at the same time, such:

. Bc {margin-left: auto; margin-right: auto ;}

. W100 {width: 100 ;}

3). clearfix class: used to clear the child element floating directly in the parent container.

4). zoom class: Set the style to zoom: 1, which is a proprietary attribute of IE, used to trigger hasLayout.

2. common layer-component-level, modular, and reusable

It is in the middle and provides component-level css classes. You can split the elements on the page into small modules with relatively independent functions and styles, and treat a large number of repeated modules as one component, put it in the common layer ("modularization" can be considered in terms of style and behavior, and the modularization of style is related to the common Layer ). The common layer is equivalent to the M (Model) in the MVC mode and should be encapsulated as much as possible.

The common layer is website-level. different websites have different common layers. The same website has only one common layer and can be stored in one file, it can also be divided into multiple files by function. In teamwork, it is best for one person to take charge of the common layer and manage it in a unified manner.

3. page Layer

Highly Reusable Modules of websites can be placed on the page layer. The page layer is located at the highest level and provides page-level styles. If the website is not large enough, you can put all the page layers in one file, add comments to the page, and write them in blocks to facilitate maintenance. The simpler the css file on the page layer, the better. css on the base layer and common layer can be used. Do not use the page layer whenever possible.

Avoid abuse of sub-tags

Low weight principle.

Can be combined without inheritance.

The camper name is used to distinguish different words, and a line is used to indicate the subordination.

CSS sprite

1. The technology is for the background image. The image set with the html document cannot be merged into the CSS Sprite image. Otherwise, the image will affect the page readability.

2. CSS sprite cannot be used for images tiled either horizontally or vertically. If they are tiled horizontally, they can only be merged into a large image and arranged vertically, horizontal layout is not supported. If the image is vertically tiled, you can only merge all the vertically tiled images into a large image. The image can only be horizontally or vertically arranged.

3. For Image Positioning of CSS sprite, you can use the bg2css tool to quickly locate the background-positon coordinates, which helps increase the development speed.

4. The advantage is to reduce the number of HTTP requests and relieve the server pressure. The disadvantage is to reduce the development efficiency and increase the maintenance difficulty. Exercise caution when maintaining and modifying each image in the CSS Sprite graph to avoid affecting the surrounding image.

Whether a website uses the CSS Sprite technology depends on the website traffic.

Benefits of websites with high traffic: reducing the number of HTTP requests and server load (E-commerce, Weibo, Weibo, and community)

Websites with low traffic costs are very high: reduces development efficiency and increases maintenance difficulty (background management systems are generally not suitable for use)

CSS hack1.IE condition annotation Method

This method is secure and compatible. It is also a hack method recommended by Microsoft, but it is not conducive to development and maintenance and requires maintenance of multiple css files. For example, css for different IE versions is involved.

<! -- [If IE]> <! [Endif] --> only valid in IE

<! -- [If IE 6]> <! [Endif] --> valid only for IE6

<! -- [If gt IE 6]> <! [Endif] --> valid only for IE6 or later versions

Note: Combined with lte (less than or equal to), lt (less than), gte (greater than or equal to), gt (greater ),! (Not) keyword used.

2. Select the prefix

"* Html" prefix only takes effect for IE6 "* + html" prefix only takes effect for IE7

. Test {width: 80px;}/* IE 6 7 8 */

* Html. test {width: 70px;}/* IE6 */

* + Html. test {width: 60px;}/* IE7 */

Disadvantage: IE9 cannot be guaranteed. 10 does not recognize * html, * + html, and there is a risk of backward compatibility.

3. Style attribute prefixes:

For example, "_" takes effect only under IE6 and "*" takes effect under IE6 and IE7. There are also risks of backward compatibility.

. Test {width: 80px; * width: 70px; _ width: 60px ;}

Inline style: <div style = "width: 80px; * width: 70px; _ width: 60px;"> </div>

Because the IE condition annotation method is not conducive to development and maintenance, the common hack method is usually the latter two.

Display: inline-block and hasLayout block-level elements and intra-row Elements

A block-level element occupies an exclusive row. The default width automatically fills the width of its parent element. You can set the width, height, margin, and padding attributes;

Line breaks only when an element in a row is full. The width varies with the content of the element. Setting the width and height attributes is invalid. Only the margin and padding margins in the horizontal direction are effective.

Common block-level elements include div, p, table, fieldset, form, ul, ol, dl, and h1 ~ H6, hr, pre, address, blockquote, center, dir, menu, noframes, and noscript.

Common inline elements include input span strong em a abbr acronym br img select textarea.

You can modify the value of the display attribute to convert the row block element and the Row Element.

Besides block and inline, the display value also has other values, such as list-item and teble-cell. However, IE6 and IE7 support few display types, so they are compatible with IE, only block, inline, and none display types are available.

IE6 and IE7 support but do not fully support the display: inline-block attribute, but standard browsers such as IE8 + and FF support.

Display: inline-block: a block-level element in a row. It has the features of block-level elements. You can set the length and width, margin and padding values, but it is not an exclusive row, its width does not fill the parent element, but is the same as the element in the row. It can be placed in the same line as the element in other rows. It combines block-level elements with intra-row elements and is a very useful display type.

Enable display: inline-block for IE6 and IE7

HasLayout does not support display: inline-blcok IE6 or IE7 to simulate the display: inline-block effect. display is compatible with IE6, IE7, IE8 +, and Firefox: inline-block application. However, you must pay special attention to the following issues:

• In IE6 and IE7, the display: inline-block attribute is not recognized, but layout is triggered when the inline-block attribute is used in IE, so that the inline element has the display: table disease of the inline-block attribute.
• In IE5.5, inline-block is supported. You can use inline-block to layout objects without specifying the exact height and width ).
• The inline-block attribute of IE6/IE7 is only for native default inline elements (span, a, em ......) valid. For block-level elements (div, p, ul ......) invalid. In IE 6 and 7 inline-block works only on elements that have a natural display: inline. IE doesn' t apply the value inline-block for the CSS display property on HTML elements that default to block level.
• Two conclusions: 1. IE6/7 does not recognize inline-block, but triggers layout, which is the same as that of inline-block. 2. IE6/7 does not fully support inline-block and is only valid for inline elements.
• Check the official statement to confirm your understanding of inline-block. The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.
• The following table lists some CSS attributes and their values. Once the following attributes are set, layout of the element is triggered:

CSS propertyValue

Display inline-block

Height any value

Float left or right

Position absolute

Width any value

-Ms-writing-modetb-rl

Zoom any value

• Extended question: How can I implement the display: inline-block effect for block elements in IE?

There are two methods:

1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows:

Div {display: inline-block ;}

Div {display: inline ;}

Note: in IE, display: inline-block only triggers layout of the element. For example, if you give the display: inline-block to the div, you can only ensure that the div has the features of the block element (you can set the width and height), but it is still row layout (generate line breaks ). Next, set display: inline to change the layout of this div to inline layout (no line breaks are generated ).

2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (zoom: 1 can be used ). The Code is as follows:
Div {display: inline; zoom: 1 ;}

HasLayout

HasLayout was designed to assist the Box Model of block-level elements. It is used for block-level elements. If it is used for row elements, some special effects will be triggered. (In combination with the above red font)

HasLayout can be triggered when the width and height values of the width and height attributes are set, but sometimes it has side effects. Currently, zoom: 1 is commonly used to trigger. when very few very complex css settings are ineffective, hasLayout needs to be triggered using a more powerful position: relative.

Haslayout is an internal component of the Windows Internet Explorer rendering engine. In InternetExplorer, an element either calculates the size and organization of its own content, or relies on its parent element to calculate the size and organization content. To adjust these two concepts, the rendering engine uses the hasLayout attribute. The attribute value can be true or false. When the hasLayout attribute value of an element is true, we say that this element has a layout ).

See: http://baike.baidu.com/view/2945869.htm

Http://www.cnblogs.com/yupeng/archive/2011/04/11/2012996.html

Series knowledge links

[Original] Web Front-end development practices-Reading Notes HTML section

[Original] Web Front-end development practices-JavaScript part of Reading Notes

[Original] JavaScript Knowledge series