鼠标形状：

在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. 关于oracle出现ORA-06143：连接未打开 解决方案

    原因:程序所在的路径中含有()和中文 用plsql连接正常,连接字符串也检查不出毛病,换到另一个程序照样使用,折腾了半天,最后才发现程序所在的路径中含有()和中文,所以可能导致出现这种很难排查的问题出 ...

  2. asp.net mvc3.0第一个程序helloworld开发图解

    步骤一:新建asp.net mvc3.0项目 (选择Razor模板) 步骤二:创建控制器 步骤三:控制器源码内右键创建对应视图 步骤四:控制器内添加代码 步骤五:视图页面输出内容 步骤六:F5调试

  3. 【转】DOM事件简介

    原文转自:http://blog.jobbole.com/52430/ Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对 ...

  4. NSNumber 、 NSValue 、 日期处理 、 集合类 、 NSArray(一)

    1 基本数据类型的封装 1.1 问题 我们所学的所有基本数据类型,如int.float.double.char等,都不是对象,不能向它们发送消息.然而,在Foundation中的许多类,如NSArra ...

  5. Word Ladder II

    Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformat ...

  6. dedecms 列表页 list 判断flag给定指定样式 (本地测试有效)

    {dede:list pagesize='10'} [field:array runphp='yes'] if (@me['flag']=='a') @me=' <a class="n ...

  7. Linux主机硬盘的主要规划

    系统对于硬盘的需求跟刚刚提到的主机开放的服务有关,那么除了这点之外,还有没有其他的注意事项?当然有,那就是数据的分类与数据安全性的考虑,即当主机系统的硬件出现问题时,你的档案数据能否安全的保存. 前篇 ...

  8. 高逼格的画图：VIM原来可以这样玩

    在Linux上其实并不缺少画图软件(比如yEd等),那么为什么还需要用VIM来画图: 更轻,不需要安装太多东西 更小,就是一些文本,比图片什么的小多了,使用起来也更简单 更有逼格 那么我们该怎么做呢? ...

  9. squid代理服务器搭建及配置

    系统环境:CentOS release 6.5 (Final)(最小化安装) 一.安装squid # yum -y install squid 二.编辑配置文件(正向代理) # vim /etc/sq ...

  10. kafka的推和拉的问题

    之前学习过这一问题,但是面试又被问道了.再次记录下 推还是拉? Kafka最初考虑的问题是,customer应该从brokes拉取消息还是brokers将消息推送到consumer,也就是pull还p ...