css 浮动问题 display显示 和 光标设置cursor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动 和 显示方式</title>
<style>
h1{
text-align: center;
}
p{
background: pink;
}
.a{
border: 1px solid red;
height: 230px;
}
.a>img{
height: 200px;
width: 200px;
}
span{
position: relative;
top: 20px;
left: -100px;
/*cursor: pointer;/*小手显示*/
cursor: wait;
}
</style>
</head>
<body>
<h1>一.普通流定位</h1>
<p>1.普通流，就是文档流</p>
<p>2.块级元素 独占一行 可设置高宽</p>
<p>3.行内元素</p>
<h1>二.浮动定位概念</h1>
<p> 1.脱离文档流 ，在普通流之外<br>
2.不会占据页面空间<br>
3.浮动元素放置在包含框的左边 或者右边<br>
4.浮动元素依旧在包含框之内<br>
5.可以左右移动，不会上下浮动，直到碰见包含框的边缘 或者另一个已经浮动的元素框为止。
</p>
<h1>三.浮动定位 特点</h1>
<p>
1.浮动元素不会超过其父元素的边缘<br />
2.不会重叠<br />
3.只能左右浮动，不能上下动。<br />
4.非块级元素移动，可以设置高宽 。利用这个可以让1.块级元素在同一行内显示2.修改行内元素高宽。
</p>
<h1>四:浮动属性</h1>
<p>
1.float:none left right 属性和取值 浮动的使用。<br />
2.clean：left right both 属性和取值 清除浮动带来的影响。
</p>
<p>
子级元素浮动，给父层元素带来的影响<br />
1.元素内所有子级都浮动 ，该元素高度为0.<br />
解决方案<br />
1.设置父级元素高度<br />
2.设置父元素的 overflow：hidden；<br />
3.在父级元素中，增加一个空元素，添加clear：both
</p>
<h1>五.显示方式 display</h1>
<p>1.属性和取值 display：none<br />
2.none生成元素没有框，不占据页面空间.隐藏。<br />
3.block 变成块级元素显示<br />
4.inline 变成行内元素显示<br />
5.inline-block ： 行内块，所有元素在一行显示，可设置高宽.
</p>
<p>
2.适用场合<br />
1.控制元素的现实和隐藏<br />
2.将行内元素变成块级元素 或者行内块。修改行内元素的高宽。
</p>
<h1>六.光标设置 属性 cursor 取值default pointer crosshair text wait</h1>
<p>
1.cursor：pointer：小手 <br />
2.cursor:crossshair + 符号<br />
3.cursor：text I 符号<br />
4.cursor：wait 等待 沙漏符号
</p>
<div class="a">
<img src="../img/rose.jpg" />
<span>1</span>
<img src="../img/rose.jpg" />
<span>1</span>
<img src="../img/rose.jpg" />
<span>1</span>
</div>
</body>
</html>
css 浮动问题 display显示 和 光标设置cursor的更多相关文章
- css中的display(显示)和visibility(可见性)
display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...
- 盒模型的属性丶display显示丶浮动
一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...
- [转]CSS Display(显示) 与 Visibility（可见性）
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- css cursor属性-显示的光标的类型(形状)的用法和定义
在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...
- CSS浮动设置与清除
float:设置浮动 浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用. html: <p>以下是图片的浮动设置:</p> < ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- CSS：CSS Display(显示) 与 Visibility（可见性）
ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...
- css超出隐藏显示省略号怎么设置？
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- CAD设置当前显示的光标（com接口VB语言）
主要用到函数说明: MxDrawXCustomFunction::Mx_SetCursor 设置当前显示的光标,光标可以从cur文件加载,详细说明如下: 参数 说明 CString sCursorFi ...
随机推荐
- SQLAlchemy中的自引用
SQLALCHEMY采用adjacency list pattern来表示类的自引用. 例如,对于类Node自引用: class Node(Base): __tablename__='node' id ...
- LOJ2014 SCOI2016 萌萌哒 并查集、ST表优化连边
传送门 一个朴素的做法就是暴力连边并查集,可是这是\(O(n^2)\)的.发现每一次连边可以看成两个区间覆盖,这两个区间之间一一对应地连边.可线段树对应的两个节点的size可能不同,这会导致" ...
- 给大家推荐8个SpringBoot精选项目
前言 2017年,曾在自己的博客中写下这样一段话:有一种力量无人能抵挡,它永不言败生来倔强.有一种理想照亮了迷茫,在那写满荣耀的地方. 如今2018年已过大半,虽然没有大理想抱负,但是却有自己的小计划 ...
- PowerMock单元测试踩坑与总结
1.Mock是什么? 通过提供定制的类加载器以及一些字节码篡改技巧的应用,PowerMock 现了对静态方法.构造方法.私有方法以及 Final 方法的模拟支持,对静态初始化过程的移除等强大的功能. ...
- 深入理解跨域SSO(单点登录)原理与技术
一:SSO体系结构 SSO SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他 ...
- Spring MVC数据绑定入门总结
1.基本类型 基本类型参数不可为空 正例:http://localhost:8080/demo/he?id=2 反例:http://localhost:8080/demo/he?id=(报400错误) ...
- disruptor 高性能之道
disruptor是一个高性能的线程间异步通信的框架,即在同一个JVM进程中的多线程间消息传递.应用disruptor知名项目有如下的一些:Storm, Camel, Log4j2,还有目前的美团点评 ...
- [LeetCode] Rank Scores -- 数据库知识(mysql)
Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...
- Git_GitHub详解
Git和Github详细教程 一 概述 说到Git和Github,前几天我们知道微软以75亿美元收购全球最大的代码托管和写作平台GitHub,而GitHub是全球最大的代码仓库,很多开发人员都将代码 ...
- NOIP2016解题报告
天天听这几道题,但其实题面都没看过.今天做一下. 每道题看懂题后基本一分钟左右就切了.D2T3想的是\(O(n\log n)\)的堆做法,至少90分吧. D1T1模拟即可. D1T2每条路径拆成到根的 ...