定位

浮动



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>
  45. <li>
  46. <img src="../images/02.jpg" alt="">
  47. <p>你在何方?</p>
  48. </li>
  49. <li>
  50. <img src="../images/03.jpg" alt="">
  51. <p>难道去了东洋?</p>
  52. </li>
  53. <li>
  54. <img src="../images/04.jpg" alt="">
  55. <p>醉里寻梦</p>
  56. </li>
  57. <li>
  58. <img src="../images/05.jpg" alt="">
  59. <p>大梦三千</p>
  60. </li>
  61. <li>
  62. <img src="../images/06.jpg" alt="">
  63. <p>别走了光</p>
  64. </li>
  65. </ul>
  66. </body>
  67. </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">
  40. </div>
  41. </body>
  42. </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. 【3D计算机图形学】变换矩阵、欧拉角、四元数

    [3D计算机图形学]变换矩阵.欧拉角.四元数 旋转矩阵.欧拉角.四元数主要用于:向量的旋转.坐标系之间的转换.角位移计算.方位的平滑插值计算.   一.变换矩阵: 首先要区分旋转矩阵和变换矩阵: 旋转 ...

  2. Centos 6.5 安装python3.6

    废话不多说,直接上步骤 wget https://www.python.org/ftp/python/3.6.2/Python-3.6.2rc1.tgz 进入 https://www.python.o ...

  3. Java字符串格式化记录

    最近打log的时候用到了字符串的格式化. Java中String格式化和C语言的很类似.把情况都列出来,以后好查询. public static void main(String[] args) { ...

  4. nyoj_120: 校园网络

    题目链接 要加边使一个图成为一个强连通分量,只需加max(出度为0的点数,入度为0的点数)条边(可以不使用tarjan算法).题目数据有点弱,网上一些人所谓 结果 = 出度为0的点的数量+入度为0的点 ...

  5. [bzoj 2243]: [SDOI2011]染色 [树链剖分][线段树]

    Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“ ...

  6. 使用Visual Studio加断点调试Unity游戏的C#代码

    1.安装Unity5.2.5 2.安装Microsoft Visual Studio 2013 3.打开VS2013,点击Tools | Extensions and Updates,然后在这个界面点 ...

  7. (转)Linux系统安装时分区的选择

    场景:对于Linux系统的分区总是迷迷茫茫的,还是实践少,基础不牢. 以前初识Linux时,对Linux系统安装时分区的选择,一点都不了解,导致几次没法进行下一步安装,因此就静下心来,专门拿出时间研究 ...

  8. iOS开发 MVVM+RAC 的使用

    好长一段时间没有敲简书了! 主要是因为一直在跑面试. 终于还是在上海入职了! 由于项目原因最终还是入了MVVM+RAC的坑 下面是正题. Demo效果 使用MVVM+RAC请求网络数据 Reactiv ...

  9. python中全局变量和局部变量的一个小坑

    python 中全局变量和局部变量在使用过程中的一个容易出错的地方 什么是全局变量 python中,在函数外部声明的变量可以叫做全局变量. x = 10 def fn1(): pass fn1() 什 ...

  10. Jenkins发布MVC应用程序

    一个大的项目一般都会进行模块化.层次化分隔,每个模块.每个层次都可能是一个或多个工程文件组成,而且各个模块都有依赖关系,有先后顺序,先build哪个然后再build哪个都是有顺序的,如果想build一 ...