「译」CSS之展示与布局 Display and Positioning

译自：codecademy

Flow of HTML

浏览器会从左到右边，从上到下，渲染没有CSS的HTML elements，也被称为 flow of elements in HTML.

CSS也有可以有关改变浏览器排布elements的properties。其明确了一个element在页面中应当位于何处，它是否应当与other elements共处一行，及其他相关属性。

本篇介绍了以下5个properties：

position    display    z-index    float    clear

Position

block-level elements

Block-level elements 对整行宽度创造了一个block，它防止 other elements 与其出现在同一水平空间内。

值得注意的是，block-level elements只占其自己所在那一行的空间，并不覆盖其他elements，它的默认位置是在浏览器左边。通过设置position property， 你可以改变 the default position of an element。它包含以下values：

static

static - the default value (it does not need to be specified)

relative

这个value使得你可以相对于(relative) 它的 default static position 来  position an element。

.box-bottom { 

 position: relative;

}

尽管上述代码指导浏览器去expect a relative positioning of the div，但是它没有明确那个div应该放在哪。（也就是具体放在哪？）

.box-bottom { 

 position: relative;

top: 20px;

left: 50px;

}

在上例中

被2个 offset（边距） properties 设置了位置，它一共有4个属性：

top - moves the element down.

bottom - moves the element up.

left - moves the element right.

right - moves the element left.

上例中，相对于其 default static position（下图虚线框处），the 

向下移动了20px，向左移动了50px。

注意，如果 position property 被设为static （default），offset properties 将不再生效。

Position: Absolute

当一个 element 的 position 被设为 absolute 时，all other elements 将会忽略它，就像它不在页面上一样。而该 element 将会根据它最近的 positioned parent element （设置了position属性，且其value不是static）来定位。（若没有，则根据定位）

.box-bottom { 

     background-color: DeepSkyBlue;

     position: absolute; 

     top: 20px; 

     left: 50px;

}

在上例中， the .box-bottom 

会从左上角向下、向右移动。若不设置 offset properties ， the top box 将完全被 by the bottom box 覆盖。请看下方图片:

absolute

Position: Fixed

When an element’s position is set to absolute,其位置会随着滚轮而滚动。若需固定某个元素的位置，则需要将其 position 的值设为 fixed 。（常用于导航栏）

.box-bottom { 

 background-color: DeepSkyBlue;

     position: fixed; 

     top: 20px; 

     left: 50px;

}

fixed

Z-Index

当页面上的boxes设置了不同的position时，它们可能会互相覆盖，导致其content难以阅读。

.box-top {

    background-color: Aquamarine;

}

.box-bottom {

    background-color: DeepSkyBlue;

    position: absolute;

    top: 20px;

    left: 50px;

}

上例中，当页面滚动时，.box-bottom

会忽略 .box-top

，并将其覆盖。

当elements相互覆盖时，The z-index property 控制 an element 在页面上应该多靠后或多靠前（PS图层）。

The z-index property 只能为integer value（整数值）。

上例中，我们之所以设置了the .box-top position to relative ，是因为z-index属性对 static elements 不会生效。The z-index of 2 使得 .box-top element 移到前面一层。因为它比 .box-bottomz-index, 1 更大。

如上图, 你会看到 the top box 已经移到了 the bottom box 的前面。

Display

每个HTML elements 都有 a default display value ，其决定（dictate）了该 element 是否与 other elements 共用一个 horizontal space。

Some elements 填满了整行宽度，无论其 content size是多少。Other elements 则视 their content 所需，来占用相应的 horizontal space ，他们可以横向紧挨 other elements。

In this lesson, we’ll cover three values for the display property: inline, block, and inline-block.

Inline Display

某些 tags, 如 , , and ,被称为 inline elements，其 display 属性的默认值为 inline。

Inline elements 有一个紧紧包裹着 their content 的 box，它仅占据所需空间来展示，不需要在其他elements后面另起一行。这些 element 的 height and width 无法被CSS文档指定。例如：

上述代码将显示为：To learn more about inline elements, click MDN documentation.

Display property 可以使得任何（any）element 变为 inline element，包括那些默认值不是 inline 的 elements，如： paragraphs, divs, and headings.

The CSS in the example above will change the display of all

elements toinline. The browser will render

elements on the same line as other inline elements immediately before or after them (if there are any).

上图中，所有

elements 将变为 inline elements，浏览器将在一行渲染所有

elements 和 other inline elements ，如果它们是紧挨着的话（ immediately before or after them ）。

Block Display

Block Display 在默认会占满整行宽度，称为 block-levele elements.同时，它们的width属性可以被设置。除非有其他方面的（otherwise）的指定，否则其 height 是适应（accommodate）其content的。如heading elements(

through

),

,

and

。

即使内容不够，也将独占一行

Inline-Block Display

Display属性的第三个value是 inline-block。Inline-block display 兼有 inline and block elements 的特点。Inline-block elements 可以在一行内相互紧靠。同时我们也能通过width and height properties，来设定它的尺寸（dimension）。Images are the best example of default inline-block elements.

举例来说，下图CSS中的 

s 将会以指定的尺寸展示在一行。

上例中，3个包含文本内容的矩形的divs将会展示在一行（如果提供足够的横向宽度的话），且每个的尺寸都是200px*300px。即使内部文本不需要这么大的空间，也是如此。

Display: Flex

这个display属性的值——flex，可以用来水平排列elements。

下例中，有一个class值为parent的div：

为了使div中的子元素横向排列，在CSS中可以使用：

第一行表示其子元素横向排列；

第二行确保没有child element 排出页面外；

第三行使子元素在页面水平居中。