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 ...
随机推荐
- 5-servlet简介
一.servlet1.是什么:java程序来处理页面请求和响应2.实现方式: a.实现Servlet接口 b.继承HttpServlet类 3.步骤: a.创建一个java程序实现Servlet或者继 ...
- Flask框架简介，常用扩展包及两大核心
Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...
- ModelViewSet 路由 / django logging配置 / django-debug-toolbar使用
一.ModelViewSet 路由 因为我们正在使用ViewSet代替View,实际上已经不再需要自己来设计URL的配置了.将资源和视图.URL绑定到一起是一个可以自动完成的过程,只需要使用Route ...
- 工具 docker
环境配置 软件+环境 虚拟机 资源占用 容器 进程隔离 image(镜像)文件 容器文件 docker hub:仓库 docker container run image_name 挂载: 参考链接 ...
- java单例模式总结
目录 一. 饿汉模式(静态初始化) 二.双重检查锁(dcl) 三. 延迟占位类 四.枚举实现 最后 常见安全的单例实现代码和自己的一点理解. 一. 饿汉模式(静态初始化) class Singleto ...
- 十分钟学会Java8：lambda表达式和Stream API
Java8 的新特性:Lambda表达式.强大的 Stream API.全新时间日期 API.ConcurrentHashMap.MetaSpace.总得来说,Java8 的新特性使 Java 的运行 ...
- 【教程】switch上的Human Fall Flat如何设置本地双人？
1. 保证两个手柄已插入主机上 2. 进入游戏至游戏开始界面 3. 将主机插入拓展坞,等待电视显示 4. 稍等数秒,电视上会提示使用手柄方式 5. 此时按照多人游戏的手柄操作方法即可
- Webpack+Typescript 简易配置
教程:https://www.cnblogs.com/yasepix/p/9294499.html http://developer.egret.com/cn/github/egret-docs/ex ...
- 【记一次pull request的惨痛教训】不可见的分隔符之Zero-with-space
问题描述: 我在修改 ctf-wiki 目录后进行 mkdocs build 去生成索引目录的时候报错: 然后我尝试定位到第 2 行和第 288 行,这些行我似乎并没有修改过啊. 未果,开始去找师傅解 ...
- c++构造函数成员初始化中赋值和初始化列表两种方式的区别
先总结下: 由于类成员初始化总在构造函数执行之前 1)从必要性: a. 成员是类或结构,且构造函数带参数:成员初始化时无法调用缺省(无参)构造函数 b. 成员是常量或引用:成员无法赋值,只能被初始化 ...