display

用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

• block : 标准的块级元素。元素会新开始一行并且尽可能撑满容器。 p form 和HTML5中的新元素： header footer 、 section

• inline：行内元素可以在段落中包裹一些文字而不会打乱段落的布局。span 是一个标准的行内元素。 a 元素是最常用的行内元素，它可以被用作链接。

• none：特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间

• inline-block：行内铺满网格 https://zh.learnlayout.com/inline-block.html。需注意vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top；

max-width

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。但是当浏览器长度小于元素时，会产生滚动条，可以用max-width解决这个问题。一般用于适配移动设备。IE7支持

盒子模型box-sizing: border-box

当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样 比如padding设置太大 会使盒子变大使用 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;可以解决该问题

position

布局属性 参考:https://zh.learnlayout.com/position-example.html

• static ：默认值。任意 position: static; 的元素不会被特殊的定位。

• relative：相对定位 。 设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响

• fixed：固定定位。在固定的位置 即时页面滚动。 top 、 right 、 bottom 和 left 属性都可用。兼容性较差。flex进阶https://zh.learnlayout.com/flexbox.html

• absolute:绝对定位。类似fixed，不过是相对于最近的“positioned”父元素来定位

float

Float 可用于实现文字环绕图片 元素靠左靠右

清除浮动

可float结合clear使用

• clear： clear:left/right/both
• overflow: auto;

响应式布局

使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。 https://zh.learnlayout.com/media-queries.html

常见实例

/*使用 Flexbox 的居中布局*/
.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
<div class="vertical-container"><div></div></div>

上一页echarts

下一页工作流思路