鼠标形状：

在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. 4、网页制作Dreamweaver（样式表CSS）

    样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...

  2. 农场阳光 (simpson)

    计算若干个圆与一个矩形的面积并 simpson公式 ans = ( f[l] + f[r] + 4 * f[mid] ) * (r-l) / 6 uses math; type arr=record ...

  3. const char* <----- > string

    (1) const char*      <-----     string const char* const_txt_path=txt_path.c_str(); (2)  string  ...

  4. 一步一步使用sklearn

    http://kukuruku.co/hub/python/introduction-to-machine-learning-with-python-andscikit-learn Hello, %u ...

  5. 【转】7 Tips to Speed Up Eclipse

    技巧一:运行最新版本的JDK和Eclipse 通常,新版本的JDK和Eclipse都会有性能上的优化.请确保你使用的是64位Eclipse并且使用了Oracle的JDK.对于网络开发,需要使用Ecli ...

  6. hadoop常用基础命令

    1.日志查询: 用户可使用以下命令在指定路径下查看历史日志汇总$ bin/hadoop job -history output-dir 这条命令会显示作业的细节信息,失败和终止的任务细节. 关于作业的 ...

  7. 如何用cufflinks 拼出一个理想的注释文件

    后记: cufflinks安装: 下载安装包, 不要下载source code ,直接下载binary.    Source code    Linux x86_64 binary http://cu ...

  8. [转载]oracle 11g不能导出空表的多种解决方法

    原文地址:11g不能导出空表的多种解决方法">oracle 11g不能导出空表的多种解决方法作者:Anlin_Yang ORACLE 11g 用exp命令导出库文件备份时,发现只能导出 ...

  9. C++ Primer : 第十二章 : 动态内存之动态内存管理(new和delete)

    C++语言定义了两个运算符来分配和释放动态内存:运算符new分配内存,运算符delete释放new分配的内存. 运算符new和delete 使用new动态分配和初始化对象 在自由空间分配的内存是无名的 ...

  10. Codeforces Round #135 (Div. 2)

    A. k-String 统计每个字母出现次数即可. B. Special Offer! Super Price 999 Bourles! 枚举末尾有几个9,注意不要爆掉\(long\ long\)的范 ...