H5 Layout

Layout

“排列, 虽然没有增减元素, 但本身就是一种重要的信息, 自然具有重要价值.” —— 不好意思, 是我说的.

一个优美的界面是精心处理的工作结果, 那么这里总结梳理一下实现web页面展示布局的技术手段.

完成一个web页面要完成"她"的三个方面: 结构(HTML), 样式(CSS)和行为(JS).

这些都要作用于页面上的元素(标签).

标签

网页结构类

html body head meta title

引入类

link style script

常规类布局类

div h1-6 p ol ul li dl dt dd hr

特殊功能用类

a img

段落文本处理类

span em strong br b i

表格类

table caption thead tbody tfoot col colgroup tr td th

表单类

form fieldset legend label input textarea select option optgroup button

其他类

address abbr等

整体布局

整体规划网页划分为几部分, 书写它们的位置和大小.

• 处理标签尺寸: 盒模型

在HTML中, 每个元素的解析都可以被看作一个"盒子", 具有盒子外形和平面空间.

外边距(margin)–边框(border)–内边距(padding)–宽(width) * 高(height)

• 既能设置宽高, 有能和其它元素处于同一行: 浮动

float:left 从右边向上浮起到水面, 然后向左浮动到水槽的左边. float:right 相反

注意这个向上不是立体水槽向上, 而是二维页面上方.

左右浮动的元素, 互不影响, 不会阻挡对方.

注意父级元素高度塌陷, 以及对后面兄弟元素的影响, 可使用清除浮动.

• 处理多个元素层叠: 定位布局

  fix
  absolute
  relative

层级覆盖关系:z-index

模块布局

• 选择标签

1. 块元素
2. 行元素
3. 第三类元素

• 可用性与扩展性

特殊布局

• 设置最小高度/宽度 最大宽度/高度

• 使用伪元素