Page Layout Basics

1. Layout plan

1. What is static layout

concept

        Static layout, also known as fixed layout, is a traditional web design. Page layouts use absolute length units and a fixed width. Regardless of the actual browser, the layout of the web page is always displayed according to the layout when the code was originally written.

Advantages: simple

Disadvantages: lack of change, not adaptive according to screen size

Applicable scenario: developing a specific web page for a fixed resolution, the easiest way

2. What is fluid layout

concept

        Fluid layout, also known as fluid layout or fluid layout, is a proportional scaling layout method that uses percentages in CSS codes to set widths, also known as percentage-adaptive layouts.

advantage

        The elements on the page will be automatically adapted and adjusted according to the screen resolution and size, but the overall layout remains unchanged. Flow layout is a commonly used layout method for mobile terminal development.

shortcoming

• If the screen scale span is too large, it will not display properly on screens that are too large or too small for its original design
• The text is fixed in px, and cannot adapt to different resolutions, and may display incongruously

Applicable scene

        Compatibility between different resolutions for similar devices (smaller resolution differences)

concept extension

        Various layout effects realized by using the characteristics of document flow can be called fluid layouts, which generally have adaptive characteristics. For example, in width:auto or format width/high school, affect the layout of content by setting margin/border/padding

        Although fluid layout has adaptive characteristics, it is not the same as adaptive layout. Let's put it this way, fluid layout must be adaptive layout, but adaptive layout is not necessarily fluid layout. For example, the table layout can be set to be 100% adaptive, but the table does not conform to the characteristics of the flow, so it does not belong to the fluid layout

3. What is adaptive layout

concept

        Create static layouts for screens with different resolutions, and each static layout corresponds to a resolution range. This layout is called an adaptive layout.
        Detect the screen resolution and switch to the corresponding static layout. Adaptive layout can be regarded as a collection of static layouts.

advantage

        Adaptive layout needs to develop multiple sets of interfaces to adapt to different terminals, so that pages can be displayed adaptively on terminal devices of different sizes.

        Create multiple static layouts, one for each screen resolution range.

Disadvantages : For different resolutions, multiple sets of designs are required, and the workload of design and development is heavy.

Applicable scene

        It is clearly necessary to adapt to a screen with a fixed resolution, and other resolutions will not be considered.

Concept extension:

        Adaptive layout can also be a big concept, and any layout with adaptive characteristics can be called adaptive layout.

4. What is responsive layout

concept

        Develop a set of pages to adapt to terminals with different screen resolutions. A set of pages is compatible with multiple terminals, rather than a specific version for each terminal.

Advantages: a set of pages, multi-terminal universal, if you are patient enough, the effect will be perfect

Disadvantages: To match enough screens, the workload is not small, and the design also requires multiple versions

Applicable scene

        Solve compatibility issues between different devices and different resolutions. It is generally used to solve the situation with a large resolution span, such as large resolution differences between PCs, tablets, mobile phones and other devices.

5. The difference between responsive layout and adaptive layout

The same point: both will detect the viewport resolution and adjust the displayed page

difference:

• Self-adaptive requires the development of multiple sets of pages, while responsive only needs to develop one set
• Adaptive screen adaptation is within a certain range (such as pc > 1024px / tablet 768~1024px / mobile < 768px), by detecting the resolution of the viewport, it can be judged to use different static pages
• Responsive is a set of pages compatible with different resolutions at the same time. By detecting the viewport resolution, the layout and content of the same set of pages are adjusted instead of making a specific version for each terminal, so there are many states to consider

 in conclusion

        Overall, responsive layouts are better than adaptive layouts. But adaptive layout is closer to reality, because you only need to consider fixing a few resolutions, while responsive layout needs to consider a lot of states.

6. What is rem+js layout

what is rem

        rem is a relative length unit, relative to the font size of the root tag, that is, the html tag. It is often used for mobile adaptation (one css + one js to adjust font-size), and it is not recommended for PC.

rem adaptation principle

Examples are as follows:

• Design draft width: 600px | Mobile devices: 600px

1）设置根标签字体大小 = 移动设备 / 设计稿高度 * 100 = 100px, 则1rem = 100px
2）设置一个盒子的宽度: width = 1rem（即100px），此时这个盒子屏占比为：1/6

• When the same code is running on a device with a screen size of 300px, JS needs to dynamically set the font size of html = mobile device / design draft width * 100 = 50px, that is, 1rem = 50px, and the screen ratio of this box is also 1/6, so This achieves the effect of mobile adaptation.

        It can be seen that the key to adaptation is to set the font size of HTML in JS: font-size= mobile device/design draft width * 100. So where did this formula come from?

• First of all, the mobile device/design draft width is the zoom ratio of the rendering effect relative to the design draft
• Then, mobile device/design draft width * 100
• Multiplying by 100 is to enlarge the font-size (=rem) by 100 times, because when the font-size is smaller than the minimum font size supported by the browser, the browser will set the font-size to the default minimum font. It can also be multiplied by other values ​​such as 50, but for easy calculation, it is generally set to 10 or 100. In this way, we only need to divide the width of the design draft such as width=50px by 10 or 100, and change it to 5rem or 0.5rem.

root tag font-size: 62.5%

• The default font size of the browser is 16px*62.5%=10px, so 1rem is 10px, which is convenient for calculation
• The reason why the font is not directly set to 10px is that some browsers default to not 16px, or the user modifies the default font size of the browser
• Setting font-size: 62.5% on the PC side may cause problems, because chrome does not support fonts smaller than 12px. When the calculation is smaller than 12px, it will default to 12px for calculation, resulting in inaccurate em/rem calculations of chrome
• You can try to set the html font to 100px, and the body to 16px, so that 0.1rem is 10px, and the body font is still the default size, which does not affect the default font size of elements that have not been set

Why is it not recommended to use rem on the PC side

• Compatibility issues
• The browser on the PC side has restrictions on the font size, and Google defaults to a minimum of 12px
• other......

7. How to choose the right layout

 2. Layout technology

1. Floating

concept

        When floating is set, the element will break out of the document flow and is called a floating element. The floating element moves in the specified direction, and it will stop when it encounters the border of the parent or adjacent floating elements.

features

        Floating elements generate floating flow, and all elements that generate floating flow are invisible to block-level elements. BFC elements, line-level elements, and text can all see floating elements. For example, floating elements will be ignored by other block-level elements, but the text in the block-level box will still give way to floating elements. Floated elements are visible to each other.

        The floating flow will affect the elements before/after it, remember to clear the floating when necessary

How to solve the problem that block-level boxes cannot wrap child floating elements (floating elements are invisible to block-level elements)

方法1：父级盒子也设置浮动
方法2：清除浮动
方法3：父级盒子设置为inline-block
方法4：父级盒子设置为BFC元素，BFC可以改变块级元素无视浮动元素的特性

how to clear floating

• Method 1: Add a label behind the floating element and add the clear:both attribute to it

<p style="clear:both"></p>

• Method 2: Use the pseudo-element after of the parent box (the pseudo-element of the floating element itself is invalid)

.wrapper::after {
    content: "";
    display: block;
    clear: both;
}

• Note that only block-level elements and row-level block elements can enable the clear attribute to take effect

Snapping of floating elements

• If the width of the parent element can display all floated elements, then the floated elements will be displayed side by side
• If the width of the parent element cannot display all floating elements, it will stick to the front from the last element
• If it cannot be displayed after snapping to all the previous floating elements, it will eventually snap to the left or right of the parent element

Use floating elements with negative margins

        In the holy grail layout, the left margin of the floating element is set to -100%, and the floating element appears to float up. This is how I understand it. Floating elements in the same direction will be arranged next to each other without covering, and when there is not enough space in the current row, there will be line folding.

        If there is enough space in the current line, the floating elements in the same direction must be displayed in one line.

2. Vertical-align knowledge points

• When there are multiple contents in a line, the default baseline alignment
• Various fonts, pictures, inline labels and other content that can be displayed have their own baselines, and the bottom of the lowercase letter x happens to be the position of the baseline
• vertical-align is only for inline elements, changing the alignment of inline elements, the default baseline alignment

3. Is absolute positioning fluid?

When positioning occurs in opposite directions at the same time, and there is no specific width or height in this direction, absolute positioning has flow characteristics.

4. The difference between floating and absolute positioning out of document flow

• Although the float is out of the document flow, it still occupies a position, which is semi-out of the document flow. If float is set for all elements, they will be arranged sequentially.
• Floating is invisible to block-level boxes, but the content in block-level boxes can see floating elements
• Absolute positioning is completely out of document flow

5. Holy Grail layout and floating, floating and negative margin

        To learn floating, you must understand the Holy Grail layout.

        The margin of the left column is set to -100%. In this way, due to the floating relationship, the left column can be placed on top, overlapped with the middle column, and occupies the left side. The right column automatically floats forward to the original position of the left column due to the upper position of the left column

6. Holy Grail Layout

• Features: The middle width is self-adaptive, the width of the content on both sides is fixed, the dom structure is first written in the middle column, and the middle content is rendered first
• Advantages: Render the main content area first, without adding additional dom nodes
• Disadvantage: The minimum width of the middle part cannot be smaller than the width of the left part, otherwise the left part falls to the next line

7. The connection and difference between the double-flying wing layout and the Holy Grail layout

• Like the holy grail layout, the main column is also placed at the front of the document flow, so that the main column is loaded first
• The two layout methods also have the same implementation, they are to let three columns float, and then form a three-column layout through negative margins
• The difference between the two layout methods lies in how to deal with the position of the main column in the middle: the Holy Grail layout uses the left and right padding of the parent container + the relative positioning of the two slave columns; the double-flying wing layout nests the main column in a new Use the left and right margins of the main column to adjust the layout in the parent block of

8. Contour layout

• Divided into true contour layout and pseudo contour layout
• The way of positive padding + negative margin is a pseudo-contour layout

9. CSS property direction

Specifies the direction of the text. ltr means left to right, rtl means right to left.

10. Box model

The composition of the box model

• The box model is divided into four parts: margin, border, padding, content
• If you add a background image to the box model, it will also affect the padding and border

The difference between the standard box model and the IE box model

• The difference is that when setting the width and height, the corresponding ranges are different
• The range of width and height attributes of the standard box model only includes content, while the range of width and height attributes of the IE box model includes border, padding and content
• In general, we can change the box model (content-box, border-box) of an element by modifying the box-sizing property of the element

11. Layer model【Positioning】

absolute positioning

• Positioning away from the original position. Under normal circumstances, there cannot be two elements at the same position. When an element becomes an absolutely positioned element, it will leave the original layer and go to the upper layer, and its original position can be occupied by other elements.
• Position relative to the nearest positioned parent, if not then position relative to the document
• If the width and height are set, the position where the positioning element is born is vertically corresponding to the original position
• Absolutely positioned elements will be automatically converted to inline-block (wrapped) inside
• Absolutely positioned elements also have fluid properties under certain conditions, that is, positioning occurs in opposite directions at the same time
• Unlike floats, absolute positioning is completely out of document flow

relative positioning

• Keep the original position for positioning
• Come to a higher level and position relative to your original horizontal position
• The position where the positioning element is born corresponds vertically to the original position
• Usually relative is used as the reference object, and absolute is used for positioning. Absolue can change the reference object arbitrarily, and the positioning is more flexible
• Relative positioning doesn't break out of document flow

fixedpositioning

• Completely out of document flow, positioned relative to the viewport

z-index

A positioning element represents a layer, z-index is used to set the layer, the larger the value, the closer to you. z-index is the z-axis, the starting point is the screen, and the positive direction extends towards you

12、BFC

What is a BFC element

The full name of BFC is Block Formatting Context, translated as Block Formatting Context, which is a concept about CSS rendering positioning defined by the CSS2.1 specification. BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the outer elements, and vice versa.

features

• CSS treats each element in html as a box, and it further believes that each box has a set of rendering rules. Normally, the rendering rules in the box are fixed, but you can trigger the BFC syntax by setting the box to follow another set of grammar rules.
• Like a layer of enchantment, forming a closed space, the internal and external elements will not affect each other

How to trigger the bfc of a box and turn it into a bfc element

• Method 1: position:absolute
• Method 2: display:inline-block
• Method 3: float: left/right
• Method 4: overflow:hidden

Purpose of BFC

• It can be used to solve the impact of floating, and it can solve margin collapse...
• The main purpose is to achieve a more robust and intelligent adaptive layout

13. margin collapse

Phenomenon

Margin in the vertical direction, the parent and child elements (block) are combined together, and they will take the largest value

solution

• Add border-top: 1px solid red to the parent element; (not recommended, 1px more for nothing, there is an error)
• Change parent element to BFC element

14. Margin merge

Phenomenon

The margins in the vertical direction of the elements (blocks) of the sibling structure are merged, and they will take the largest value

solution

• Add a BFC element as a parent to one of the elements, or add two separate parents, but sibling elements cannot be under the same parent. This solution is not recommended. HTML is a structure, which is equivalent to the reinforced concrete structure of a building. You cannot add meaningless HTML casually.
• If the width and height are explicitly set in the siblings, converting one of them to a row-level block element can also solve the problem, but not both

15. Types of CSS selectors

• id selector
• class selector
• tag selector(div,h1,p)
• descendant selector (h1 p)
• adjacent descendant selector (child) selector (ul>li)
• Sibling selector (li~a)
• Adjacent sibling selector (li+a)
• attribute selector (a[rel="external"])
• Pseudo-class selectors (a:hover,li:nth-child)
• Pseudo-element selectors (::before, ::after)
• wildcard selector (*)

16. CSS weights

17. What is document flow

Flow is actually a basic positioning and layout mechanism in the CSS world, which can be understood as a set of physical rules in the real world. Document flow is like a stream of water designed to guide the arrangement and positioning of elements.

18. Table label

overview

The table tag has appeared before the birth of CSS. Table has its own world, and the characteristics of flow are not applicable to table. Not recommended.

shortcoming

• The number of k files in the table layout is more than that of the DIV+CSS layout
• The table must be displayed after the page is fully loaded, and the table will be blank before the page is fully loaded. The div is displayed line by line, and it can be displayed while loading without the page being fully loaded.
• Tables are used for non-table content, which does not meet the semantic requirements of tags and is not conducive to SEO
• The nesting of table is too much, it will be more concise to use DIV code

alternative plan

If you really need a table layout, use display:table instead, which almost corresponds to the elements of the table system

3. Others

1. A special case of adapting to multi-resolution

        If there is a multiple relationship between multiple resolutions, you can only produce one set of designs, and use scaling and media queries for the rest of the resolutions.