An introduction to fluid layout, elements, and dimensions in CSS

This article introduces to you an introduction to fluid layout, elements and sizes in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Several web page layout methods induced by fluid layout

If you only do the PC side, then static layout (fixed width) is the best choice;
If If you are working on a mobile terminal, and the design does not have high requirements for height and element spacing, then flexible layout (rem js) is the best choice. Just adjust the font-size with one part of css and one part of js;
If PC and mobile are compatible, and the requirements are very high, then responsive layout is still the best choice. The premise is that the design makes different designs according to different heights and widths, and the responsive layout makes different layouts according to media queries.

The so-called "fluid layout" refers to the use of elements Various layout effects achieved by the "flow" feature. Because "flow" itself It has adaptive characteristics, so "fluid layout" is often adaptive. However, "fluid layout" is not the same as "Adaptive layout". "Adaptive structure" is a general term for a type of structure with adaptive characteristics, and "fluid structure" must be narrow Much narrower. For example, the table layout can also be set to 100% adaptive, but the table and "flow" are not together and do not belong to the "fluid layout".

In layman's terms,

width:auto;or formatting wide/high.

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

Correspondingly, the outer box has outer dimensions, and the inner box has inner dimensions. The external size box behaves as "making full use of the available space" and has the characteristics of "flow"

The so-called fluidity is not as simple as the apparent width of 100% display, but a kind of margin/border/padding and the mechanism for automatically allocating horizontal space in the content area

How to create a fluid box:

1. width:auto; block-level box

2. Format the width/height box

3. Pay attention to width

1. The area of ​​effect of the width value is related to the box-sizing of the current box. The default box-sizing: content-box;, the width value is equal to the box content width, and padding is added. When adding borders, the box occupancy will be expanded. box-sizing: border-box;, the width value is equal to the boxborder*2 padding*2 content, the occupancy remains unchanged, and the content area will change.

2. The calculation of the width and height percentage of absolutely positioned elements is relative to the padding box, which means that the padding size value will be included in the calculation. However, non-absolutely positioned elements are relative to the content. The

3. width:100%; setting calculated by the box will affect the "liquidity" of the box,

4. max-/min- width/height

Features:

1. Beyond!important; Beyond!important means that max-width will cover width, even if !important

<img  src="/static/imghw/default1.png" data-src="1.jpg" class="lazy" alt="An introduction to fluid layout, elements, and dimensions in CSS" >
img { max-width: 256px; }

此刻，图片展示宽度为256px

1. is added to width, it exceeds the maximum; exceeding the maximum refers to min-width covering max-width. This rule occurs when min- When width conflicts with max-width

.container {
    min-width: 1400px;
    max-width: 1200px;
}
此刻，container展示为至少1400px

Application:

/* 使用max-height实现任意高度元素的展开收起动画 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}

5. Understanding the basic concepts of the inline box model

1. Content area: The background color area selected by the text is used as the content area;

2. Inline box: bare text-anonymous inline box; wrapped by inline elements Belongs to the inline box

3. Line box box: Each line is a "line box box", and each "line box box" is composed of "inline boxes"

4. Containing box: composed of line box boxes

Ghost blank node:

"Ghost blank "Node" is a very important concept in the inline box model, specifically referring to: declaration in HTML5 document , all parsing and rendering of inline elements behaves as if there was a "blank node" in front of each line box box. this A "blank node" is always transparent, does not occupy any width, cannot be seen and cannot be obtained through scripts. It is like a ghost, but it does exist and behaves like a text node. Therefore, I call it a "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 the ghost blank node

Recommended related articles:

css box-sizing attribute (box model) Usage introduction

css3 realizes the moving menu button (menu) effect

Display in css: flex attribute implements the code for vertical centering of elements

The above is the detailed content of An introduction to fluid layout, elements, and dimensions in CSS. For more information, please follow other related articles on the PHP Chinese website!