# Original # Thinking of front-end layout Foundation and mobile application

Directory:

1. Historical and developmental changes

2. New structural elements of HTML5

3. The way of layout based on CSS

   • Consider screen resolution
   • A few nouns about the layout
   • Basic layout style Properties
4. Other layout-related
   • CSS Framework
   • Consideration of human reading comfort
   • The purpose of CSS concrete attribute creation and the thinking of the late use and meaning deviation

1) Historical and developmental changes1

The first page of the 1991 was born with simple text and links, with fewer and simpler elements involved, and designers later discovered that table could be a better presentation of Web content and then the table layout era appeared.

With the development of the specification, the definition of block-level elements and inline elements appeared, and 2000 years later the Div layout era was introduced. Most page layouts are now based on Div and CSS2 implementations.

Now, ushered in the era of HTML5+CSS3, some layout through simple tags and attributes can be achieved, but there is a certain browser kernel support and compatibility differences, can be applied according to the actual development situation (such as columns[article Multi-column) now applies to mobile browser 2 ).

thinking ?? ：

An important point of knowledge, structure and style complement each other together to form a layout. According to the current development situation WebKit kernel to CSS3 support better, through the current mobile phone market share report analysis, it is not difficult to see most mobile browsers are using the WebKit core, which allows mobile products to practice more Css3 effect, At the same time, the new attempt of CSS3 property brings many conveniences to front-end development.

2) New structural elements of HTML53

<HEADER>, structure body head/article title (emphasizing this is the header of an article);

<nav>, mark some links of the collection body, commonly used as navigation bar/sidebar links, etc., with a guide to the nature of the link can be used;

<section>, denotes an area, a section of a book, a working area of a webpage, etc.;

<article>, representing an independent and complete block of relevant content;

<aside>, which is used to denote markup, sidebar, abstract, reference and other commonly used supplemental content;

<footer> The end part of the structure body;

thinking ?? ：

Compared to the first two layout stages, the layout of the structure of the label from a single table,div to today's multiple structural labels, so that the layout more semantic, while the We also have to think about whether the layout will also be constrained by too much emphasis on structural semantics in the layout of CSS flexibility (here you can do a deep thinking)?

3) CSS-based layout-3.1 Consider screen resolution

In the previous page layout was based on the 800*600 resolution as a benchmark design, with the popularity of large-screen display began on the basis of 1024x768, some of the more famous CSS frameworks (such as 960Grid) are based on the 1024 width of the most perfect 960px design, Microsoft started the design based on the 1024 standard in 2007, and Apple began its revision in 2008 with 1024 as the design basis (these are 4:3 of the screen scale), which has a serious flaw in the layout of fixed pixels--lower resolution hides a portion of the display space, a horizontal scroll bar appears , which is now in the broadband era (with a majority of 16:9), underscores another shortcoming-a higher resolution will waste part of the display space (the white screen area increases). Web applications need to focus on the use of space, so the 100% full screen layout is more suitable for such needs.

--3.2 several nouns about the layout4

Fixed layout (fiexd)-The way a page is laid out in pixels, regardless of how the window changes the content width remains constant, there are certain limitations, such as a horizontal scroll bar (mentioned above) that appears with a width of 1024 at 800.

Flow layout (Fluid)-width design in percent of the layout, most of the height is fixed with PX, can be based on the visible area (viewport) and the parent element of the real-time size adjustment, as far as possible to adapt to a variety of resolutions; often with Min/max-width Such properties control the size flow range so as not to be too large or too small to affect reading.

Resilient layout (Elastic)-relative layout with EM or REM units, more flexible relative% percentages, and support for normal display of browser font sizing and zooming. Because EM is relative to the parent element The reason is not widely popularized.

Responsive layout (responsive)-use @media media queries to switch different styles for devices of different sizes and media. The excellent response range is designed to give the device the best experience within the range, and the actual or fixed layout under the same device.

Adaptive layout (Adaptive)-typically using a @media media query and grid system to layout with relative layout units, is actually a comprehensive response, flow, and so on, the above-mentioned technology through CSS to a single page different devices return different styles of technology collectively. Adaptive has almost become the standard for excellent page layouts.

Flexible box layout model (flexible box)5-A new layout method is proposed in the CSS3 specification. The purpose of this layout model is to provide a more efficient way to lay out, align, and allocate space for items in a container. This layout can also work when the item size is unknown or dynamic, to provide maximum flexibility for the box-like model. So far, the layout model has been supported in mainstream browsers.

Because the elastic box model specification itself has many different versions, there are some inconsistencies in the browser's support for the specification. The browser supports a total of 3 different version specification syntax:

* NEW specification: The syntax of the latest version specification, which is "Display:flex".

* Intermediate Version: The 2011 unofficial norm of the grammar, namely "Display:flexbox".

* Old specification: The 2009 norm of the grammar, namely "Display:box".

Browser support for flexible box layout models--

thinking ?? ：

From the point of view of solving the problem, the traditional layout optimal method adopts the adaptive layout to synthesize other layout modes to achieve the goal of the product quickly. Using new technology on the right project is a more efficient way to implement the flex layout on the mobile side, and it is now possible to take a step back in the development process.

--3.3 Basic Layout style properties

Positioning (position):

Static-The default value (when not set), at which time the top/right/bottom/left is invalid;

Absolute positioning (absolute)-positions the upper-left corner of the object relative to the object's parent relative, if not relative, relative to the upper-left corner of the browser, if not present in the topmost body;

Relative positioning (relative)-positioned relative to the upper-left corner of the position where the object originally appeared;

Fixed positioning-the element fixed in the browser's viewable area does not scroll with other elements.

Float (float)7:

Often used in multi-column layout, because the use of floating after the object will be out of the document flow, so to ensure that the layout is normal to use floating immediately after the object to clear the floating operation; initially used for the picture to wrap text, any element in the CSS can be applied floating, floating elements themselves generate a block-level box, If the width is not set, the width is supported by the content.

None-The default value, the element does not float;

Left-floats to the ieft;

Right-float to the left;

Inherit-inherits the parent float.

Margins (margin):

Declares the value of the outer margin of the element, sets the direction top/right/bottom/left (clockwise), allows the use of negative values, the block-level element vertically adjacent margins are automatically merged, the inline element is set on the bottom margin is not valid, floating element margins are not merged .

Internal margin (padding):

Declare the value of the inner margin of the element, set the direction above, allow the use of negative values; inline elements are automatically merged vertically, the inner margins of the floating elements are not merged, and the padding values are not calculated within the width of the element settings .

Border (border):

Declare the width/style/color of the four-sided border, or you can set a side box individually, and the inline element is more than the text content, and the border is coincident and visually messy .

Display6:

In the traditional layout mode, we often use the display corresponding value has block, none, inline three values; blocklayout is the block in the vertical direction from top to bottom, and the inline layout is arranged horizontally, none for hiding .

Unit 8(The following are only part of the common units):

* px, relative to the display screen (Windows user resolution is typically 96 pixels per inch)

* EM, relative to the font size of the text within the current object (any browser default size 16px, so 1em=16px,10px=0.625em, so we can use this formula to set the specific width)

* New font size unit introduced by REM,CSS3, which is relative to the root node (or HTML node) of the font size

?? initial setup font-size:62.5%; not available for PC-side environment 9, for Google Chrome, the default size of less than 12 pixels is still displayed in 12px, so 62.5% will be problematic, while the mobile WebKit browser support is set less than 12px font .

FlexTen:

Elements that use the flex layout, called Flex container. All of its child elements automatically become container members, known as Flex items (Flex Item).

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start , the end position is called main end ; the start position of the intersection axis is called cross start , the end position is called cross end . The project is arranged by default along the spindle. The main spindle space occupied by a single item is called the main size occupied cross-axis space calledcross size。

?? When set to flex layout, the float, clear, and vertical-align properties of child elements are invalidated.

?? At present, the support of the Android browser to flex is 4.4+ version, as of March, Google released the market share of the 4.1-4.3 almost occupy about 20%, as time goes on declining, the new version of the share gradually increased.

thinking ?? ：

We can know from the above that the CSS layout is changed by using different structures and attributes, but only one is more suitable for the current production needs. After learning the layout of this knowledge, according to the development of the product, in combination with the production of the actual consideration of which (or use), such as elastic box model, because the modern browser support is better, so mobile development is appropriate.

4) Other layout-related--4.1 CSS framework One

CSS frameworks are a collection of CSS definitions that can be used conceptually in your Web projects, and are well-written by others. 960Grid is a grid-based CSS layout framework, as long as you follow some simple rules (in fact, the Class), you can quickly design a 960px width of the page structure.

--4.2 the consideration of human reading comfort

Studies have shown that it is generally considered that the 65~75 of each line is the most suitable reading length, so there are some limitations when designing the layout, and the site is unable to take full advantage of the opportunities given by widescreen. Over the years, through the continuous practice of magazines and newspapers, the use of multi-column layouts has allowed the flow of content, which solves the problem of long text processing and how to put many materials into limited space. (There is the relationship between the layout design of books and the comfortable reading.??? There is time to discuss and study alone.

--4.3 The purpose of the creation of CSS concrete attributes and the thinking of the later use and meaning deviation

An attribute (or item, concept, etc.) is widely used because it solves the problems faced by most people today and is recommended and reused. An initial project in its development process is likely to deviate from the beginning of the meaning, I think this is not necessarily a bad thing, depending on the project is good or bad can refer to its emergence as the acceptance of the public and widely used. I understand that innovation is to solve problems, and continuous innovation is to continuously improve the efficiency of problem-solving. An important point to summarize is to solve problems for current production and to solve problems with high efficiency and quality. If that is the case, it is good to have the benefit of the recipient no matter what it was originally intended for and what it meant. The benevolent see of the beholder.

Reference:

1 "The-web of the front-end design of the great Qiao Non-work" chapter 3.2/3.4 (2,4)/3.5 (2)/5.1

2 "COLUMNS-CSS3 Quick check Manual" http://www.css88.com/book/css/properties/multi-column/columns.htm

"What are the kernel standards for mobile browsers" HTTP://DWZ.CN/3E89ZX

3 "HTML5 of Div, article and section in" Http://edu.cnzz.cn/201308/922645d5.shtml

4 "web App Adaptive Solution Summary keywords resilient layout rem" http://www.cnblogs.com/breakdown/p/4231708.html

"The REM of web app change" http://isux.tencent.com/web-app-rem.html

5 "In-depth understanding of CSS3 flexible Box layout model" http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox//

6 "Display Property Reference manual" Http://www.css88.com/book/css/properties/layout/display.htm

7 "Css-float floating in-depth research, detailed and expand a" Http://dwz.cn/1k76fK

"css-float floating in-depth research, elaboration and expansion of the two" http://dwz.cn/3jLW9q

8 "CSS length values and units" http://www.css88.com/book/css/values/length/index.htm

"The Elastic layout of EM properties in CSS" http://www.jb51.net/css/77406.html

"CSS3 New font size unit REM" http://www.cnblogs.com/mguo/archive/2013/03/08/2949451.html

9 "Chinese version of Chrome browser does not support font size less than 12px" http://www.cnblogs.com/longgel/archive/2010/03/29/1699426.html

"Chrome browser does not support solutions for fonts below 12px" http://www.cnblogs.com/dyllove98/archive/2013/08/04/3237042.html

Flex Layout Tutorial: Grammar Chapter Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

"I just want to use CSS" http://www.alloyteam.com/2016/01/let-see-css-world/

"CSS frame 960Grid" http://blog.chinaunix.net/uid-22414998-id-2878529.html

# Original # Thinking of front-end layout Foundation and mobile application