Document Layout and positioning, Document Layout and positioning

Document Layout and positioning, Document Layout and positioning

Background:

The Web Excel project is continuing, and I have to do (o) since the beginning and the end of my project )! Write JS later and write Java later. It also requires the skills of the artist and product! Thinking is really hard to convert. I often write int num = 0 in JS, and JS cannot detect it. Today, we have studied Web Front-end technology, document positioning, and Box-sizing attributes, because there are many controls on this part of the project.

 

I feel that the most difficult part of the Web Front-end is the document positioning, which is more difficult to use than Swing and WPF. In Swing, multiple layout types can be used, such as BorderLayout, GridLayout, and BoxLayout, in addition, Java is a strong language. It is easy to use Java program control, regardless of relative layout or absolute layout. WPF is simpler. VS's visualization tools can be regarded as the "Most Powerful" development tool in history. It is also easy to drag and drop a set, modify the configuration file appropriately, and write C # code or something.

There are many ways to locate elements or document layout on the Web. In fact, it is not a good thing to use it too flexibly. At least for our development, flexible Document Layout requires us to have more experience, learn more information, and select the most "suitable" technology.

 

1. Table Layout

Table layout is the simplest and most well-known. Many beginners of Web development technology will use Table layout. Table layout is nothing bad, simple, and easy to control for beginners, basically, any structure can be "painted. Many Web visual editors also support Table la S.

 

2. Iframe Layout

I think this can be called a layout method, which is simpler than Table. The most common layout method of the background management framework is to split a page into multiple pages, which is also good. Although iframe is not required for many materials, many Web applications are still in use and suitable for use. For example, 163, such as office online, is applicable, although not necessarily for layout.

 

3. DIV + CSS layout

Currently, the mainstream layout methods, such as stream, relative, and absolute positioning, can be used to write very exquisite and efficient pages. DIV layout is more difficult than Table layout, and browser compatibility should be noted, otherwise the page may be messy. The advantages of DIV layout over Table layout can be found on the Internet, not to mention. I remember that I was asked about the difference between DIV layout and Table layout during an interview. The most important thing is that DIV is superior to Table layout and can be rendered by layer, while Table should be refreshed as a whole, so there will be a significant delay.

From the perspective of browser rendering, A td reflow of a table may lead to a reflow of the entire table, which is quite scary.

 

4. Technical Selection

In practice, there is no standard for choosing the layout method, and the Web Front-end itself is not so unified. What technology is used depends on the actual project, project cost and requirements, and three technologies are often combined. For example, we are using them now. External content pages are loaded using iframe technology, while content pages are in responsive layout using DIV technology. However, controls are first laid out using the Table framework, then, use DIV + CSS to draw and control locally, so as to ensure good page stability. When data needs to be displayed, it is very easy to use tables.

 

5. Three Methods for locating documents

In the layout of DIV + CSS, it is very important to locate the document in three types: normal stream, floating and absolute positioning, fixed positioning. The main understanding is that the display/position attribute of the element has been float. To make a precise definition, you must understand the Box Model, that is, the Box Model. This is very complicated. There are many online tutorials. First, you must understand the W3C definition, then let's take a look at the differences between IE and others. In fact, the Box Model is an explanation of the size of an element.

W3C clearly tells us that everything on the HTML page is a box. Through the display attribute, we can convert elements into different boxes, or use the none attribute, let it appear in the renderTree, and then use the position attribute to tell the browser who to locate the element, and finally use attributes such as float, top, and left, control specific content during positioning.

There is a Box-sizing attribute in H5, which has been supported by most browsers. Using this attribute, we can specify the element's Box model. In many cases, the box model using IE is very conducive to programming and computation. We hope that after specifying the width of an element, we will not consider its border, padding and other content in the program. This can reduce the complexity of the program.

Finally, the project currently works. To achieve the row and column freezing function, several hairs have been dropped in the past few days !!!