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 小手形状 ...
随机推荐
- Qt 中使用vector
新建Empty qmake project,包含如下两个文件: .pro文件 SOURCES += \ main.cpp QT += core CONFIG += c++11 // 支持C++11 . ...
- Bootstrap全局css
HTML中的所有标题标签,<h1>到<h6>均可使用.另外,还提供了.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式.在标题内还可以包含<small ...
- MongoDB索引、聚合
用$where可以执行任意的js作为查询的一部分. db.foo.find({"$where" : function(){ for(var current in ...
- K Best（最大化平均数）_二分搜索
Description Demy has n jewels. Each of her jewels has some value vi and weight wi. Since her husband ...
- 破解 CrackMe#1 [UBC] by bRaINbuSY
系统 : Windows xp 程序 : CrackMe#1 程序下载地址 :http://pan.baidu.com/s/1nuagj6h 要求 : 编写注册机 使用工具 :IDA & OD ...
- JavaScript 经常忽略的 7 个基础知识点
1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串—— ...
- iOS开发环境C语言基础 数组 函数
1 求数组元素的最大值 1.1 问题 创建程序,实现查询数组中最大值的功能,需求为:创建一个长度为10的数组,数组内放置10个0~99之间(包含0,包含99)的随机数作为数组内容,要求查询出数组中的最 ...
- postgresql基本操作：查看数据库、索引、表、表空间大小
一.简介 PostgreSQL 提供了多个系统管理函数来查看表,索引,表空间及数据库的大小,下面详细介绍一下. 二.数据库对象尺寸函数 函数名 返回类型 描述 pg_column_size(any) ...
- js 实现复制到剪切板 复制按钮兼容各大浏览器
zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroCli ...
- meta标签兼容性
基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...