Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Preface:

When reading a newspaper, it is easy to find that although there is a lot of content in the newspaper, the layout is still clear and easy to read after reasonable typesetting. Similarly, when creating a web page, in order to make the page structure clear and organized, also need to “layout” the page. The “viewable area” is the area of the web page where the main content resides. It is usually horizontally centered in the browser window, with common width values of 960px, 980px, 1000px, 1200px, etc.

First, layout process

In order to improve the efficiency of web page production, layout usually need to comply with a certain layout process, as follows: 1, determine the layout of the page (visual area). 2. Analyze the page structure. 3. Make HTML structure. 4, CSS initialization, then start to use the principle of the box model, DIV+CSS layout to control the various modules of the page.

Two, common web page layout classification

1. Table layout

Advantages:

(1) Table layout, which makes the structure position simpler; (2) For early learning, table is easier to understand; (3) More reasonable storage of data disadvantages:

(1) Tag structure is multiple and complex, affecting website performance;

(2) it is not good for search engines to capture information and affect the ranking of websites;

(3) Once the table is designed, it is difficult to show its new appearance through CSS

DIV+CSS layout

Web page HTML code mainly uses DIV to modularize the content, with CSS control its display effect. Float layout: float layout is the most basic and most commonly used attribute in DIV+CSS layout. It is used to implement multi-column function, which can realize the function of displaying multiple divs in a row.

The table layout is used before div+ CSS layout. Due to the shortcomings and shortcomings of table layout, then slowly adopted div+ CSS layout.

Advantages:

(1) Conform to W3C standards. Companies such as Microsoft are W3C supporters. This is the most important, as it ensures that your site will not be rendered obsolete by future web application upgrades.

(2) THE great advantage of CSS in the simple code, for a large website, can save a lot of bandwidth.

(3) Support browser backward compatibility, so that your website can have good compatibility.

(4) Style adjustment is more convenient. The separation of content and style makes it easier to adjust pages and styles.

(5) Search engines are more friendly.

(6) The separation of performance and structure makes it easier to divide and cooperate in team development while reducing their correlation

(1) Table layout, which makes the structure position simpler;

(2) For early learning, table is easier to understand;

(3) Data storage is more reasonable;

3. Flow layout (the default layout for HTML pages)

Features:

1. Block elements are distributed vertically from top to bottom within the contained element, because by default block elements are 100% wide.

2. Inline elements are displayed horizontally from left to right within the surrounding containing element. (Inline elements don’t dominate a line like block elements.)

4, Float layout

Features:

In the default layout, block elements are so overbearing that they occupy a single row, so now if we want to display two block elements side by side. You need to use float to do that.

5. Layer model

Features:

If I want a div to be on top of another div, we need to be able to use absolute positioning to accomplish this. The three positioning modes of the layer model are relative, absolute and fixed

3. Browser compatibility Settings

1, compatible generation

Because there are many types of browsers on the market, and the kernel of different browsers is not the same, so each browser has a certain difference in the resolution of the web page, which is also the main cause of browser compatibility problems, our web pages need to run normally in the mainstream browser, we need to do a good job in browser compatibility.

As the saying goes: No IE, no harm.

2. The image has 3 pixels (trick)

float display vertical-align

Img’s default display is inline-block, an anonymous block box that wraps the elements in the line and creates a gap.

Img {display: block; }

Img {float: left; float: left; } or img{float: right; }

Font-size :0;

Img {vertical-align:middle; img{vertical-align:middle; }

3, CSS set element transparency issues

The x value is 0 to 1, the smaller the value, the more transparent :0.5(not supported below IE8)

The x value ranges from 0 to 100, and the smaller the value, the more transparent it is.

4. CSS rounded corners

Earlier versions are not supported

Width: 100 px;

height:100px;

Boder – radius: 50%; (50%-100% effective)

5, CSS hack

CSS hack is to add some special symbols in THE CSS style, so that different browsers recognize different symbols (what kind of browser recognize what kind of symbols is a standard, CSS hack is to let you remember this standard), in order to achieve the purpose of applying different CSS styles. CSS hacks are used to solve the problem that some CSS properties display differently in different browsers. CSS style attributes are prefixed with Hack prefixes that only certain browsers can recognize

Element {color: #Awesome!\9;//IE8 IE9 * color: #999;
 / / IE7 _color: # EBEBEB; //IE6 }
Copy the code

Conclusion:

The above is the layout and compatibility of the whole process, the original is not easy, looking forward to your likes attention and forwarding comments 😜😜😜