学习内容：
1.float，可使div脱离其原来位置进行位移
（1）float:left 向左浮动；（2）float:right 向右浮动；
1 <html> 2 <head> 3 <style> 4 #d1 { 5 background-color: red; 6 width: 100px; 7 height: 100px; 8 float: left; /*浮动会脱离当前位置，不占用原来位置*/ 9 } 10 #d2 { 11 background-color: blue; 12 width: 100px; 13 height: 100px; 14 float: right; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div id="d1">我是左</div> 21 <div id="d2">我是右</div> 22 </body>
2.clear
可对标签左右方向的float元素进行清除，避免元素之间相互叠加
1 <head> 2 <style> 3 #d1 { 4 background-color: red; 5 width: 100px; 6 height: 100px; 7 float: left; 8 } 9 #d2 { 10 background-color: blue; 11 width: 100px; 12 height: 100px; 13 float: right; 14 } 15 #d3 { 16 background-color: cornflowerblue; 17 height: 900px; 18 width: 100%; 19 clear: both;/*若不清除浮动，会和D1 D2重合*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div id="d1">我是左</div> 25 <div id="d2">我是右</div> 26 <div id="d3">我是底部</div> 27 </body> 28
3.overflow，对溢出边框的元素怎么处理
（1）hidden：隐藏，可以对X Y轴方向进行单独设着 overflow-x overflow-y
（2）scroll：不论有没有溢出，都会产生一个滚动条
（3）auto：溢出时产生一个滚动条，否则不产生
PS：利用overflow可用于制作带滚动条的内容！
1 <head> 2 <style> 3 #of { 4 width: 130px; 5 height: 50px; 6 border: 1px solid red; 7 position: relative; 8 left: 500px; 9 overflow: hidden; 10 /*隐藏溢出部分，也可以单独设置x，y方向隐藏 scroll，卷动，强制加滚动条 11 auto 溢出后自动加滚动条 12 word-break: 全部折行，无视标点和回车等换行符； 13 word-wrap: 可以视标点符号等换行，会产生空白*/ 14 </style> 15 </head> 16 <body> 17 <div id="of"> 18 abcdefghijklmn, 19 akjafjfjfjafwdaddadd,q 20 wsdssa,qqwew 21 eq,dadwdadadwww,adsdasda. 22 </div> 23 </body>
4.iframe 框架标签，可用来在当前网页内嵌入网页
1 <iframe src="http://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>
比如写随笔的输入页面就是使用iframe完成的
5.audio video标签，用来播放音乐和视频（了解即可）
1 <video src="http://ting666.yymp3.com:86/new27/xuezhiqian7/4.mp3" controls auto loop></video> <!--控制台 自动播放 循环播放--> 2 <audio src=""></audio>
6.marquee 飞行文字标签（了解即可）
该段代码可实现文字在框体内来回弹跳：
1 <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> 2 <marquee behavior="alternate"> 3 bounce 4 </marquee> 5 </marquee> <!--飞行文字-->
2018.02.06