css 浮动问题 display显示 和 光标设置cursor
<!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;
width: 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>
轉載于:https://www.cnblogs.com/ZXF6/p/10421136.html
總結
以上是生活随笔為你收集整理的css 浮动问题 display显示 和 光标设置cursor的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SmartGit破解方法
- 下一篇： Leetcode-998 Maximum