<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动 和 显示方式</title>
<style>
h1{
text-align: center;
}
p{
background: pink;
}
.a{
border: 1px solid red;
height: 230px;
}
.a>img{
height: 200px;
200px;
}
span{
position: relative;
top: 20px;
left: -100px;
/*cursor: pointer;/*小手显示*/
cursor: wait;
}
</style>
</head>
<body>
<h1>一.普通流定位</h1>
<p>1.普通流，就是文档流</p>
<p>2.块级元素 独占一行 可设置高宽</p>
<p>3.行内元素</p>
<h1>二.浮动定位概念</h1>
<p> 1.脱离文档流 ，在普通流之外<br>
2.不会占据页面空间<br>
3.浮动元素放置在包含框的左边 或者右边<br>
4.浮动元素依旧在包含框之内<br>
5.可以左右移动，不会上下浮动，直到碰见包含框的边缘 或者另一个已经浮动的元素框为止。
</p>
<h1>三.浮动定位 特点</h1>
<p>
1.浮动元素不会超过其父元素的边缘<br />
2.不会重叠<br />
3.只能左右浮动，不能上下动。<br />
4.非块级元素移动，可以设置高宽 。利用这个可以让1.块级元素在同一行内显示2.修改行内元素高宽。
</p>
<h1>四:浮动属性</h1>
<p>
1.float:none left right 属性和取值 浮动的使用。<br />
2.clean：left right both 属性和取值 清除浮动带来的影响。
</p>
<p>
子级元素浮动，给父层元素带来的影响<br />
1.元素内所有子级都浮动 ，该元素高度为0.<br />
解决方案<br />
1.设置父级元素高度<br />
2.设置父元素的 overflow：hidden；<br />
3.在父级元素中，增加一个空元素，添加clear：both
</p>
<h1>五.显示方式 display</h1>
<p>1.属性和取值 display：none<br />
2.none生成元素没有框，不占据页面空间.隐藏。<br />
3.block 变成块级元素显示<br />
4.inline 变成行内元素显示<br />
5.inline-block ： 行内块，所有元素在一行显示，可设置高宽.
</p>
<p>
2.适用场合<br />
1.控制元素的现实和隐藏<br />
2.将行内元素变成块级元素 或者行内块。修改行内元素的高宽。
</p>
<h1>六.光标设置 属性 cursor 取值default pointer crosshair text wait</h1>
<p>
1.cursor：pointer：小手 <br />
2.cursor:crossshair + 符号<br />
3.cursor：text I 符号<br />
4.cursor：wait 等待 沙漏符号
</p>
<div class="a">
<img src="../img/rose.jpg" />
<span>1</span>
<img src="../img/rose.jpg" />
<span>1</span>
<img src="../img/rose.jpg" />
<span>1</span>
</div>
</body>
</html>