Introduction to fluid layout, elements and dimensions in CSS

This article introduces you to the content of the CSS in the layout of the fluid, elements and dimensions of the introduction, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

One, the fluid layout leads to several kinds of Web page layout way

Layout Method	Description	features	Scene
Static layout	Static Layout, traditional web design, the dimensions of all elements on a Web page are all using PX as the unit. Regardless of the size of the browser, the layout of the page is always displayed as it was when the code was originally written. General need to set minimum width	Cannot make different performance based on user's screen size	Traditional PC Web page
Flow layout	Liquid layout, the width of the page element is adapted to the screen resolution, but the overall layout is the same. Representative Fence System (grid system)	The size of the main dividing area in the Web page using a percentage (with min-, max- attribute)	When the screen resolution changes, the size of the elements in the page changes but the layout does not change
Self-adapting layouts	Adaptive layout, which uses @media to define layouts for different screen resolutions, creating multiple static layouts, one for each screen resolution range	When the screen resolution changes, the position of the elements inside the page changes and the size does not change	-
Responsive layout	Responsive layout, a page on all terminals (various sizes of PCs, mobile phones, watches, refrigerators, web browsers, etc.) can show a satisfactory effect	Below each screen resolution there is a layout style where the element position and size are changed	Multi-terminal page
Flexible layout	Rem/em layout, the size of each element of the parcel text is made in Em/rem, while the size of the main partition of the page still uses a percentage or PX to do the unit	The ideal state is that the aspect ratio of all screens is the same as the original design aspect ratio, or the difference is not much, perfect fit	Mobile side

Conclusion:

1. If only the PC side, then the static layout (fixed width) is the best choice;

2. If the mobile end, and the design of height and element spacing requirements are not high, then the flexible layout (REM+JS) is the best choice, a copy of css+ a JS adjustment font-size fix;

3. If the PC, mobile to be compatible, and the demand is very high then the response layout is the best choice, if the design according to different aspect do different design, response based on media query to do different layout.

In the world of CSS, the concept of "fluid layout" is presented:

The so-called "fluid layout", refers to the use of the element "flow" of the characteristics of the various types of layout effects. Because "flow" itself is self-adapting, "fluid layout" is often self-adaptive. However, "fluid layout" is not equivalent to "adaptive layout". "Adaptive Layout" is a general designation of a class of layouts with adaptive characteristics, and "fluid layout" is much narrower. For example, table layouts can also be set to 100% adaptive, but tables and "streams" are not the same, and are not part of the fluid layout.

In layman's parlance, it is the width:auto; way to influence the layout of content by setting margin/border/padding in or in the format of wide/high school .

Second, why the List-item element will appear bullets

Each element has two boxes, an outer box and an inner box (container box). The external box is responsible for whether the element can be displayed on one line or only in a line; the inner box is responsible for width, content rendering, etc.

Display	External Box	Container Box	Performance
Inline-block	Inline	Block	Dimensions can be defined, one line displays multiple
Block	Block	Block	Dimensions can be defined, single-line display
Inline	Inline	Inline	Dimensions are undefined, one row displays multiple

The outer box has an external dimension and the inner box has an internal size. The external size box is characterized by "making the best use of available space" with "flow" characteristics

The so-called liquidity, not the look of the width 100% is shown so simple, but a margin/border/padding and content area automatic allocation of horizontal space mechanism

How to create a box with liquidity:

1. width:auto;The Block-level box

2. Format Wide/High box

Three, width attention point

1. The area of the width value is related to the current box, the box-sizing default box-sizing: content-box; width value equals the box content width, and the box placeholder expands when adding padding and border. , the box-sizing: border-box; width value equals the border*2+padding*2+content box, the placeholder is unchanged, and the content area changes.

2. Is that the absolute positioning of the wide-high percentage is calculated relative to the padding box, which means that the padding size value is counted, but the non-absolute positioning element is calculated relative to the Content box

3. width:100%;Will affect the "fluidity" of the box,

Iv. Max-/min-width/height

Characteristics:

1. Beyond the!important;!important refers to the width of the max-width, even if the width is added!important

img {max-width:256px;} At this moment, the image width is 256px

1. Exceeding maximum refers to min-width covering Max-width, which occurs when Min-width and Max-width conflict

. container {    min-width:1400px;    max-width:1200px;} At this moment, container shows at least 1400px

Application:

/* Use Max-height to implement the unwind animation for any height element */@mixin slide-vertical ($maxHeight, $initMaxHeight: 0, $duration:. 25s) {  Max-height: $initMaxHeight;  Overflow:hidden;  Transition:max-height $duration;  &.active {    max-height: $maxHeight;  }}

The basic concept understanding of the inner-linked box model

1. Content area: Text selected background color area as the content area;

2. Inline box: Bare text-anonymous inline box; the inline box is wrapped in inline elements

3. Line box: Each row is a "line box", each "row box" is also composed of "inline box"

4. Contains box: Consists of a row-frame box

Ghost Blank node:

"Phantom Blank Node" is a very important concept in the inline box model, specifically, in the HTML5 document declaration, all parsing and rendering of inline elements behaves as if there is a "blank node" in front of each box. This "Blank node" is always transparent, does not occupy any width, can not be seen and can not be obtained through the script, like a ghost, but it does exist in the field, and behaves like a text node, so I call it "ghost blank node."

The simplest case to prove the existence of ghost blank nodes:

div {background-color: #cd0000;} span {  display:inline-block;}

<div><span></span></div>

The height is not set in the code, but the final page has a height. This can be explained by a phantom blank node.