鼠标形状：

在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

然后。。。。。。

css之cursor,float的更多相关文章

  1. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  2. CSS属性之float学习心得

    全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:flo ...

  3. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  4. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  5. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...

  6. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  7. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  8. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  9. button小手设置 css的cursor

    需要对元素的css属性cursor进行设置.cursor可能的值: default 默认(通常是一个箭头) auto 默认.浏览器设置的光标 crosshair 十字线形状. pointer 小手形状 ...

随机推荐

  1. 【LeetCode OJ】Best Time to Buy and Sell Stock II

    Problem Link: http://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ We solve this prob ...

  2. 用云存储和CDN轻松搞定网站图片

    http://www.kuqin.com/web/20120207/317912.html

  3. Android Priority Job Queue (Job Manager)：线程任务的容错重启机制（二）

     Android Priority Job Queue (Job Manager):线程任务的容错重启机制(二) 附录文章4简单介绍了如何启动一个后台线程任务,Android Priority J ...

  4. 5、C#基础整理（for 语句经典习题--与 if 的嵌套）

    1.for循环最基本运用:小球每次落地后再弹起是以前的4/5,求第5次弹起后的高度 ; i < ; i++) { high = high*/; } Console.WriteLine(" ...

  5. C#不安全代码和指针

    从通常情况下来看,为了保持类型安全,默认情况C# 不支持指针算法. 不过,当你需要使用指针的时候,请通过使用 unsafe 关键字,可以定义可使用指针的不安全上下文. 有关指针的更多信息,请参见主题指 ...

  6. PHP访问REST API上传文件的解决方案

    最近写的一个小功能需要通过rest方式上传文件,因此就在网上找了一些解决方案.接下来说明以下我采用的解决方案:我是利用curl来实现的,其中CURLOPT_POST的值为TRUE代表的是请求类型为PO ...

  7. timeZoneGetter

    function timeZoneGetter(date) { // getTimezoneOffset 返回格林威治时间和本地时间之间的时差,以分钟为单位 var zone = -1 * date. ...

  8. tensorflow0.8.0 安装配置

    参考官网:https://www.tensorflow.org/  Ubuntu15.10 + Eclipse Mars.2(4.5.2)官网最新 + Anaconda3-4.0.0 + Pydev4 ...

  9. [转载] Python 列表(list)、字典(dict)、字符串(string)常用基本操作小结

    创建列表 sample_list = ['a',1,('a','b')] Python 列表操作 sample_list = ['a','b',0,1,3] 得到列表中的某一个值 value_star ...

  10. Linux 安装挂载时注意事项

    Linux系统下使用的是目录树系统,所以安装的时候要规划磁盘分区与目录树的挂载.实际上,在Linux系统安装的时候已经提供了相当多的默认模式让你选择分割的方式了,不过无论如何,分割的结果可能都不是能符 ...