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 ...
随机推荐
- Linux 使用nexus搭建maven私服
系统:LINUX JDK:已安装 Maven:已安装 Nexus Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维 ...
- day25 Python四个可以实现自省的函数，反射
python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 四个可以实现自省的函数 下列方法适用于类和对象(一切皆对象,类本身也是一个对象) ...
- JPA和分布式事务简介
1. Transaction 分两种,Local Transaction 和 Global Transaction. 涉及到一个Connection的Commit,称为Local Transactio ...
- CSS的插入和选择器介绍
一.认识CSS样式 1.定义 CSS全称:层叠样式表(Cascading Style Sheets) 主要作用:定义HTML内容在浏览器内的显示样式,比如文字大小.颜色.字体加粗等 优点:通过定义某个 ...
- android截屏
截屏是一个常用的操作,经常会有这种需求. 截屏的工具类 package com.fxb.screenshot; import android.app.Activity; import android. ...
- 移动前端webApp开发点滴积累20140629
#移动前端webApp开发点滴积累20140629 ##关于input行内居中的问题 给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行.(见图) ...
- Go+Python双剑合璧
目的 Python调用Go的方法,Python有很多功能强悍又使用简洁的库.而新生军Go的多核心利用率也是非常强悍的.当然这是明面上的优点.反正你有很多理由想要让Python能够调用Go的方法. 实验 ...
- poj2449 第k短路
题目链接 学习博客:https://blog.csdn.net/Z_Mendez/article/details/47057461 k短路没有我想象的那么难,还是很容易理解的 求s点到t点的第k短路径 ...
- 牛客练习赛38 D 出题人的手环
链接 [https://ac.nowcoder.com/acm/contest/358/D] 题意 链接:https://ac.nowcoder.com/acm/contest/358/D 来源:牛客 ...
- 实现h5中radio单击取消与选中
<input type = "radio" id = "raid" name = "raname" checked = 'checke ...