CSS入门笔记

最新推荐文章于 2023-12-12 22:18:29 发布

Start_Strive

最新推荐文章于 2023-12-12 22:18:29 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： html css

原文链接：https://blog.youkuaiyun.com/weixin_46383761/article/details/112089309?utm_medium=distribute.pc_category.none-task-blog-hot-20.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-20.nonecase

分层div,CSS定位position,层叠上下文
一. div分层
接下来就使验证div分层各元素位置，主要思路是重叠覆盖

1.1 背景范围是从哪到哪？背景颜色div在什么位置
背景范围是从border外边沿围成的区域。

思路
如何验证呢？

可以通过设置边框半透明来看

过程
代码如下

<head>
...
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .demo{
    box-sizing: border-box;
    margin: 12px;
    border: 10px solid rgba(255,0,0,1);
    padding: 22px;
    width: 100px;
    height: 100px;
    background: blue;
    color: white;
    }
  </style>
</head>

<body>
  <div class="demo">
    内容
  </div>
</body>

具体代码可以查看http://js.jirengu.com/vemax/1/edit?html,css,output

通过开发者工具调边框透明度1到0得到的效果如下
在这里插入图片描述
结论
红色变透明，蓝色显现–》可以得出背景范围是到border外边沿围成的区域结束，证明了background背景颜色在边框boder的下面

1.2 那文字内容在什么位置呢？
思路
从正面可以看出，内容是遮住了背景颜色，内容在background之上，那内容是不是在边框之上呢?

可以通过代码来验证。

过程
在上面代码基础上再在div里加上span元素( 内容),再给其设置字体变大的样式(.text{ font-size: 100px; color: green })。

具体代码可以查看http://js.jirengu.com/zifot/1/edit?html,css,output

可以看出效果如下
在这里插入图片描述
结论
从图里可以看出内容遮住了边框–》故内容在边框之上

1.3 那块级子元素在什么位置呢？
思路
通过添加块级子元素，使它和比较对象重叠

过程
还是通过代码验证下

<head>
...
<style>
    .demo{
    background: rgb(120,184,211);
    width: 200px;
    height: 200px;
    border: 15px solid rgba(255,0,0,1);
    padding: 10px;
  }
  .childDiv{
    background: white;
    height: 50px;
    margin-top: -10px;
  }
  </style>
</head>

<body>
  <div class="demo">
    我是文字内容
    <div class="childDiv"></div>
  </div>
</body>

在div里加了块级子元素childDiv，并设置了其样式为白色，向上移动了-10px

结论
可以看出块级子元素白色div在父div背景之上–》得出块级子元素在background之上。

有可以看出父div文字内容盖住了白色div–》可以得出文字内容即内联子元素在块级子元素之上

1.4 那浮动元素又在什么位置呢？
思路
在父div里添加绿色左浮div，并设置右外边距为-20px，使其和文字重叠。

过程
代码如下

<head>
...
  <style>
    .demo{
    background: rgb(120,184,211);
    width: 200px;
    height: 200px;
    border: 15px solid rgba(255,0,0,1);
    padding: 10px;
  }
  .childDiv{
    background: white;
    height: 50px;
  }
  .float{
    float: left;
    background: green;
    height: 50px;
    width: 50px;
    color: red;
    margin-right: -20px;
  }
  </style>
</head>

<body>
  <div class="demo">
    我是文字内容
    <div class="float"></div>
    <div class="childDiv"></div>
  </div>
</body>