鼠标形状：

在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. WPF Step By Step -基础知识介绍

    回顾 上一篇我们介绍了WPF基本的知识.并且介绍了WPF与winform传统的cs桌面应用编程模式上的变化,这篇,我们将会对WPF的一些基础的知识做一个简单的介绍,关于这些基础知识更深入的应用则在后续 ...

  2. asp.net页面间传值的几种方法

    表单提交 传送页面代码 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server ...

  3. Golang Deco Enco

    mproto.go package mproto import ( "bytes" "encoding/binary" "fmt" &quo ...

  4. 如何避免后台IO高负载造成的长时间JVM GC停顿(转)

    译者著:其实本文的中心意思非常简单,没有耐心的读者建议直接拉到最后看结论部分,有兴趣的读者可以详细阅读一下. 原文发表于Linkedin Engineering,作者 Zhenyun Zhuang是L ...

  5. IAP沙盒测试帐号无法购买的问题

    1,创建一个美国的iap测试帐号 2,啪的一声从哪个地方拔出你的ios设备,设置 -> Itunes Store和 App Store -> 点击Apple ID ->注销 3,运行 ...

  6. jbrowse 的配置与使用gff, vcf, fa, bed, bam

    1,jbrowse 是什么东西 ? JBrowse is a genome browser with a fully dynamic AJAX interface, being developed a ...

  7. centos 用户组

    centos 用户组和用户的添加及所属问题 指定附加组   eg:dy 为组名 ,lisi 为用户,要把lisi 用户添加到 dy 组里面 useradd -G dy lisi 可以同时添加多个组, ...

  8. 快速掌握grep命令及正则表达式

    Linux系统自带了支持拓展正则表达式的 GNU 版本 grep 工具,所有的Linux发行版中均默认安装grep ,grep 命令被用来检索一台服务器或工作站上任何位置的文本信息,如何在 Linux ...

  9. 基于Spring框架的Web应用开发笔记 - Outline

    Motivation 最近的工作涉及Web框架搭建,在了解公司原有采用框架基础上对Web开发技术栈做了一次升级,在次做记录. Audience J2EE Web Application Develop ...

  10. ZSDR017-客户订货价格和库存

    *----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...