• 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; 100%">
            <div style=" 30%;background-color: indianred;float: left">第一部分</div>
            <div style=" 20%;background-color: yellow;float: left">第二部分</div>
            <div style=" 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; 100%">
            <div style=" 30%;background-color: indianred;float: left">第一部分</div>
            <div style=" 20%;background-color: yellow;float: left">第二部分</div>
            <div style=" 30%;background-color: darkgreen;float: right">第三部分</div>
            <div style="clear: both"></div>
        </div>
    </body> 
    

      效果图

    2、给父div规定高度

    html代码

    <body>
        <div style="background-color: #656565; 100%;height: 10px">
            <div style=" 30%;background-color: indianred;float: left">第一部分</div>
            <div style=" 20%;background-color: yellow;float: left">第二部分</div>
            <div style=" 30%;background-color: darkgreen;float: right">第三部分</div>
        </div>
    </body>
    

      效果图

    问题解决了。

    擦,这clear是啥?

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

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

    然后。。。。。。
  • 相关阅读:
    第一次程序改错
    趣拼图——项目演示及代码
    数据流图和数据流程图
    UML图
    UML用例图
    第二次迭代目标的分配
    小组分工
    迭代目标
    我们的项目
    2017-4-18 关于小组APP
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6121966.html
Copyright © 2020-2023  润新知