主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面。

例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个矩形,然后就是位置的选择。 这里用到的就是父相子绝,即父标签用到相对位置,子标签用到绝对位置,这样子标签的两个半圆就能贴到父标签,形成一个圆。

**注意:**


**1.这里面父标签需要用相对定位,使用绝对定位的话会脱离文档流,见下面例子。**
**2.标签写position(relative或者absolute)的话,就会以它的父级标签作为参考,如果父级没写css样式,那就会以body样式作为参考,如果也没写,就会以整个html页面作为参考。例如这里,如果父级不设置position的话,那么那两个子标签就会以整个html页面为参考点,而把矩形飘到页面的两端**




脱离文档流,其实就是不是按照页面中文本的顺序,一行一行的排班下来,而是按照自己的意愿,可能存在一些重叠,常用的办法就是定位和浮动。具体见以下几篇补充
**[什么是脱离文档流](https://zhidao.baidu.com/question/556990261.html)**
**[正常文档流和脱离文档流](https://www.cnblogs.com/masanhe/p/8318002.html)**
**[HTML元素脱离文档流的三种方法](https://www.cnblogs.com/ning123/p/11011845.html)**

下面这个例子,如果把父标签的相对定位改成绝对定位,那么和父标签相邻的test标签就会和该父标签重叠,也就是脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
div {
font-size: 15px;
color: #fff;
} .test1 {
width: 400px;
height: 400px;
background: #234;
position: relative;
} .test2 {
width: 300px;
height: 300px;
background: #345;
position: absolute;
left: 40px;
top: 40px;
} .test {
width: 500px;
height: 500px;
background: #123;
}
</style>
</head>
<body>
<div class="test1"> test1
<div class="test2">test2</div>
</div>
<div class="test"> test</div>
</body> </html>

CSS中的父相子绝布局的更多相关文章

  1. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

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

  2. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  3. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  4. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  5. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  6. css中合理的使用nth-child实现布局

    写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  7. python全栈开发day41-background、精灵图技术、定位(相、绝、固)、z-index

    一.昨日内容回顾 1.标准文档流定义: https://www.jianshu.com/p/b4d2c1dfd6e5 2.浮动和浮动的四大特性 1)脱标 2) 浮动元素相互贴靠 3)字围 4)紧凑(浮 ...

  8. css中定位功能的特性

    它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...

  9. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

随机推荐

  1. SQL Server关系的创建

    如果两个表的相关列都是主键或具有唯一约束,创建的就是一对一关系. 如果只有一列具有主键或唯一约束,则创建的时一对多关系 关联字段的字符类型必须相同. 1. 一对一关系 USE [Howie] crea ...

  2. 全国省市区 json sql 支付宝 2019年9月29日

    数据来源: https://docs.alipay.com/isv/10327 链接:https://pan.baidu.com/s/14cQCRzU6QxAvknDrQfhyUA 提取码:baaf ...

  3. UAC简介

    用户帐户控制 (User Account Control) 是Windows Vista(及更高版本操作系统)中一组新的基础结构技术,可以帮助阻止恶意程序(有时也称为“恶意软件”)损坏系统,同时也可以 ...

  4. hydra 常用命令解析

    参数说明: Hydra v9.0 (c) 2019 by van Hauser/THC - Please do not use in military or secret service organi ...

  5. sql语句优化的30种方法

    转载于:https://www.cnblogs.com/Little-Li/p/8031295.html 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的 ...

  6. MySQL管理工具 -- MySQL Workbench

    管理MySQL,可以使用可视化图形界面MySQL Workbench.MySQL Workbench是一个图形客户端,可以用可视化的方式查询.创建和修改数据库表.它对MySQL的操作仍然是发送SQL语 ...

  7. git 给分支添加描述 管理分支实用方法

    1.背景 在我们工作中,正常情况我们处在一个迭代中,一个人最多会有几个功能,比较正常的操作我们会给每个大功能创建不同的分支,方便管理. 我们可以非常愉快的进行版本管理,遇到特殊情况我们也可以方便版本退 ...

  8. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  9. Springboot2 Metrics之actuator集成influxdb, Grafana提供监控和报警

    到目前为止,各种日志收集,统计监控开源组件数不胜数,即便如此还是会有很多人只是tail -f查看一下日志文件.随着容器化技术的成熟,日志和metrics度量统计已经不能仅仅靠tail -f来查看了,你 ...

  10. Autoware 笔记 No. 5——基于GNSS的定位

    1. 前言 在之前的笔记No.2 中,我们直接采用ndt_matching的方法实现定位,但需要在打开rviz中,通过2D Pose Estimate指定初始位置.加入GNSS后,可以帮助ndt_ma ...