<!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的更多相关文章

  1. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  2. 盒模型的属性丶display显示丶浮动

    一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...

  3. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  4. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  5. CSS浮动设置与清除

    float:设置浮动 浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用. html: <p>以下是图片的浮动设置:</p> < ...

  6. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  7. CSS：CSS Display(显示) 与 Visibility（可见性）

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  8. css超出隐藏显示省略号怎么设置？

    当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...

  9. CAD设置当前显示的光标（com接口VB语言）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SetCursor 设置当前显示的光标,光标可以从cur文件加载,详细说明如下: 参数 说明 CString sCursorFi ...

随机推荐

  1. camke使用例程

    1 同文件夹直接编译 1 同文件夹直接编译 # cmake needs this line cmake_minimum_required(VERSION 2.8) # Define project n ...

  2. oracle sys_guid

    select sys_guid() from dual;

  3. mybatis 参数为list时，校验list是否为空， mybatis ${}与#{}的区别

    一.参数list时,先判断是否为空,否则会报错. 二.mybatis ${}与#{}的区别 简单来说#{} 解析的是占位符?可以防止SQL注入, 比如打印出来的语句 select * from tab ...

  4. CF617E XOR and Favorite Number

    CF617E XOR and Favorite Number 已知一个序列 \(a_1,\ a_2,\ \cdots,\ a_n\) 和 \(k\) ,\(m\) 次询问给出 \(l,\ r\) ,求 ...

  5. linux内存源码分析 - 内存压缩(实现流程)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 概述 本文章最好结合linux内存管理源码分析 - 页框分配器与linux内存源码分析 -伙伴系统(初始化和申请 ...

  6. Python3 tkinter基础 Checkbutton variable 多选钮是否被选中

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. HTML5事件

    Html5事件 contextmenu事件 用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单. 由于此事件时冒泡的,因此可以为document指定一个事件处理程序,用 ...

  8. 失物找寻APP软件需求规格说明书——第三次团队作业

    ⭐对于软件需求规格说明书的理解 在没写这份软件需求规格说明书的时候我们组成员都不是很理解它的必要性,当然,写完之后才知道它的作用. 软件需求说明书的存在是为了使用户和软件开发者双方对该软件的初始规定有 ...

  9. IIS 日志导入到数据库的方法

    使用微软Log Parser 执行 logparser "SELECT * FROM d:\iislogs\u_ex18071705.log TO myTableName" -o: ...

  10. c++入门之再话内存和引用

    此处没有代码,仅仅讨论一些这样的问题:我们为何使用引用?在哪里使用引用? 首先从函数的角度思考?:函数进行一般参数传递的时候,是怎么样传递的?普通类型的参数传递,是将传递的实参复制一份,到另一个内存空 ...