CSS 布局基础知识


Author: yifei / Created: April 30, 2018, 3:56 p.m. / Modified: April 30, 2018, 4:46 p.m. / Edit

布局

网页的布局是面向文档流的,也就是每个元素默认都是从左到右,从上到下依次排列的。当然就像文章一样,有些元素比如标题默认就会另起一行,并且单独占据这一行。

所有的元素都分为三类:inline、inline-block、和 block。

其中 block 元素占据了一行的位置,即使他们的宽度不够一行,并且他们有自己的宽度和高度,比如 h1 元素。

inline-block 结合了 inline 和 block 元素的特性,首先他布局是 inline 的,也就是不会另起一行,但是又可以设定单独的高度和宽度。

display: none 将会完全不渲染该元素, visibility: hidden 会渲染这个元素,只是在该显式的地方留下空白

使用 inline-box 的布局

定位

CSS 中元素的定位有如下几种,可以使用 position 指定

方法 说明
static 默认的定位方法,指的是在文档中的位置是静态的
relative relative to its static positions, if set(top, left, bottom, right)
fixed fixed to the viewport, if set(top, left, bottom, right)
absolute behaves like fixed, but relative to nearest non-static ancestor
float floated element will become a block element, but it will not occupy one row

使用 float 的布局

后续元素没有占据指定空间

元素浮动之后,它后面的元素就会去占据它的位置,然而我们往往并不想影响到后面的元素,所以应该指定它后面的元素清除浮动。

not stretching parent element floating elements will also not stretching the element containing it, to fix that, add overflow: auto to the parent element

盒模型

讨厌的 content-box 模型

width set width of the content, and

符合直觉的 border-box 模型

as shown by the picture, border-box width sets the entire width, contains border + padding + content

如下图所示,border-box 模型设定的快读包含了 border + padding + content

responsive design

query device width

@media screen and (mid/max-width: xxxpx)

set viewport

<meta name="viewport" content="width=device-width/320, initial-scale=0.5, maximum-scale=1, minimum-scale=3, user-scalable=no" />

记录 CSS 的一个坑

在 td 元素上无法使用 width

可以通过指定: table-layout: fixed 解决

centering

margin: 0 auto;

css columns

column-count: x;
column-gap: xpx;

通过 js 获得最终 CSS 属性

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

reference

[1] http://learnlayout.com


有任何问题可以发邮件到 kongyifei (at) gmail.com 讨论