Big web front end layout

Commonly used layouts Commonly used layouts are generally divided into the following categories:

The document layout(text)

Document flow is essentially a nomal Flow element characteristic of a document, block-level elements, and inline elements. Block-level elements: They have the effect of having a single line in the document. Block elements are arranged from top to bottom and have a default width of 100% of the parent element and a default height that is spread out by the content. Inline elements: Inline elements are their own size in the document flow and are arranged left to right by default. If there is not enough space for all inline elements in one line, they move to the next line and continue left to right. In document flow, the width and height of inline elements are by default separated by the content. What is document flow (document layout) Divides the form into rows from top to bottom, with block-level elements running from top to bottom and inline elements running from left to right on each row. Disadvantages: The PC page cannot be used on the mobile terminal, and the layouts of the two pages are inconsistent. Therefore, the mobile terminal needs to design a new layout and use different domain names for presentation

Liquid layout(float)

Float is generally used to line up block-level elements and display any element on the same row as float. If an element is set to float, the float element, regardless of what it was originally, becomes a row block-level element with a disolay: inline-block property float: Left Push left into the container along the top of the parent container. If it is stuck and cannot be pushed, judge whether the current position can display all the child container. If it can be done, if it cannot continue to find a space to push in. Out of the document flow, you need to clear the float, height collapse. Advantages: Clear the float. Clear the float so that the block-level box layout in the container of the parent element does not affect. Therefore, in the floating layout case, Finally, in the same structure, if a floating layout is used, all sibling tags of the same level should have a floating layout. The box width of the floating layout will adapt to the content width if it is not set

Locate the layout(position)

The relative attribute is removed from the document flow, but the placeholder is retained. The offset is relative to the normal document flow. The relative attribute is removed from the document flow. In the normal document flow of, its z-index value is >0 but the placeholder is retained, that is, the position is still retained in the normal document flow, and the subsequent elements cannot occupy the space and then are offset relative to their normal position. Absolute: Completely removed from the flow of the document, without retaining placeholders, and with elements positioned relative to their parent until position is set: The outer element of relative or fixed attribute (also including block element), if its outer element is not even set position attribute, then the positioning is relative to the HTML document for absolute positioning, not relative to the body positioning disadvantage: separated from the document flow, will lead to all subsequent elements separated from the document flow, can be used as line difference. Advantages: Allows elements to have inline-block width and height limits

Fluid layout(streaming)

The width and height of elements are expressed in percentage units. The width and height of elements are adjusted according to the screen resolution, and the layout does not change. Most of the width and height are fixed by PX, which can be adjusted according to the viewport and the size of the parent element. It can adapt to various resolutions as much as possible. Usually max-width/min-width and other attributes control the size flow range to avoid too large or too small affect the reading page. In the early history of WEB front-end development, this layout was used to deal with different sizes of PC screens (screen sizes didn’t vary much at that time), and it is also a common layout in today’s mobile development, but the disadvantages are obvious: The main problem is that if the length is too large, the screen that is too small or too large for its original design will not display properly on the screen. Width is defined in percentage (%), but height and text size are mostly fixed in PX. So under the big screen mobile phone display effect into some of the elements on the page width is pulled very long, but highly, text size is the same words, enjoy the very not harmonious Disadvantages: if the size is too big or too small on the screen can’t display properly advantages: compatibility is better, when the screen resolution changes the element size the same layout is the same

Elastic layout(rem/em)

Elastic layout is a layout introduced by CSS3 to replace some of the error-prone hacks used by previous WEB developers (such as float to implement lost layout). Rem is relative to the font size of HTML elements, while EM is relative to its parent element. Flexible layouts using REM units are popular on mobile. This type of layout is characterized by the em/ REM size of the elements surrounding the text, while the main area of the page is still measured in percentages or PX (as in “flow layout” or “static/fixed layout”). Early browsers didn’t scale the entire page, only allowing text within the page to be enlarged, in this case. Using em/ REM as a unit, you can scale the element that wraps the text as the text is scaled. Rem and EM differences: REM and EM are generated by adapting to different web page font sizes. Em is its parent element, which will cause a lot of inconvenience in practical application. Rem is always relative to HTML size, the root element of the page. The default font height of the browser is usually 16px, that is, 1em:16px, but the ratio of 1:16 is not easy to calculate. In order to make the unit EM/REM more intuitive, CSS writers often set the font size of the page and node to 62.5%. For example, when choosing REM to control the font, first set the font size of the root node HTML. Because the browser default font size is 16px*62.5%=10px. So one rem is 10px, which makes it easy to calculate. Disadvantages: Browser compatibility is poor to IE9 and above. Advantages: strong adaptability, in doing different screen resolutions of the interface is very used, can be arbitrarily according to the width, than the column of the width of the element, fast, easy to maintain. Simple, convenient and fast.

Adaptive layout(adaptation)

Multiple static layouts can be created. Each static layout corresponds to a resolution range. When the screen resolution changes, the position of the elements in the page will change but the size will not change. You can use (@media media query) to switch different styles for devices of different sizes and media. With excellent response range design, you can give the best experience to devices within the range. In the same device, the layout is actually fixed. When the screen resolution changes, the position of the elements on the page changes without changing their size

Responsive layout (BootStrap)

Define layouts for different screen resolutions and, within each layout, apply the idea of streaming layout, where page element widths automatically adapt to window adjustments. Responsive layout can be thought of as a fusion of the design concepts of streaming layout and adaptive layout. That is, create multiple streaming layouts, one for each screen resolution range. Responsive layouts have become almost the standard for good page layouts, with each screen resolution having a layout style where element positions and sizes vary from media query to streaming layout. Usually use @media media query and Grid System with relative layout units for layout, in fact, the integrated response, flow and other technologies through CSS to a single page to return different styles of different devices technology collectively referred to disadvantages: Media query is limited, that is, can be enumerated, can only adapt to the mainstream of the width and height, to match enough screen size, workload is relatively large, the design also needs multiple version advantages: adapt to PC and mobile terminal, if only enough patience, the effect will be perfect. The above is the common front-end layout, do not understand can be more query, browse, understand.

The above article is reproduced in five front-end layouts