前端基础与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>

发布了48 篇原创文章 · 获赞 168 · 访问量 56万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览