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
模块布局
- 选择标签
- 块元素
- 行元素
- 第三类元素
- 可用性与扩展性
特殊布局
-
设置最小高度/宽度 最大宽度/高度
-
使用伪元素