CSS中的父相子绝布局
主要应用场景，就是我想要块的布局根据父级来定位，而不是根据页面。
例如，下面的例子中，我用两个半圆拼成一个正圆，思路是用一个父级标签把两个子标签包起来，父标签是一个正圆，然后子标签各占一半，先化成两个矩形，然后就是位置的选择。 这里用到的就是父相子绝，即父标签用到相对位置，子标签用到绝对位置，这样子标签的两个半圆就能贴到父标签，形成一个圆。
**注意：**
**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中的父相子绝布局的更多相关文章
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- CSS定位中“父相子绝”
一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- css中合理的使用nth-child实现布局
写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...
- python全栈开发day41-background、精灵图技术、定位（相、绝、固）、z-index
一.昨日内容回顾 1.标准文档流定义: https://www.jianshu.com/p/b4d2c1dfd6e5 2.浮动和浮动的四大特性 1)脱标 2) 浮动元素相互贴靠 3)字围 4)紧凑(浮 ...
- css中定位功能的特性
它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值！
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
随机推荐
- git 入门教程之 git bash 竟然不支持 tree 命令
开门见山 git bash 是 Windows 用户安装 git 时默认安装的命令行工具,不仅界面漂亮功能也不错,大多数情况下可以替代 Windows 原生的 cmd 命令行. 然而,git bash ...
- 合并K个有序数组-Java
package com.rao.algorithm; import java.util.Arrays; /** * @author Srao * @className MergeK * @date 2 ...
- linux-部署2
gunicorn+supervisor 1.gunicorn 安装: pip3 install gunicorn 配置: 两种方式:命令和文件,因为配置项比较多,所以放在文件里,启动时指明配置文件即可 ...
- 日常笔记6C++标准模板库（STL）用法介绍实例
一.vector常见用法详解 vector翻译为向量,但是这里翻译成变长数组的叫法更好理解. 如果typename是一个STL容器,定义的时候要记得在>>符号之间加上空格,因为在C++11 ...
- 家用环境下部署wifidog认证服务器(java版)
本文所讲的是基于一个java版wifidog认证服务器的开源项目,在windows环境下搭建wifidog认证服务器配合apfree固件实现用户名密码的认证. 大致步骤如下: 一,准备 1.搭建硬件及 ...
- [NewLife.XCode]角色权限
NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...
- k8s修改pod的hosts文件
1.在1.7版本后使用HostAliases修改pod的hosts文件.该文件由kubelet管理 在deployment的yaml文件中添加在pod template 的spec里面即可: apiV ...
- 机器学习（九）-------- 聚类(Clustering) K-均值算法 K-Means
无监督学习 没有标签 聚类(Clustering) 图上的数据看起来可以分成两个分开的点集(称为簇),这就是为聚类算法. 此后我们还将提到其他类型的非监督学习算法,它们可以为我们找到其他类型的结构或者 ...
- Zabbix设置自定义监控项之——监控tcp连接状态
目录 一.用户自定义参数 二.配置 监控 TCP 连接状态 在实际监控中,除了官方自带的一些监控项,我们很多时候有一些定制化监控,比如特定的服务.TCP 连接状态等等,这时候就需要自定义监控项.自定义 ...
- SQL Server备份时间段内插入的数据依旧进入了备份文件？（转载）
问 MSSql我在本机测试了下.为了延长备份时间,找个大的数据库.开始完整备份bak然后再此库新建表,并增添数据.备份结束.==================还原备份后,在还原的数据库内发现新增的表 ...