Second discussion-responsive design, layout techniques, CSS performance optimization, CSS preprocessing

Second discussion

"Responsive Design"

Centrally create the picture layout size of the page, intelligently based on user behavior and the device environment used (System platform, screen size, screen orientation, etc.) corresponding to the layout.

Responsive layout:

Meta Tag utility: Set layout width equal to device width, layout viewport equals metric viewport

<name= "Viewport"  content= "Width=device-width,initial-scale=1"  >

"Layout" "

"Center Horizontally"

I. Combined use of text-align and Inline-block:

Text-align property: Sets the horizontal alignment of text within a block-level element by specifying which point the row box is aligned with. (thus child is the text inline element, the parent is a block element, can be set by display).

. Parent {text-align: center;} //parent element. Child {display: inline-block;} //child elements

However, this method compatibility is better, IE browser receive. However, the code is large and the parent and child elements are set.

Second, use margin:0 Auto settings

. Child {width:100px; margin:0 auto;} //must have width

Margin sets the center of the block-level element. Good compatibility, but you need to set the width.

Three, display:table set

. Child {display:table; margin:0 auto;}

This method only needs to set itself, the code is short. However, in the IE6, 7, the need for adjustment.

Iv. use of absolute positioning

. Parent {position: The negative value ofrelative/* or utility margin-left can be achieved by half the width of the box, but it is necessary to know the width of the box, but good compatibility */
. Child {position:absolute; Left:50%; transform:translate ( -50%);}

Transform:translate. Move the transform in the direction and distance of the translation. To put it simply, how much distance to move the object in a certain direction.

But this method is not good compatibility, to IE9 above.

"Center Vertically"

First, Vertical-align method

/* The first of these methods */ . Parent {display:Table-cell; vertical-align:Middle; height:20px/* the second method * / . Parent{display: Inline-block; vertical-align:Middle; line-height:20px;}

When using vertical-align, you need to set line-height or set Display:table-cell because the alignment baseline is marked with a line-high baseline.

Second, the use of absolute positioning

. Parent {position:relative;}
.Child {positon:absolute;  Top:50%; transform:translate (0,-50%);}

Note the difference from horizontal centering

"Horizontal Vertical Center"

First, the use of vertical-align,text-align,inline-block to achieve

. Parent {display:Table-cell; vertical-align:Middle; text-align:center;} . Child {display:inline-block;}

Second, the use of absolute positioning

. Parent {position:relative;} . Child {position:absolute; top:50%; Left:50%; transform:translate ( -50%,-50%);}

From the above, absolute positioning can be centered in any way, but also consider compatibility issues.

"Multi-Column Layout"

One, Zolietin wide, right column adaptive:

(1) Using Float+margin

. Left {float:left; width:100px;} . Right {margin-left:100px;}

The test, if not the margin, must be set to height. IE6 will have a 3px bug.

(2) Using table implementation

. Parent {display:table; table-layout:fixed; width:100%;} . Left {display:Table-cell;} . Right {width:100px; display:Table-cell;}

Two-column fixed-width, one-row adaptive

(1) Using Margin+float

(2) using Float+overflow to achieve

. Left,.center {float:left:width:200px;} . Right {overflow:hidden;}

(3) using table to implement
Three, the two sides adaptive, the middle fixed width (Web page layout commonly used)

(1) Using Margin+float

. Left {width:100px;float:left;} . Center {float:left; width:100%; margin-right:-200px;} . Right {width:100px; float:right;}

(2) using table to implement

Four or one columns variable width, one row adaptive

(1) using Float+overflow to achieve

. Left {float:left; background-color: red; height: 100px;} . Right {background-color: Blue; overflow: hidden; height: 100px;}

No height setting is required. will be self-adapting.

Five, multi-column distribution

(1) Div+float

Six or nine the layout of the palace grid

(1) div+table

"CSS Performance optimization"

First, modular: To make the code highly reusable, improve development efficiency.

The module and the module should not contain the same part, if any, extracted, split into a separate module.

Second, CSS naming: in English. Size hump, underline and so on. The hump indicates that different words are distinguished, and the underscore indicates a subordinate relationship.

Avoid repeating the name, and add your own prefix to your code.

Third, the use of class: multiple combinations, less inheritance.

Four, up and down margin processing: If not sure the module's upper and lower margin is particularly stable, it is best not to write it in the module class, but use a combination of classes, separate for the upper and lower margin of the atomic class for margin (such as mt10,

MB20). The module is best not to mix margin-top and Margin-bottom, using one of them uniformly.

Five, low weight principle: Avoid abusing the self-selector. When the style settings for different selectors are conflicting, the style is set with a high-weight selector. The selector weights are the same as the nearest principle.

Weight principle: HTML tag is 1 (such as P), class is 10,id 100. CSS selectors ensure that the weights are as low as possible.

Using a sub-selector increases the weight of the CSS selector. The new class is better for maintenance.

VI, CSS Sprite technology: The site's multiple background images are merged into a large picture. Use the Background-position attribute to show the parts we need

Image loading makes an HTTP request, while using a CSS sprite reduces the number of HTTP requests. Reduce server pressure.

You can only merge background pictures. For pictures that are tiled horizontally and vertically, you cannot use CSS sprites, only or horizontally, or vertically. The layout should be as compact as possible.

Disadvantage: Reduce development efficiency and increase maintenance difficulty, whether use depends on website traffic.

Vii. CSS FAQ: (1) Coding style: multirow-readable, but will increase the size of the CSS file, one line of poor readability, but to improve the development speed, reduce the size of the CSS file. Recommended one-line.

(2) ID and class: The same page, the same ID can only appear once, but the class is unrestricted. The weight of the ID is greater than class. However, native JS provides the Getelementid () method, which does not support class.

Using the ID limits the extensibility of the Web page. In general, it is recommended to use class as much as possible, with fewer IDs.

(3) CSS Hack:ie conditional notation (best compatibility, increased development and maintenance costs)

Selector prefix method (enhanced maintainability, but not compatible, not for inline styles)

Style attribute prefix method (higher set, more streamlined code, more maintainable, but there is a compatibility risk, can be used inline style)

(4) solve the problem that the hover style does not appear after hyperlink access: A label four sort of states, the love hate principle, that is, L (link) ov (visited) e H (hover) A (active) te.

(5) Haslayout:ie browser's proprietary properties, used for the parsing engine of CSS. Many bugs are not automatically triggered by haslayout. The best solution: Zoom.

(6) block-level elements and inline elements: use display transformations.

(7) IE6, 7 does not support Display:inline-block.

(8) Relative, absolute and float: do not misuse.

"CSS preprocessing"

With a special programming language, adding some programming features to the CSS, the CSS is generated as a target file, and then the developer just uses that language for coding.

Second discussion-responsive design, layout techniques, CSS performance optimization, CSS preprocessing