前段 子绝父相

最新推荐文章于 2024-06-15 12:27:04 发布
最新推荐文章于 2024-06-15 12:27:04 发布
阅读量53 收藏
点赞数
文章标签： servlet html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOJO123123123123/article/details/127219951
版权

1.子绝父相

注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
    
​
      /* position: relative; */
      /* position: absolute; */
      position: fixed;
    }
​
    .box1 {
      width: 100px;
      height: 100px;
      background-color: tomato;
​
      position: absolute;
      top: 100px;
      right: 50px;
    }
  </style>
</head>
​
<body>
​
  <!-- 
​
  这三种情况，子元素设置绝对定位，参照元素都是父元素
​
    1.子绝父相（一般都用这个）
    子元素设置绝对定位，父元素设置相对定位
    2.子绝父绝
    子元素设置绝对定位，父元素设置绝对定位
    3.子绝父固
    子元素设置绝对定位，父元素设置固定定位
   -->
  <div class="wrap">
    <div class="box1">box1</div>
​
  </div>
​
</body>
​
</html>

二、CSS 透明

透明度属性

1、rgba(r,g,b,a)颜色模式

  • 兼容性：IE6、7、8下不兼容，IE9+支持

  • 使用： background-color属性、color属性、border-color属性等中设置透明度

  • 语法 rgba(r,g,b,a) r-red 取值范围0-255之间 g-green 取值范围0-255之间 b-blue 取值范围0-255之间 a-alpha 取值范围0-1之间表示半透明 1表示完全不透明 0表示完全透明

超出范围的值将被截至最近的极限值

2、opacity属性 透明度

  • 兼容性：IE6、7、8下不兼容，IE9+支持

  • 使用 将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

  • 取值 范围0-1之间表示半透明 0表示完全透明 1表示完全不透明

3、filter属性

  • 兼容性：仅仅支持IE6、7、8、9，在IE10及以上被废除

  • 使用： IE浏览器专属

  • 语法 filter:Alpha(opacity=n) n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明

  • 想用filter实现父元素背景透明，子元素不透明：

    父元素加静态定位,子元素加相对定位,能阻止透明度的传递

.box盒子有透明度
.box{
    background: red;
    opacity: .4;/* IE9+ */
    filter: Alpha(opacity=40);/* IE6|7|8|9兼容  */
}
​
​
.box{
            width:300px;
            height: 300px;
            background:red;
            filter:Alpha(opacity = 30);
            position: static;
           
        }
​
        .box span{
            background:blue;
            font-size: 40px;
          position: relative;
         }
   <div class="box">
        <span>东方闪电</span>
    </div>
​

三、CSS块级格式化

概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与， 它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

怎样生成BFC

  • 根标签（html标签）

  • float的值不为none

  • overflow 的值不为 visible

  • display 的值为 inline-block

  • position 的值为 absolute 或 fixed

BFC的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

BFC解决的问题

1.清除浮动

原因： 浮动会让其所在的父元素撑不起来高度

解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。

触发bfc的几个条件都可以用

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 400px;
            /* height: 300px; */
            background-color: pink;
​
            /* 5、计算BFC的髙度时，浮动子标签也参与计算。 */
​
            /* overflow: hidden;
            overflow: scroll;
            overflow: auto;
​
            float: left;
            float: right; */
​
            /* display: inline-block; */
​
            /* position: absolute; */
            position: fixed;
        }
​
        .wrap div {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
​
            float: left;
        }
​
        .wrap .box2 {
            background-color: tomato;
​
        }
    </style>
</head>
​
<body>
​
    <div class="wrap">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
​
</html>

2.兄弟塌陷

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面 反之亦然

触发bfc只有overflow属性能用

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
        }
​
        .box1 {
            background-color: tomato;
            margin-bottom: 100px;
​
​
        }
​
        .box2 {
            background-color: green;
​
            margin-top: 100px;
            margin-top: 200px;
        }
​
        /* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/
        .father {
            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
​
​
​
        }
​
        /*    解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面  反之亦然 */
    </style>
</head>
​
<body>
    <div class="father">
        <div class="box1">box1</div>
    </div>
​
​
    <div class="father">
        <div class="box2">box1</div>
    </div>
​
​
    <!-- 兄弟关系外间距塌陷问题
    现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；
    两个值一样大，取当前值
    两个值不同，取较大值
    原因：并列关系的两个元素共用了一个外间距区域
    解决办法：
    分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' -->
</body>
​
</html>

3.防止字体环绕

原因：浮动 脱离标准流不脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc除了（绝对，固定定位）属性其余都能用

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 2px solid red;
        }
​
        .wrap .box1 {
            width: 200px;
            height: 200px;
            background: pink;
​
            float: left;
        }
​
        .wrap .box2 {
            width: 300px;
            height: 200px;
            background: yellowgreen;
​
            /* 触发bfc */
​
            /* float: left;
            float: right; */
            /* 
            overflow: hidden;
            overflow: scroll;
            overflow: auto; */
​
            display: inline-block;
​
​
            /* 不能用 */
            /* position: absolute;
            position: fixed; */
        }
    </style>
</head>
​
<body>
    <div class="wrap">
        <div class="box1">box1</div>
        <div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>
        <!--  原因：浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。
​
        • 解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签
​
        • BFC 的区域不会与 float 的标签区域重叠 -->
    </div>
</body>
​
</html>

4.两栏自适应和三栏自适应

两栏自适应：左侧固定宽度 右侧自适应的状态 随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC） ​ 三栏自适应： 左右侧固定宽度 中间自适应 随着浏览器的窗口改变大小（左侧左浮动，右侧右浮动，中间触发BFC）

原因：浮动 脱离标准流不脱离文本流 ，浮动的标签提升层级会覆盖正常标签

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件 触发bfc只有overflow属性能用

  • 两栏自适应

    <!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap .left {
            width: 200px;
            height: 300px;
            background-color: red;
            float: left;
        }
​
        .wrap .right {
            height: 350px;
            background-color: aquamarine;
​
            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
​
​
            /* 以下不能用 */
            /* float: left;
            float: right; */
​
            /* display: inline-block; */
​
            /* position: absolute;
            position: fixed; */
​
        }
​
      
    </style>
</head>
​
<body>
    <div class="wrap">
        <div class="left">left</div>
        <div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>
    </div>
</body>
​
</html>

  • 三栏自适应

    <!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap .left {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
​
        }
​
        .wrap .right {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            float: right;
        }
​
        .wrap .center {
​
            height: 300px;
            background-color: pink;
​
            /* 触发bfc */
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
​
​
            /* 以下不能用 */
            /* float: left;
            float: right; */
​
            /* display: inline-block; */
​
            /* position: absolute;
            position: fixed; */
        }
​
        /* • 原因：浮动的标签会覆盖正常标签 • 
        解决办法(特性4)：BFC的区域不会与float的标签区域重叠 */
    </style>
</head>
​
<body>
    <div class="wrap">
        <div class="left">left</div>
​
        <div class="right">right </div>
        <div class="center">center哈哈哈哈哈哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵呵呵呵</div>
    </div>
</body>
​
</html>

四、阴影

1、盒子阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）
​
​
h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。  必需    单位： px
v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。   必需   单位： px
blur：阴影模糊度，不能取负数。 可选    单位： px
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选    单位： px
inset：表示添加内阴影，默认为外阴影。可选  
    box-shadow: 0 0 20px 10px green inset;
当 spread 为0时，阴影大小与元素大小相同
​
 .box1 {
            background-color: yellow;
            /* 多个阴影 */
            /* 盒子阴影 */
            box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;
        }

可以在一个元素上设置一个或多个阴影，阴影之间用逗号隔开

2、文字阴影

语法

text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;
​
h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；
color 可选，阴影的颜色；
.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开

五、圆角

    语法： border-radius: ;
    单位：px，百分比
​
    左上角：border-top-left-radius: ;
    右上角：border-top-right-radius: ;
    左下角：border-bottom-left-radius: ;
    右下角：border-bottom-right-radius: ;
​
  （1）一个值：设置四个角的圆角大小；
  （2）两个值：设置左上和右下、右上和左下的圆角大小；
  （3）三个值：设置左上、右上和左下、右下的圆角大小；
  （4）四个值：设置左上、右上、右下、左下的圆角大小。
​
    border-radius: 20px; 四个角都有圆角
    border-radius: 20px 40px; 左上角和右下角  右上角和左下角
    border-radius: 20px 40px 60px; 左上角  右上角和左下角 右下角
    border-radius: 20px 40px 60px 80px;  左上角 右上角 右下角   左下角  （顺时针角度）
    border-radius: 50%; 是一个圆形 宽高一样
JOJO123123123123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
YK菌的博客
12-06 2842
文章目录1. 为什么需要2. 定位组成定位 = 定位模式 + 边偏移2.1 定位模式2.2边偏移3. 静态定位 static （了解）4. 相对定位 relative （重要）5. 绝对定位 absolute （重要）6. 子绝父相的由来子级使用绝对定位，父级则需要相对定位相对定位经常用来作为绝对定位的父级因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到6. 固定定位 fixed （重要）小技巧：固定版心右侧位置7.
fork()子进程与父进程的关系（继承了什么）
qq_22613757的博客
03-23 6559
之前发过一篇博客**fork函数详解** #include<stdio.h> #include<string.h> #include<stdlib.h> #include<unistd.h> void main() { char str[6]="hello"; pid_t pid=fork(); if(pid==0...
CSS的定位-子绝父相
web$-小白
04-19 7654
1 定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 注意：边偏移就是定位的盒子移动到最终位置。必须有 top、bottom、left 和 right 4 个属性中的一个。 2 静态定位 static 静态定位是元素的默认定位方式，无定位的意思。 语法： 选择器 { position: static; } 静态定位按照标准流特性摆放位置，它没有边偏移
父页面向子页面传值
我欲乘风破浪
04-10 4137
整体的想法就是：（父页面）绑定一个事件，把this传给处理的函数，然后找到可以区分的信息内容，放到页面的一个特定的地方，（子页面）通过parent.找到相对应的内容，然后获取对应的内容即可 具体步骤实现： 父页面 我在需要点击的部分绑定了一个点击事件onclick="showIcon(this)"，然后一直索引索引，找到不同的地方var parentnode = node.parent...
非相关子查询和相关子查询执行过程详解
热门推荐
奋斗的小青年
12-13 1万+
前段时间有一个相关子查询的SQL语句，看不太懂他是如何执行的，为什么会出现那个结果。着实纠结了一把。下面来讲一下非相关子查询和相关子查询的执行过程是怎样的。 非相关子查询 先看一个非相关子查询到sql语句。 需求：查询学生表student和学生成绩表grade中成绩为70分的学生的基本信息。 select t.sno,t.sname,t.sage,t.sgentle,t.sbirth,
fork之后子进程到底复制了父进程什么
笔记
06-03 1616
fork之后子进程到底复制了父进程什么 发表于2015/4/3 9:54:08  2161人阅读 分类： 操作系统 #include #include #include #include void main() { char str[6]="hello"; pid_t pid=fork(); if(pid==0) { str[0]=
fork之后子进程与父进程关系
mfcheer
01-17 4653
#include #include #include #include void main() { char str[6]="hello"; pid_t pid=fork(); if(pid==0) { str[0]='b'; printf("子进程中str=%s\n",str); printf("子进程中str指向的
通过fork创建的子进程会拷贝父进程的代码段、数据段、静态数据段、堆、栈、IO缓冲区
weixin_51420051的博客
12-07 1504
通过fork创建的子进程会拷贝父进程的代码段、数据段、静态数据段、堆、栈、IO缓冲区 #include <stdio.h> #include <stdlib.h> #include <unistd.h> void func() { printf("我是函数%s\n",__func__); } int num = 0; int main() { static int num_s; int* p = malloc(4); pid_t pid
mysql 非相关子查询和相关子查询执行过程详解
qq690452074的专栏
02-28 1831
前段时间有一个相关子查询的SQL语句，看不太懂他是如何执行的，为什么会出现那个结果。着实纠结了一把。下面来讲一下非相关子查询和相关子查询的执行过程是怎样的。 非相关子查询 先看一个非相关子查询到sql语句。 需求：查询学生表student和学生成绩表grade中成绩为70分的学生的基本信息。 select t.sno,t.sname,t.sage,t.sgentle,t.sbirth,t.sdept from student t where t.sno in (select f.sno fr.
fork后子进程对父进程资源的继承
xlsernt_sina_com的专栏
06-16 5987
使用fork创建一个新进程后，子进程继承了
css入门笔记
05-15
6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 ...
计算机二级公共基础知识
04-30
在二叉树中，一个结点可以只有左子树而没有右子树，也可以只有右子树而没有左子树。当一个结点既没有左子树也没有右子树时，该结点即为叶子结点。 例如，一个家族中的族谱关系如图1-1所示： A有后代B，C；B有后代D，...
操作系统实验报告
01-10
要求父进程先接收子进程P1发来的消息，然后再接收子进程P2发来的消息。 二、实验目的 自行编制模拟程序，通过形象化的状态显示，加深理解进程的概念、进程之间的状态转换及其所带来的PCB内容 、组织的变化，理解...
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
weixin_42283461的博客
06-10 1210
HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 477
超文本标记语言（HTML）简介
DAY02 HTML
最新发布
adminstate的博客
06-15 763
HTML基础学习
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 703
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
latex段前段后间距
01-31
在LaTeX中，可以使用不同的方法来调整段前和段后的间距。以下是两种常用的方法： 1. 使用\vspace{}命令调整段前段后的间距： ```latex % 在段前添加20pt的间距 \vspace{20pt} 这是段落的内容。 % 在段后添加20pt的间距 \vspace{20pt} ``` 2. 使用setspace宏包调整段前段后的间距： ```latex \usepackage{setspace} % 单倍行间距 \singlespacing 这是段落的内容。 % 1.5倍行间距 \onehalfspacing 这是段落的内容。 % 双倍行间距 \doublespacing 这是段落的内容。 ``` 通过使用上述方法，您可以轻松地调整LaTeX文档中段前段后的间距。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值