前端基础与CSS中的浮动

HTML元素分为五种：

① 空内容元素（Void elements）

        area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

        没有内容，也没有结束标签。

② 原始文本元素（Raw text elements）

        script, style

        可以有文本内容。raw text elements 和 escapable raw text elements的文本内容中不能出现"</" (U+003C LESS-THAN SIGN, U+002F SOLIDUS)字符，并且之后也不能有以下（大小写不敏感）的标签：U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), or U+002F SOLIDUS (/)。

③ 可转义原始文本元素（Escapable raw text elements / RCDATA elements）

        textarea, title

        可以有文本和字符引用。但文本不能包含模糊&符(ambiguous ampersand)。

④ 外来元素（Foreign elements）

        来自MathML和SVG命名空间的元素。

        如果开始标签是自闭的就不能有任何内容，也没有结束标签；如果开始标签不是自闭的就可以有文本、字符引用、CDATA块、其它元素，甚至注释内容，但文本不能包含U+003C 小于号 (<) 或者 模糊&符(ambiguous ampersand)。

⑤ 普通元素（Normal elements）

        剩下的其它的元素都是普通HTML元素。

  Tags用来指定标记中元素的开始和结束，Raw text、escapable raw text以及normal elements 有一个start tag来表示他们开始的地方，和一个end tag来表示结束地方。对于normal elements（普通元素）来说，开始和结束标记是可以省略的。但对于不可省的元素一定不能省略. void elements（空内容元素）仅有一个start tag，不能指定end tags. 外来元素要么同时有start tag和end tag，要么有一个自闭的start tag但没有end tag。

字符引用（Character references）：

        某些情况下， 字符引用会混合在文本中，对于文本中不能出现的不合法字符可以利用字符引用来转义。字符引用必须以一个U+0026与字符(&)开始，然后紧跟下面三种字符引用：
Named character references
       与字符(&)之后必须紧跟一个已命名的字符引用， 并以U+003B分号字符(;)结束。如 &lt;
Decimal numeric character reference
        与字符(&)之后必须紧跟一个U+0023 数字符号(#), 然后紧跟一或多个U+0030 数字零 (0) 到 U+0039 数字九 (9),从而表示一个十进制的数，数字必须以U+003B分号字符(;)结束。如 &#320;
Hexadecimal numeric character reference
        与字符(&)之后必须紧跟一个U+0023 数字符号(#)，然后紧跟一个 U+0078 小写拉丁字母x (x) 或 一个U+0058 大写拉丁字母X (X), 然后必须紧跟一或多个从 U+0030 数字零 (0) 到 U+0039 数字九 (9), U+0061 小写拉丁字母a(a) 到 U+0066 小写拉丁字母f(f)，或者 U+0041 大写拉丁字母A(A) 到 U+0046 大写拉丁字母F(F)，从而表示一个十六进制的数，数字必须以U+003B分号字符(;)结束。如 &#3FF;

        模糊&符(ambiguous ampersand)：是一个U+0026 与字符(&)之后紧跟一或多个U+0030 数字零 (0) 到 U+0039 数字九 (9), U+0061 小写拉丁字母a(a) 到 U+007A 小写拉丁字母z (z), 或者 U+0041大写拉丁字母A (A) 到 U+005A大写拉丁字母Z (Z) 的字符，然后以U+003B分号字符(;)结束。这些字符不匹配任何已命名的字符引用。如 &2F;

HTML代码书写规范：

• 元素的标签和属性名小写, 属性值必须全部用双引号
  
• 嵌套的元素尽量缩进，并用4个空格代替Tab制表符
• 不能省略可选的结束标签，如，</li> 、</body>
  
• 引入 CSS 和 JavaScript 文件时不需要指定 type 属性
  
• 能用标签实现交互的就用标签元素，而不是写JS代码。

浮动（float）：

CSS中的float属性：float = "left | right | none | inherit"  默认是none

浮动会让元素脱离文档的普通流（或称常规流），向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。常规流中的块框表现得就像浮动框不存在一样，而且之外的行框可以沿着浮动框的边缘进行渲染。任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动的是非替换元素（即将内容直接告诉/表现给浏览器，将其显示出来，如<p>等大部分元素），要为其指定确切的宽度，否则它会尽可能窄。

浮动起初用于报纸等媒体的图文混排，让文字环绕图片，而在网页设计中不单用于图文排版，还用于导航条的浮动设计、响应式排版布局等。

浮动的效果：

一共有三个div浮动框col1、col2、col3，有一个容器div包裹container，其背景颜色如下图所示：

现在，让col1、col2以及col3都左浮：

		<div id="container" style="background:url(img/eg_bg_06.png)">
			<div id="col1" style="width:100px;height:100px;float:left;background-color :rgba(255,0,0,0.3)">
				<p>我是col1我是col1我是col1我是col1我是col1</p>
			</div>
			<div id="col2" style="width:50px;height:50px;float:left;background-color: rgba(0,255,0,0.3);">
				<p>我是col2我是col2</p>
			</div>
			<div id="col3" style="width:70px;height:70px;float:left;background-color: rgba(0,0,255,0.3);">
				<p>我是col3我是col3我是col3</p>
			</div>
		</div>

具体效果为：

如果浮动元素的前一个（HTML中元素出现顺序的前后）元素也是浮动的，它会紧跟在上一个浮动元素的后面（相对于包含框边缘的前后），如果一行放不下则会被挤到下一行。如果前一个元素是常规流中的元素，则它的垂直位置不会变化，只会左右浮动。

但是，说好的容器背景颜色呢？哪去了？

发现了什么？容器的高度竟然为0，宽度等于屏幕宽度。这也就是很多人所说的“塌陷”，而且还有一个问题，col1、col2和col3的浮动会影响后面的元素位置，比如我指定容器宽度为300，并在后面加一个div文本，由于前面元素脱离常规流，新加的div会出现在上一行，甚至会被覆盖：

		<div id="container" style="width:300px;background:url(img/eg_bg_06.png)">
			<div id="col1" style="width:100px;height:100px;float:left;background-color :rgba(255,0,0,0.3)">
				<p>我是col1我是col1我是col1我是col1我是col1</p>
			</div>
			<div id="col2" style="width:50px;height:50px;float:left;background-color: rgba(0,255,0,0.3);">
				<p>我是col2我是col2</p>
			</div>
			<div id="col3" style="width:70px;height:70px;float:left;background-color: rgba(0,0,255,0.3);">
				<p>我是col3我是col3我是col3</p>
			</div>
		</div>
		<div id="new" style="background-color :rgba(0,0,0,0.3)">
			<p>我是新加的！我是新加的！我是新加的！我是新加的！我是新加的！我是新加的！</p>
		</div>

具体效果为：

我们希望新加的div在浮动容器的下方，结果由于受到浮动元素的影响，新加div的不但跑到上面去了，还被浮动元素给覆盖了一部分，而渲染的文字也发生了偏移。

所以为了解决容器高度塌陷和浮动对其它元素产生影响的问题，可以用CSS的另一个属性clear属性来解决：

clear = "left | right | both | none | inherit"  默认是none

clear属性规定了该元素的哪一侧不允许出现浮动元素。

对于塌陷的问题，很多人非得说成清除浮动、闭合浮动。解决办法通常是在容器的前后加伪元素，从而让容器能够很好地包围浮动元素，也不会影响其他元素，如：

		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: " ";
				clear: both;
			}
		</style>
		<title>测试</title>
	</head>

	<body>
		<div id="container" class="clearfix" style="width:300px;background:url(img/eg_bg_06.png)">
			<div id="col1" style="width:100px;height:100px;float:left;background-color :rgba(255,0,0,0.3)">
				<p>我是col1我是col1我是col1我是col1我是col1</p>
			</div>
			<div id="col2" style="width:50px;height:50px;float:left;background-color: rgba(0,255,0,0.3);">
				<p>我是col2我是col2</p>
			</div>
			<div id="col3" style="width:70px;height:70px;float:left;background-color: rgba(0,0,255,0.3);">
				<p>我是col3我是col3我是col3</p>
			</div>
		</div>
		<div id="new" style="background-color :rgba(0,0,0,0.3)">
			<p>我是新加的！我是新加的！我是新加的！我是新加的！我是新加的！我是新加的！</p>
		</div>

具体效果为：

可以看到，已经达到我们的效果了。display:table让新加入的伪元素表现出表格的特性，前后有换行，当然display:block也能达到效果，但table影响更小，content:" "标明伪元素是空内容的，clear:both用来清理两侧的浮动以避免对其它元素产生影响。

对于老IE浏览器可以多加一个zoom:1;属性来触发hasLayout操作，从而清除浮动。

页面滚动触发的动画之scrollReveal：

使用：在HTML中：

<div data-scroll-reveal="enter from bottom and move 50px over 1.33s"><h1>我是动画</h1></div>

<script src="js/scrollReveal.js"></script>
<script>
$(function(){
var scrollRevealConfig = {
after: '0s',
enter: 'bottom',
move: '50px',
over: '0.66s',
easing: 'ease-in-out',
viewportFactor: 0.33,
reset: true,
init: true
}
window.scrollReveal = new scrollReveal(scrollRevealConfig);
/*
* 对于之后动态添加的scrollReveal元素，要重新触发：
* scrollReveal.init();
* */
});
</script>