css之cursor,float
鼠标形状:
在html中可以任意定义各个标签的显示形状,也可以此用来做些标签显示假像。
<body>
<p style="cursor: pointer">形状</p> 小手
<p style="cursor: help">形状</p> 问号
<p style="cursor: wait">形状</p> 圆圈
<p style="cursor: move">形状</p> 移动
<p style="cursor: crosshair">形状</p> 十字准星
<p style="cursor: url(favicon.ico),auto">形状</p> 图标
</body>
我的理解:
标签的原始高度是0px,它随填充数据的大小而做出适应。
当然也可以明确规定标签的高度,当填充数据超出它的容纳范围就会出现滚动条
浮动 float:
功能:可以把块级标签组合在一起,成为一个块级元素
html代码
<body> <div style="background-color: #656565;width: 100%"> <div style="width: 30%;background-color: indianred;float: left">第一部分</div> <div style="width: 20%;background-color: yellow;float: left">第二部分</div> <div style="width: 30%;background-color: darkgreen;float: right">第三部分</div> </div> </body>
效果图:
问题来了:
我定义了父div的背景色
且其共有三个子div,长度加起来为80%,父div还剩20%没有被填充。
问题:这20%为什么是空的;父div为什么没有显示出来,去了哪里?
原来:父div在创建的时候没有指定高度,所以默认为0,所以显示不了
怎么解决:
1、利用clear样式
html代码
<body> <div style="background-color: #656565;width: 100%"> <div style="width: 30%;background-color: indianred;float: left">第一部分</div> <div style="width: 20%;background-color: yellow;float: left">第二部分</div> <div style="width: 30%;background-color: darkgreen;float: right">第三部分</div> <div style="clear: both"></div> </div> </body>
效果图
2、给父div规定高度
html代码
<body> <div style="background-color: #656565;width: 100%;height: 10px"> <div style="width: 30%;background-color: indianred;float: left">第一部分</div> <div style="width: 20%;background-color: yellow;float: left">第二部分</div> <div style="width: 30%;background-color: darkgreen;float: right">第三部分</div> </div> </body>
效果图
问题解决了。
擦,这clear是啥?
擦,官网上说clear是设置一个元素的侧面是否允许其他的浮动元素.
共有4个属性:left|right|both|none
然后。。。。。。