css之cursor,float

时间:2024-01-13 13:15:20

鼠标形状:

在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>

  效果图:

css之cursor,float

问题来了:

  我定义了父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>

  效果图

css之cursor,float

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>

  效果图

css之cursor,float

问题解决了。

擦,这clear是啥?

擦,官网上说clear是设置一个元素的侧面是否允许其他的浮动元素.

共有4个属性:left|right|both|none

然后。。。。。。