定位

浮动



float代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <style type="text/css">
  6. 		#d0,p{
  7. 			width: 400px;
  8. 			border: 1px solid red;
  9. 		}
  10. 		#d0 div{
  11. 			width:100px;
  12. 			height:100px;
  13. 			margin:10px;
  14. 		}
  15. 		#d1{
  16. 			background-color: red;
  17. 		}
  18. 		#d2{
  19. 			background-color: green;
  20. 		}
  21. 		#d3{
  22. 			background-color: blue;
  23. 		}
  24. 		/*浮动*/
  25. 		#d1,#d2,#d3{
  26. 			float: right;
  27. 		}
  28. 		#d1,#d2,#d3{
  29. 			float: left;
  30. 		}
  31. 		/*消除浮动影响*/
  32. 		/*只消除对叔叔的影响*/
  33. 		p{
  34. 			clear: left;
  35. 		}
  36.  </style>
  37.  <title>浮动</title>
  38. </head>
  39. <body>
  40. 	<div id="d0">
  41. 		<div id="d1"></div>
  42. 		<div id="d2"></div>
  43. 		<div id="d3"></div>
  44. 		<p>浮动时注意观擦我的位置你会发现很别扭</p>
  45. 	</div>
  46. </body>
  47. </html>

照片墙

图片一般用li标签包裹这样的话加载的快，因为用li标签的话浏览器解释是会默认为为同一一种格式。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<style type="text/css">
  6. 	li{
  7. 	/*去掉列表前面的符号*/
  8. 	list-style-type: none;
  9. 	}
  10. 	body{
  11. 	background-color: #066;
  12. 	}
  13. 	ul{
  14. 	width: 780px;
  15. 	/*	border: 1px solid red;*/
  16. 	margin: 30px auto;
  17. 	}
  18. 	li{
  19. 	width: 218px;
  20. 	padding: 10px;
  21. 	margin: 10px;
  22. 	border: 1px solid #ccc;
  23. 	float: left;
  24. 	background-color: #fff;
  25. 	}
  26. 	p{
  27. 	text-align: center;
  28. 	}
  29. 	/*采用相对定位，在hover时设置很小的偏移量
  30. 	从而实现抖动效果*/
  31. 	img:hover{
  32. 		position:relative;
  33. 		left: 2px;
  34. 		top: -2px;
  35.   	}
  36.  </style>
  37. <title>照片墙</title>
  38. </head>
  39. <body>
  40. <ul>
  41. 	<li>
  42. 		<img src="../images/01.jpg" alt="">
  43. 		<p>你要去旅行吗</p>
  44. 	</li>
  46. 	<li>
  47. 		<img src="../images/02.jpg" alt="">
  48. 		<p>你在何方？</p>
  49. 	</li>
  51. 	<li>
  52. 		<img src="../images/03.jpg" alt="">
  53. 		<p>难道去了东洋?</p>
  54. 	</li>
  55. 	<li>
  56. 		<img src="../images/04.jpg" alt="">
  57. 		<p>醉里寻梦</p>
  58. 	</li>
  59. 	<li>
  60. 		<img src="../images/05.jpg" alt="">
  61. 		<p>大梦三千</p>
  62. 	</li>
  63. 	<li>
  64. 		<img src="../images/06.jpg" alt="">
  65. 		<p>别走了光</p>
  66. 	</li>
  67. </ul>
  68. </body>
  69. </html>

相对、绝对、固定定位



代码块

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style type="text/css">
  6. 	div{
  7. 		width: 318px;
  8. 		height: 318px;
  9. 		border: 1px solid red;
  10. 		/*不设置偏移量，只是为了便于子元素做绝对定位。*/
  11. 		position: relative;
  12. 	}
  13. 	p{
  14. 		position: absolute;
  15. 		bottom: 10px;
  16. 		left: 0;
  17. 		background-color: #fff;
  18. 		text-align: center;
  19. 		width: 319px;
  20. 	}
  21. </style>
  22. <title>新闻图片</title>
  23. </head>
  24. <body>
  25. <div>
  26. 	<img src="../images/3.jpg">
  27. 	<p>苍老师到此一游！</p>
  28. </div>
  29. </body>
  30. </html>

点击图片时显示在最上面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<style type="text/css">
  6. 		div {
  7. 			width: 700px;
  8. 			height: 500px;
  9. 			background-color: #066;
  10. 			margin: 30px;
  11. 			position: relative;
  12. 		}
  13. 		#i1{
  14. 			position: absolute;
  15. 			left: 200px;
  16. 			top: 50px;
  17. 		}
  18. 		#i2{
  19. 			position: absolute;
  20. 			left: 100px;
  21. 			top: 100px;
  22. 		}
  23. 		#i3{
  24. 			position: absolute;
  25. 			left: 250px;
  26. 			top: 150px;
  27. 		}
  28. 		img:HOVER{
  29. 			/*堆叠顺序*/
  30. 			z-index: 999;
  31. 		}
  32. 	</style>
  33. 	<title>堆叠顺序</title>
  34. </head>
  35. <body>
  36. 	<div>
  37. 		<img alt="" src="../images/1.jpg" id="i1">
  38. 		<img alt="" src="../images/2.jpg" id="i2">
  39. 		<img alt="" src="../images/3.jpg" id="i3">
  41. 	</div>
  42. </body>
  43. </html>

消息框

元素的显示方式(display)

1.块

  • 有宽高、独立成行(垂直排列)
  • hn p div ol ul table

2.行内

  • 没有宽高、不独立成行(横向排列)
  • span b strong i em u del a

3.行内块

  • 有宽高、不独立成行(横向排列)
  • img input select textarea

修改显示方式

  • display:block; 块
  • display:inline; 行内
  • display:inline-block; 行内块
  • display:none; 隐藏此元素

css的定位和浮动的更多相关文章

  1. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  2. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  3. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  4. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  5. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  6. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  7. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. CSS：盒子的定位与浮动

    CSS--盒子定位.浮动与居中 HTML中的每个元素都是一个盒子   浏览器对HTML文档进行解析,根据盒子的属性对其进行排列. 每个元素默认使用标准文档流定位   标准文档流:是指浏览器读取HTML ...

随机推荐

  1. JavaScript一个google地图获取

    <script type="text/javascript"> /** * 返回一个新创建的<img>元素,该元素用于在获取到地理位置信息后,显示一张Goo ...

  2. objc[20556]:Class JavaLaunchHelper is implemented in both xxx 警告处理

    今天在Mac上对IntelliJ Idea 进行了升级 升级到2017.01后,运行程序时,出现以下红色警告: objc[20556]: Class JavaLaunchHelper is imple ...

  3. 使用TinyXML进行XML操作

    本例基于TinyXML实现XML的自动解析和创建,由于本人是菜鸟刚入门,例子中添加了enum.struct.vector.map.list的常见用法,首先添加6个tinyxml工程文件,然后设置调试参 ...

  4. javascript王国的一次旅行，一个没有类的世界怎么玩转面向对象？

    1. 前言 作为Java 帝国的未来继承人,Java小王子受到了严格的教育, 不但精通Java语言.Java虚拟机.java类库和框架,还对各种官方的Java规范了如指掌. 近日他听说一个叫做Java ...

  5. ajax-post请求

    一般来说字符串读取不出来查看下面这行代码是否加上: xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencode ...

  6. （转）ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果

    场景:移动支付需要对二维码的生成与部署有所了解,掌握目前主流的二维码生成技术. 1 ZXing 生成二维码 首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老 ...

  7. （转）Schema

    总结: 1.schema本身就是一个XML文件 2.schema功能比DTD强大,正逐步替代DTD 3.schema的根元素固定为schema 4.schema文档定义完毕后,需要绑定到一个URI地址 ...

  8. Kibana5 数据探索使用（Discover功能）

    认识Kibana Kibana 是一个为 Logstash 和 ElasticSearch 提供的日志分析的 Web 接口.可使用它对日志进行高效的搜索.可视化.分析等各种操作.Kibana的使用场景 ...

  9. 用runtime封装归档(encoding)

    runtime一套比较基层的c语言的API(库) 归档(OC对象-->字典—>2进制—>写入沙盒 || 目的.数据持久化)   #import <UIKit/UIKit.h&g ...

  10. 【jquery】ajax请求

    1. defferred对象 实现链式回调函数编程. http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_d ...