BFC+如何区分 HTML 和 HTML5

166 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第27天点击查看活动详情
一、BFC 是什么
1.定义:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有 Block-level box 参与,它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。
布局规则:
A. 内部的 Box 会在垂直方向,一个接一个地放置
B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
C. 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
F. 计算 BFC 的高度时,浮动元素也参与计算。

2.哪些元素会生成 BFC:
A. 根元素
B. float 属性不为 none
C. position 为 absolute 或 fixed
D. display 为 inline-block, table-cell, table-caption, flex, inline-flex
F. overflow 不为 visible

二、列举 HTML5 移动开发 APP 框架
1.jquery mobile 框架
2.mui 框架
3.ionic 框架
4.Mobile Angular UI 框架
5.Intel XDK 框架
6.Appcelerator Titanium 框架
7.Sencha Touch 框架
8.Kendo UI 框架
9.PhoneGap 框架

三、如何区分 HTML 和 HTML5
1.概念:HTML 即超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。通常说的 HTML 指的是 HTML4.0。HTML5 是 HTML 的第五次重大修改而成的,可以理解为升级版,但里面的内容是非常丰富的。

2.区分 html 和 html5 有很多方法
1)在文档类型声明上 html: Transitional//EN" "  html xmlns="HTML5:说明:在文档声明上,html 代码很长,而 html5 只有简简单单的声明。
2)在结构语义上 html4.0:没有体现结构语义化的标签,通常都是这样来命名的,这样表示网站的头部。<divid="header">html5:在语义上却有很大的优势。提供了一些新的 html5 标 签比如:header 、nav、article、aside、footer..