css之cursor,float
鼠标形状：
在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的更多相关文章
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS属性之float学习心得
全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:flo ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- css清除浮动float
css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...
- 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- 关于CSS中的float可能出现的小问题
关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
- button小手设置 css的cursor
需要对元素的css属性cursor进行设置.cursor可能的值: default 默认(通常是一个箭头) auto 默认.浏览器设置的光标 crosshair 十字线形状. pointer 小手形状 ...
随机推荐
- CodeForces 56E-Domino Principle
E - Domino Principle Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I6 ...
- ModelFirst的CRUD
创建实体:
- Response响应请求操作
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...
- SQL中使用WITH AS提高性能－使用公用表表达式（CTE）简化嵌套SQL
转:http://wudataoge.blog.163.com/blog/static/80073886200961652022389/ 一．WITH AS的含义 WITH AS短语,也叫做子 ...
- Http的请求的全过程
http请求的详细过程 HTTP是一个应用层的协议,在这个层的协议,是一种网络交互需要遵守的一种协议规范. 1.连接:当输入一个请求时,首先建立一个socket连接,因为socket是通过ip和端口建 ...
- curl 发送带有Authorization的post请求命令
curl --user user:password -d "param1=111¶m2=222" "http://127.0.0.1/cmd"
- for each 循环
前言 在C++中,经常用到类似 for (int i=0; i<n; i++); 这样的循环控制结构. 然而,如果要求循环变量的改变方式不是简单的+1递增,而是依次取某个数组里面的元素,那么C+ ...
- MyEclipse+Struts+Hibernate+Mysql开发环境配置
软件: jdk-6u22-windows-x64.exe apache-tomcat-6.0.29.exe mysql-5.1.51-winx64.exe myeclipse-8.6.0-win32. ...
- TreodeDB测试及总结
参考资料:http://treode.github.io/store/ 官方网站 实际测试环境:3台有公网IP的服务器,一台阿里云,另两台公司内部 1host IP地址 IP1java -jar se ...
- TextView中的图文混排
ImageSpan imageSpanMenu1 = new ImageSpan(activity,menuResId1); SpannableString contentMenu1 = new Sp ...