Summary of front-end Knowledge System (1)

We used the national day time to sort out the fragments of front-end learning and hoped to continue our efforts at the front-end.

The front-end is a very broad concept. Its fields include all aspects of the computing system. It can be said that all program development work related to user interaction is the front-end scope, this includes a digital display design or a mobile app. In general, the front-end refers to the development of the Web Front-end, and the learning of the front-end also begins with the knowledge of the Web Front-end.

This blog is intended for developers who do not have an entry into the front-end or who already have certain webpage encoding technologies, but do not have a clear understanding of the front-end knowledge system, the purpose is to organize the knowledge points used in the development of a common web page. Unlike other similar tutorials, this document does not separate HTML, CSS, and JavaScript, but is based on the production cycle of a Web page, describes the knowledge architecture involved by front-end developers in each step, so that they can be used easily.

1. layout methods and skills

Our knowledge system begins with page layout. Modern web pages are usually composed of layout units, and different layout methods of layout units determine different page layout methods. Therefore, let's first understand what a layout unit is.

Generally,A Layout Unit is a part of a page that can complete independent functions.For example, the title (header), the navigation bar (NAV), an article (Article), a form (Form), or a news list, segmentation of layout units may cause incomplete semantics of internal elements, or even incomprehension.

HTML5 adds a large number of labels to differentiate different layout units, including:

Article	Mark to define an article
Header	Mark the custom navigation link
NAV	Mark the custom navigation link
Section	Mark to define a region
Aside	Mark the sidebar that defines the content of the page
Hgroup	Mark the information of a block in the definition file
Figure	Tag defines a set of media content and their titles
Footer	Mark to define the bottom of a page or area
Dialog	The tag defines a dialog box (Session box) similar

In browsers that do not support HTML5, we can simply use a div to replace them without any other impact. They are the same as DIV in the default behavior of CSS.

From the perspective of page display, we can simply divide the page layout into the following types, but this is not absolute. Different ways may appear simultaneously on the page.

1.1. Stream Layout

Stream layout, that is, Document Stream layout. Currently, most web pages are stream layout. However, there is no official definition of the stream layout. My understanding is: the page subject content is set to width, and the layout is set to height or height adaptive, the page layout structure does not change with the page size.

The stream layout has the following features:

1. All layout units have obvious layers;
2. The size of the absolute positioning Layout Unit is fixed and usually appears in the body;
3. When it is passed, the float is cleared.

During the development of the stream layout page, we can use a limited horizontal or vertical line for cutting, using the features of the block-level element area branch, use float and clear float to differentiate columns (for details about this part, refer to more than 1.2 column la S)

Note:

Based on the document stream, we can easily understand the following positioning modes:

Floating elements do not occupy any normal Document Stream space, while the positioning of floating elements is based on the normal Document Stream, and then extract from the document stream and move it as far as possible to the left or right. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream ignore this element and fill in its original space. The element in the row of the same row is affected by floating, but the element at the block level is not.

In addition, we often encounter a question: does the separation of a Document Stream mean that this element is removed from the DOM tree?

No, the elements that are separated from the document flow (such as float) will still appear in the DOM tree using the browser review element.

The image is interpreted as follows: if you have an account and no place, you are still a local citizen.

1.2. Column Layout

Column Layout is a special case of stream layout. Modern web pages are usually not one column but multiple columns because their screens are getting wider and wider. In general, columns are implemented in floating mode. However, as the number and content of columns increase, we have a lot of new technologies and browser interfaces to achieve the effect of column sharding, in this section, we will explain in detail some of the methods and methods of column sharding:

1.2.1. Two-column layout (two-column fixed width)

In this case, we can consider the two columns floating and then the external layer floating closed.

1.2.2. Two-column layout (one-column fixed width and one-column adaptive)

In this case, we can float one column, and set the margin-left column with the same floating size as the other column, and then close the external layer.

1.2.3. Three-column layout (Adaptive between fixed width and center on both sides)

In this case, we can float two columns and implement one adaptive column, but the floating element must be written before the non-floating element.

1.2.4. Use absolute positioning instead of floating

We can also use absolute positioning instead of floating to split the columns, but this must ensure that the height of the non-absolute positioning element is greater than that of the absolute positioning element, otherwise it will collapse.

1.2.5. Use negative margin for page layout

Negative margin is a method provided by the browser to change the element location. It can cascade elements and change the actual size of elements in the Document Stream.

Set negative margin for the static element:

Negative margin of unspecified Elements

Negative margin of the positioning element (Case: center layout)

Negative margin of floating Elements

Using negative margin can easily implement multi-column layout, such:

1. Two-column layout (one-column fixed width and one-column adaptive)

2. Three-column layout (dual-flying wing layout)

3. Three-column layout (Holy cup layout)

4. High Layout

1.2.6. waterfall stream (Multi-column) Layout

In general, multi-column layout is also called waterfall flow layout. Many websites currently use waterfall flow layout to display layout units, and there are also many solutions for waterfall flow implementation. We will introduce them one by one below.

Solution 1: Multi-column floating

The advantage of this method is that the layout is simple, you do not need to specify the height of the element in the column, and automatic support is enabled, but there will also be a fixed number of columns, which is not easy to add or delete, and data cannot be loaded in order.

Solution 2: absolute positioning

Advantages of this method: Scroll and resize are convenient for adding data content, but you need to know the height of the data block in the column, and performance problems will occur during resize.

Solution 3: Use css3

This method is easy to use. You can directly define CSS, and the data can be loaded in order. During resize, the data is automatically rearranged according to the size. However, few browsers are currently supported, and the layout method is different from that of the conventional waterfall stream. The content of a single block may be truncated.

1.3. Full Screen Layout

It is usually used in management systems or some scenarios that simulate native applications. Element Non-stream layout, with an angle or edge as the anchor, without a certain structure layout, the screen is always full. In the implementation process, there are several methods:

1.3.1. table layout (internal elements can determine the height)

The entire page is a table. You can set appropriate values for the row and column to achieve the display effect.

Code implementation:

<table height="100%" width="100%" cellpadding="0" cellspacing="0"><tr height="120">                <td id="header" colspan="2" style="background:red;"></td>        </tr>        <tr>             <td id="aside" width="200" style="background:yellow;"></td>             <td id="main" style="background:green;"></td>        </tr>        <tr height="80">            <td id="footer" colspan="2" style="background:blue;"></td>        </tr>    </table>

It can be compatible with IE8. To be compatible with ie67, you need to use js to calculate the height of the middle row, or use the content to naturally open the middle row. This method damages the semantic nature of the page, and is suitable for system software that does not have high Seo requirements, such as management systems, or software that cannot be used in non-login status.

1.3.2. Absolute Positioning

Use absolute positioning for each element on the page. Refer to different anchor points respectively. The Code is as follows:

(Compatible with IE7 +, and JavaScript is required for IE6 compatibility .)

    <style>#header{  height:120px;  width:100%;  background:red;  position:absolute;}    #aside{  width:200px;  background:yellow;  position:absolute;  top:120px;  bottom:80px;}#main{  background:green;  position:absolute;  top:120px;  bottom:80px;  left:200px;  right:0;}#footer{  height:80px;  width:100%;  background:blue;  position:absolute;  bottom:0;}</style>

<Div id = "Header"> </div> <Div id = "aside"> nihao </div> <Div id = "Main"> </div> <Div ID = "footer"> </div> is compatible with IE7, to be compatible with IE6, You need to dynamically calculate the width and height of the main element. However, the semantics is much better, and the main element can use IFRAME conveniently.

1.4. Responsive layout:

The implementation of responsive layout mainly depends on the media query provided by css3. The following table lists all currently supported media queries.

Support for different devices:

Support for Retina

The use of responsive layout can make the page more suitable, but the development cost is high, the page loading time is long, relatively more suitable for pages with poor functionality.

Summary of front-end Knowledge System (1)