CSS入门笔记

分层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>

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

效果图如下
在这里插入图片描述

结论
可以看出绿色浮动元素盖住了白色不浮动元素–》得出浮动元素在块级子元素的上面。

可以看出文字盖住了绿色浮动元素–》得出内联子元素在浮动元素的上面

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值