定位

  • static - 默认值 (几乎不用,了解就可以)

absolute - 绝对定位,不为元素预留空间,脱离文档流:

  1. 如果当前元素的父级元素是<body>元素的话 -> 是相对于当前页面的定位
  2. 如果当前元素的父级不是<body>元素的话,父级元素没有开启定位 -> 则是相对于页面的定位
  3. 如果当前元素的父级不是<body>元素的话,父级元素开启定位 -> 则是相对于父级元素定位
  1.     <style>
  2.         body {
  3.             margin: 0;/* 去掉浏览器默认的外边距8px */
  4.         }
  5.         div {
  6.             width: 200px;
  7.             height: 200px;
  8.             background-color: cyan;
  9.             /*
  10.                 开启绝对定位
  11.                 1.当前元素脱离文档流
  12.                 2.如果不设置位置的偏移量的话，位置不会有任何变化的
  13.              */
  14.             position: absolute;
  15.             /*
  16.                 设置定位的偏移量:
  17.                  * 水平方向正值 - 向右移动
  18.                  * 水平方向负值 - 向左移动
  19.                  * 垂直方向正值 - 向下移动
  20.                  * 垂直方向负值 - 向上移动
  21.             */
  22.             top: 100px;
  23.             left: 100px;
  24.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div></div>
  30. </body>

fixed - 固定定位,不为元素预留空间:

  1. 是相对于窗口来定位元素位置,脱离文档流
  1.     <style>
  2.         body {
  3.             margin: 0;
  4.             height: 1000px;
  5.         }
  6.         #d1 {
  7.             width: 200px;
  8.             height: 200px;
  9.             background-color: #83c44e;
  10.             /* 开启固定定位 - 相对于浏览器窗口的定位 */
  11.             position: fixed;
  13.             left: 100px;
  14.             top: 100px;
  15.         }
  16.         #d2 {
  17.             width: 200px;
  18.             height: 200px;
  19.             background-color: cyan;
  21.             position: absolute;
  23.             left: 500px;
  24.             top: 100px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div id="d1"></div>
  30. <div id="d2"></div>
  31. </body>

relative - 相对定位,不脱离文档流

  1. 相对定位是相对于自身元素原来的位置的定位
  1.     <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         #d1{
  6.             width: 200px;
  7.             height: 200px;
  8.             background-color: cyan;
  9.             /* 外边距 */
  10.             margin: 100px;
  11.         }
  12.         #d2{
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: #ffac13;
  16.             /* 外边距 */
  17.             margin-left: 100px;
  18.             /* 相对定位是相对于自身元素原来的位置的定位 */
  19.             position: relative;
  20.             left: 100px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div id="d1">
  26.     <div id="d2"></div>
  27. </div>
  28. </body>

定位的方式解析图:

堆叠

  • z-index属性值大的在上方,小的在下方,就是所z-index属性值大的覆盖小的
  1.  <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         div{
  6.             width: 200px;
  7.             height: 200px;
  8.         }
  9.         #d1{
  11.             background-color: cyan;
  12.             /* 开启绝对定位 */
  13.             position: absolute;
  14.             /* 开启定位后设置偏移量 */
  15.             left: 150px;
  16.             top: 150px;
  17.             z-index: 2323;
  18.         }
  19.         #d2{
  20.             background-color: #ffac13;
  22.             /* 开启相对定位 */
  23.             position: relative;
  24.             /* 开启定位后设置偏移量 */
  25.             left: 50px;
  26.             top:50px;
  27.             z-index:1;
  28.         }
  29.         /*
  30.             必须是当前元素开启定位的情况下,z-index属性才会有效
  31.                 当多个属性设置z-index属性时 - 值大的会覆盖值小的
  32.          */
  33.     </style>
  34. </head>
  35. <body>
  36. <div id="d1"></div>
  37. <div id="d2"></div>
  38. </body>

堆叠分析图:

继承于层叠

继承

  • 继承就是父级元素的属性,子级元素使用可以不用设置直接使用
  • 注意: CSS属性中不是所用属性都可以继承
  • CSS的样式属性:
  1. 可继承的属性 - 指定元素的样式,同时作用其后代元素
  2. 不可继承的属性 - 只能作用在指定的元素

备注: 继承中有一个inherit值 - 就是是继承于祖先元素属性的意思,当子级元素的属性设置inherit值时代表继承父级元素使用的属性值.

  1.     <style>
  2.         /*
  3.             CSS的样式属性:
  4.              1. 可继承的属性 - 指定元素的样式,同时作用其后代元素
  5.              2. 不可继承的属性 - 只能作用在指定的元素
  6.          */
  7.         body{
  8.             /*
  9.                 页面中的默认的字体大小为 16px
  10.                 页面中的默认的颜色为黑色
  11.              */
  12.             font-size: 148px;
  13.             color: cyan;
  14.         }
  15.         p{
  16.             /*
  17.                 inherit值 - 是继承于祖先元素属性的意思
  18.                 当前样式属性的值是继承于祖先元素
  19.              */
  20.             font-size: inherit;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <p>一花一世界,一叶一孤城</p>
  26. </body>

继承于层叠分析图

层叠

  • 就是选择器的优先级别,当为某个选择器设置 !important 时该选择器优先级别最大
  • 注意: 为某个选择器设置!important时会打乱原本选择器的优先级别的规则可能会影响整个页面布局,所以能不用就不用,知道有这个东西就行

HTML与CSS中的定位个人分享的更多相关文章

  1. CSS中的定位与浮动

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

  2. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  3. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. CSS中的定位机制

    CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...

  7. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

  8. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  9. HTML与CSS中的文本个人分享

    文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...

随机推荐

  1. 使用mybatis-generator-core-1.3.2.jar根据数据库表自动生成实体

    1 导入mybatis-generator-core-1.3.2.jar 2配置mbg.xml <?xml version="1.0" encoding="UTF- ...

  2. WPF 绑定数据方式

    ======================================================================== Foreground="{Binding P ...

  3. 那些年我们经历的BT面试题

    初入职场面试的我到处碰壁,以下是我个人对几道面试题的小总结: 1.一列数字的规则如下:1,1,2,3,5,8,13,21, 34........ 求第30位数字是多少,用递规和非递归两种方法算法实现. ...

  4. vue-loader分析

    分析一下Vue2.0中的vue-loader是如何处理.vue单文件组件的: 1.vueLoaderplugin 作用是 找到.vue,.vue.html的rules然后在他们的rule里添加 pit ...

  5. Golang http post error : http: ContentLength=355 with Body length 0

    参考:https://stackoverflow.com/questions/31337891/net-http-http-contentlength-222-with-body-length-0 问 ...

  6. django连接和游标

    连接和游标主要实现 PEP 249中描述的Python DB API标准——除非它涉及到事务处理. 如果你不熟悉Python DB-API,注意cursor.execute()中的SQL语句使用占位符 ...

  7. ERROR 1045 (28000): Access denied for user 'xxx'@'localhost' (using password: YES)

    #  Bug描述 今天周末,在家里学点新技术,虽然公司分配的任务没有完成(滑稽滑稽) 我先创建了一个mysql数据库,用root用户创建一个新用户,毕竟项目中使用root是非常危险的,尤其是我这样的实 ...

  8. 一次性计划任务at与周期性计划任务crontab

    一.at一次性计划任务使用 at语法格式: at 时间 at设置计划任务 1.下载at程序 [root@li ~]# yum install at -y 2.启动atd服务 [root@li ~]# ...

  9. Canvas入门08-绘制仪表盘

    需求 实现下图所示的仪表盘的绘制. 分析 我们先来将仪表盘进行图形拆分,并定义尺寸. 我们绘制的逻辑: 绘制中心圆 绘制环外圈圆 绘制环内圈圆 绘制刻度内圈圆 绘制刻度线 绘制刻度文字 绘制指针 定义 ...

  10. 深入分析微博密码加密and百万级数据采集分享（登录篇）

    一.前言 此文章主要是对微博微博关键词的检索结果进行采集,但是微博的采集需要登陆,所以此程序分为登陆程序和爬虫程序两部分: 微博要实现规模性数据采集自然少不了大量账号,这就需购买大量账号以及批量登陆, ...