A few tips on front-end code

Recently, we have been working on a project in the later stage. We usually mainly do someCodeThis article focuses on front-end code optimization issues, including CSS and Js.

I. CSS

1) The Inline and inline elements do not work for some CSS elements, such as margin-top, margin-bottom,Vertical-align, overflow, height, width if it is an inline element, then setting these attributes does not play a role at all, because the inline element itself has no height.

Code like this: <span style = "margin-top: 10px; Height: 100; width: 100 "> </span>

2) block elements, block elements, as the name suggests, are block elements. Some people add a property width: 100%. I think this is unreasonable. It is 100%, why add more.

This type of element does not work for vertical-align.

3) If float or position: absolute is set, vertical-align and margin are not supported. Because they are separated from the document, they cannot be vertically centered.

4) The haslayout attribute is triggered by ZOOM: 1. However, if the haslayout attribute is also triggered by the height or width, this ZOOM: 1 is not required. Same

Many of you wrote the following <span style = "display: inline-block; * display: inline, * ZOOM: 1"> </span>: * display: inline, * ZOOM: 1 can be removed, and display: inline-block can play this role. The haslayout attribute is triggered in IE6 and 7.

Ii. js

1) Some Common regular functions are processed in an array.

2) There are multiple cases where different branches appear in the value-based form and are generally processed in three categories.

3) There are many different values in the assignment form. The regular expression is used to process the Baidu. Format function in TANGRAM.

4) determine whether or not there is and then execute the command. The & symbol is used to determine whether or not there exists.

5) data-based development, usually written as a small data template, and then render data

6) use an asynchronous interface to bind data to events, which is superior to the ID binding mode in the form of class. Because the ID may not exist, an error is reported.

7) concatenate strings in the form of an array join ()

8) When looping the array, the length of the array is obtained.

9) array assignment arr [l] = ele

3. How do I write CSS and debug JS?

1) Get the PSD. In standard mode, it is adjusted in chrome and Firefox to be exactly the same as the design.

2) Check the effect in IE6, adjust some CSS, and write some hack.

3) Check the effect in IE7 and 8. In special cases, special handling is required.

4) debug JS, debug it on the chrome console, search for keywords, and perform one-step tracking to locate the problem.