android布局等量宽度,CSS Layout

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

几种 CSS 布局Normal flow

Flexbox

Grid

Floats

Positioning

Table layout

Multiple-column layout

针对具体场景使用合适的布局方式Each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. By understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task.

Normal flow

正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

FlexboxFlexbox is the short name for the Flexible Box Layout Module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column.

解决的问题：在父内容里面垂直居中一个块内容。

使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。

使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

GridWhile flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.

Grid 布局是最具实验性的 CSS 布局特性，它在浏览器中还没有得到广泛的支持。它的概念是通过定义一个网格来简化布局过程，然后定义内容的哪些部分位于网格的对应区域。

Floats

float 的主要用途是布置出多个列、浮动文字以环绕图片等Floating an element changes the behavior of that element and the block level elements that follow it in normal flow. The element is moved to the left or right and removed from normal flow, and the surrounding content floats around the floated item.

Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.

PositioningPositioning allows you to take elements out of the normal document layout flow, and make them behave differently,

四种定位类型：Static positioning、Relative positioning、Absolute positioning、Fixed positioning、 Sticky positioning。

Multiple-column layout

CSS 多列布局，可以更容易地定义多列文本。The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.

Table layout

CSS 表格主要用于布局表单元素，但早期的 web 开发者也将其应用于网站的整体布局。

Table 布局能实现的场景 Flex 布局都能够实现，但在 IE8 和 IE9 的场景下还是有 Table 布局的使用场景的。

两种类型的表格布局HTML Table(

CSS Table(display: table等相关属性)

其他布局

圣杯布局

相关文章