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 小手形状 ...
随机推荐
- PHP内置的字符串处理函数
字符串的特点 1.其他类型的数据用在字符串类型处理函数中,会自动将其转化成字符串后,在处理 <?php echo substr("abcdefghijklmn",2,4 ...
- linux常用命令:2权限管理命令
权限管理命令 1.权限管理命令:chmod 命令名:chmod 命令英文原意:change the permissions mode of a file 命令所在路径:/bin/chmod 执行权限: ...
- 【LeetCode OJ】Reverse Words in a String
Problem link: http://oj.leetcode.com/problems/reverse-words-in-a-string/ Given an input string, reve ...
- postfix之dovecot
dovecot-1.0.rc14安装 注:我的系统是RHEL4一.RPM格式1.安装RPM包:2.编辑/etc/dovecot.conf其中,修改protocols = imap pop3 passd ...
- D - 排列
#include<cstdio> #include<algorithm> #include<string.h> using namespace std; #defi ...
- Core Java Volume I — 3.8. Control Flow
3.8. Control FlowJava, like any programming language, supports both conditional statements and loops ...
- Sublime text2如何设置快捷键让编写的HTML文件在浏览器预览？
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:浪人链接:http://www.zhihu.com/question/27219231/answer/43608776来源:知 ...
- 谈 IIS7.5 Asp.Net模拟用户
IIS Asp.模拟用户官方的解释是: 如果要在非默认安全上下文中运行 ASP.NET 应用程序,请使用 ASP.NET 模拟身份验证. 如果您对某个 ASP.NET 应用程序启用了模拟,那么该应用 ...
- 238. Product of Array Except Self
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- Codeforces Round #308 (Div. 2) A B C 水 数学
A. Vanya and Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...