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 小手形状 ...
随机推荐
- linux常用命令:4文件压缩和解压命令
文件压缩和解压命令 压缩命令:gzip.tar[-czf].zip.bzip2 解压缩命令:gunzip.tar[-xzf].unzip.bunzip2 1. 命令名称:gzip 命令英文原意:GNU ...
- Linux下拷贝目录和删除
cp命令用于复制文件或目录,若同事指定两个以上的文件或目录,切最后一个目的地是一个已存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若同时指定多个文件或目录,而最后的目的地并非一个已存在的 ...
- 建置 POSTFIX 服务器
建置 POSTFIX 服务器 postfix 是除了 sendmail 以外 ,最被广泛采用的 Linux 邮件服务器,一般使用的观感不外乎两点: 一.安全:垃圾信过滤机制较聪明,就算什么都没设定,也 ...
- Android CardView设置成普通的Framelayout
比如可以这样写代码,CardView就变成普通的FrameLayout: <?xml version="1.0" encoding="utf-8"?> ...
- 通过一段代码说明C#中rel与out的使用区别
using System; public partial class testref : System.Web.UI.Page { static void outTest(out int x, out ...
- Http的请求的全过程
http请求的详细过程 HTTP是一个应用层的协议,在这个层的协议,是一种网络交互需要遵守的一种协议规范. 1.连接:当输入一个请求时,首先建立一个socket连接,因为socket是通过ip和端口建 ...
- vim 把满足条件的数字进行加上一些数字
1,1,1,n4s-1 1,3,4,n3s= 1,4,6,e4h= 1,5,8,e4h-1 1,6,2,e3ntx-2 1,7,5,n1s+2 1,8,7,n3s= 比如以上的数据格式以“,”为列 ...
- 学习Linux——计算机概论
一直想学习Linux,但计划时不时被耽误,现在开始,决定每天开始学习Linux.学习从最简单的开始,一步步,不能将最简单的东西忽略. 1.计算机硬件的五大单元 计算机分为三部分:输入单元,中央处理器即 ...
- Java 性能优化实战记录(2)---句柄泄漏和监控
前言: Java不存在内存泄漏, 但存在过期引用以及资源泄漏. (个人看法, 请大牛指正) 这边对文件句柄泄漏的场景进行下模拟, 并对此做下简单的分析.如下代码为模拟一个服务进程, 忽略了句柄关闭, ...
- 2016 ACM/ICPC Asia Regional Shenyang Online 1009/HDU 5900 区间dp
QSC and Master Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...