2018年2月6日学习总结

浮动，

float：left/right

消除浮动：

clear:left/right/both

div浮动

overflow: hidden;

*//*隐藏看不到的部分*/

overflow: hidden;

滚动条

overflow: auto;

 

/*自适应*/

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

overflow 属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

嵌入其他网页标签：

<iframe></iframe>

<iframe src="http://www.baidu.com/" frameborder="1" width="1000px" height="500px"></iframe>嵌入在线网页
<br>
<iframe src="20602导航.html" frameborder="1" width="1000px" height="300px"></iframe>嵌入本地网页

嵌入音频：

video src="http://ting666.yymp3.com:86/new27/xuezhiqian7/4.mp3" controls autoplay loop></video>
<!--controls:控制条
autoplay：自动播放
loop：循环播放

飞起来标签：

<marquee>欢迎访问</marquee>

浮动练习：

<div id="d0">
<div id="d1">这是1</div>
<div id="d2">这是2</div>
<div id="d3">这是3</div>
<div id="d4">这是4</div>
<div id="d5">这是5</div>
<div id="d6">这是6</div>
<div id="d7">这是7</div>
<div id="d8">这是8</div>
<div id="d9">这是9</div>
<div id="d10">这是10</div>
<div id="d11">这是11</div>
<div id="d12">这是12</div>

#d0{
	border: 1px solid;
	width: 500px;
	height: 600px;
}
#d1{
	border: 1px solid;
	height: 100px;
	width: 100px;
	float: left;
	
}
#d2{
	border: 1px solid;
	height: 100px;
	width: 100px;
	float: left;
}
#d3{
	border: 1px solid;
	height: 100px;
	width: 100px;
	float: left;
	
}
#d4{
	border: 1px solid;
	height: 100px;
	width: 100px;
	float: left;
}
#d5{
	border: 1px solid;
	height: 100px;
	width: 90px;
	float: left;
}
#d6{
	border: 1px solid;
	width: 316px;
	height: 150px;
    float: left;
	
}
#d7{
	border: 1px solid;
	width: 180px;
	height: 200px;
   float: right;

}
#d8{
	border: 1px solid;
	height: 150px;
	width: 220px;
	float: left;
}
#d9{
	border: 1px solid;
	height: 150px;
	width: 94px;
	float: left;
}
#d10{
	border: 1px solid;
	height: 202px;
	width: 180px;
	float: right;
}
#d11{
	border: 1px solid;
	height: 100px;
	width: 316px;
	clear: left
	
}
#d12{
	border: 1px solid;
	height: 90px;
	width: 498px;
    clear: both;
}