zoukankan      html  css  js  c++  java
  • 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

    然后。。。。。。
  • 相关阅读:
    实习第十天
    实习第九天
    实习第八天
    武汉第七天
    武汉第六天
    实习第五天
    实习第四天
    NSArray
    NSString
    NSObject
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6121966.html
Copyright © 2011-2022 走看看