没有高度的div中的子元素高度自动撑开
直接上代码:
很多时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 没有高度的div */
.box{
padding: 20px;
background: #ccc;
position: relative;
margin-bottom: 20px;
border-radius: 40px;
overflow: hidden;
}
/* 定位在左边的伪类 */
.box:after{
position: absolute;
width: 20px;
content: '';
top: 0;
left: 0;
bottom: 0;
background: red;
}
/* 设置top 和 bottom 让高度撑开 */
.box>span{
position: absolute;
width: 20px;
content: '';
top: 0;
right: 0;
bottom: 0;
background: red;
} /* 文字中划线 拓展 margin:auto 0 上下垂直居中 left right设置左右距离, top bottom上下距离一致*/
.box:before{
position: absolute;
height: 2px;
content: '';
top: 0;
left: 50px;
bottom: 0;
right: 50px;
background: red;
margin: auto 0;
}
</style>
</head>
<body>
<div class="box">高度不确定,padding撑开的,还有伪类<span></span></div> <div class="box">高度不确定,padding撑开的,还有伪高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类类</div>
</body>
</html>
都会遇到 高度不确定的父元素, 子元素又是定位的, 让子元素撑开的时候
没有高度的div中的子元素高度自动撑开的更多相关文章
- 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？
前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...
- 微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 可编辑div中包含子元素时获取光标位置不准确的问题
前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...
- CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- css浮动中避免包含元素高度为0的4种解决方法
问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both (W3C推荐方法,兼容性较 ...
- 当display=none时，元素和子元素高度为0的解决办法
在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...
- AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
随机推荐
- 在 Debian 和 Ubuntu 上安装 Cutefish 可爱鱼
版权声明:原创文章,未经博主允许不得转载 CutefishOS 是一个可爱好看的新 Linux 发行版,当前最新版本为 0.8beta .这是一个基于 Debian 的发行版,从其镜像源配置就可以明显 ...
- tp6 的安装步骤 及简易命令
1:https://www.kancloud.cn/manual/thinkphp6_0/1037481 官网下载 composer create-project topthink/think tp6 ...
- Java基础：ThreadLocal及其原理
ThreadLocal的用处 ThreadLocal是一个多线程的辅助工具类,目的是方便开发者维护多线程中的共享变量.我们知道如果我们想要在一个线程中一直访问一个变量或者在线程上下文中保存一个变量,我 ...
- (acwing蓝桥杯c++AB组）2.1 二分
二分与前缀和 文章目录 二分与前缀和 二分 整数二分核心思想 整数二分模板 整数二分步骤总结: 题目链接 实数二分核心思想: 题目链接 三分法思想: 二分 难点:二分的边界问题 整数二分核心思想 确定 ...
- ArcMap从建库到出图
1前言 本篇博主将介绍关于ArcMap建库.数据采集.拓扑检查.图表.制作符号等的基本操作. 2问题阐述 (1)检查现有block(线要素)图层,保证所有要素闭合,并将其转换为parcel(面要素): ...
- OpenCv基础_四
Harris角点检测 理解 内部点:蓝框所示,无论滑动窗口水平滑动还是竖直滑动,框内像素值都不会发生大的变化 边界点:黑框所示,滑动窗口沿着某一个方向滑动框内像素点不会发生大的改变,但是沿着另一个方向 ...
- 依图语音API的C#封装以及调用进行语音转写的处理
对于语音识别,一般有实时语音识别和语音文件的识别处理等方式,如在会议.培训等场景中,可以对录制的文件进行文字的转录,对于转录文字的成功率来说,如果能够转换90%以上的正确语音内容,肯定能减轻很多相关语 ...
- 韦东山 嵌入式linux教程 笔记
@ 目录 资源链接 一.常用命令 二.shell 三.如何更改PATH? 四.路径 五.vi编辑器 六.进阶命令 七.NAT配置网络 (第2篇-P34) 八.开发板挂载 Ubuntu 的 NFS 目录 ...
- 从零开始，开发一个 Web Office 套件（12）：删除文字 & 回车换行
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 盘点几种DIY加密狗的制作方法，适用于穿越机模拟器
前言 前几天笔者的加密狗在使用中突然坏掉了,现象是插电脑不识别,LED灯不亮. 网上很多模友也反映了同样的问题: http://bbs.5imx.com/forum.php?mod=viewthrea ...