鼠标形状：

在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】Insertion Sort List

    Problem: Sort a linked list using insertion sort. The node of the linked list is defined as: /** * D ...

  2. List<T>转换为DataTable

    List<info> infos = Dal.GetInfos(); DataTable dt = new DataTable(); dt.Columns.Add("cName& ...

  3. HDU4897 （树链剖分+线段树）

    Problem Little Devil I (HDU4897) 题目大意 给定一棵树,每条边的颜色为黑或白,起始时均为白. 支持3种操作: 操作1:将a->b的路径中的所有边的颜色翻转. 操作 ...

  4. 重学STM32----（二）

    前几天买了个蓝牙模块,昨天到来了,就打算来研究研究蓝牙.看了蓝牙模块的资料,知道通讯需要串口,那肯定要先写一个串口程序了.要是用库函数写,10多分钟可能就会搞定,但是这就违背我的初衷了,所以就不知天高 ...

  5. iOS-MVC详解

    MVC与模板概念的理解 MVC(Model View Controller)模型-视图-控制器 MVC本来是存在于Deskt op程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC 的 ...

  6. 《JavaScript Ninja》之正则表达式

    正则表达式 是一个拆分字符串并查询相关信息的过程. 练习网站:JS Bin 正则表达式测试网站:Regular Expression Test Page for JavaScript 正则表达式进修 ...

  7. Session变量不能传送到下一页.解决: session.use_trans_sid = 1

    转自:http://blog.csdn.net/drylandfish/article/details/244085 附:文摘===================================== ...

  8. C语言redirection

    1)把执行文件xxx.exe 和读取的文件yyy.txt放在一个地方 2)用dos 命令 dir 和cd,打开存放文件的文件夹 3)window 7 情况下 输入xxx.exe < yyy.tx ...

  9. Apache的虚拟主机配置

    使用虚拟主机要先取消中心主机,注释掉DocumentRoot #DocumentRoot "/www/htdoc" 虚拟主机的单独配置: 用户认证 访问日志 错误日志 别名 脚本别 ...

  10. WinMain初始化详细过程以及消息循环

    主要内容:详细介绍WinMain函数的初始化过程以及消息循环 1.窗口类定义 通过给窗口类数据结构WNDCLASS赋值完成, 该数据结构中包含窗口类的各种属性 <1>LoadIcon 作用 ...