CSS-position 属性&元素脱离文档流引发父级边框塌陷问题
CSS-position 属性
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动(float)和绝对定位(position)。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
标准文档流的概念
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。
- 行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域,从左到右排列。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
- 块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:
static(默认值)
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
(相对于原来本身的位置通过top,bottom,left,right 定位,并且可以通过z-index进行层次分级。)
absolute
元素框从文档流完全删除(脱离标准文档流),并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
(通过 top,bottom,left,right 定位,定位的起始位置为最近的父元素(postion不为static),否则为Body坐标原点,可以通过z-index进行层次分级。)
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
(固定定位,脱离文档流,相对于浏览器窗口进行定位,在拖拽页面滚动条时,该元素不会随其一起滚动,可以通过z-index进行层次分级。)
FAQ:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
元素脱离文档流引发父级边框塌陷问题
如果使用position:absolute和position:fixed都会导致元素脱离文档流,由此就会产生相应的问题:子元素脱离文档流,父元素无法被撑开。
解决方法:
- 将父级边框的高度height写成一个固定的高度。
- 增加一个空的div标签, 清除浮动。设置样式。
clear: both;
- 父类增加一个伪类
.demo:after{
content: '';
display: block;
clear: both;
}
- 设置overflow属性
overflow: scroll;
CSS-position 属性&元素脱离文档流引发父级边框塌陷问题的更多相关文章
- css中哪些属性会脱离文档流
一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中
- HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
- float的元素脱离文档流,但不完全脱离,只是提升了半层;
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS脱离文档流&浮动
什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...
随机推荐
- 第11.22节 Python 中re模块的字符串分割器:split函数
一. 引言 在<第11.2节 Python 正则表达式支持函数概览>介绍了re模块的主要函数,在<第11.3节 Python正则表达式搜索支持函数search.match.fullm ...
- PyQt(Python+Qt)学习随笔:Qt Designer中部件的windowTitle和windowOpacity属性
windowOpacity 这个属性仅对window对象生效. windowOpacity为浮点数,表示透明度,为1完全不透明,为0完全透明,缺省是1. 可以通过windowOpacity().set ...
- 课堂练习之疫情APP
title: 课堂练习之疫情查询APP date: 2020-03-17 20:08:51 tags: 在之前的体温记录APP上改进,只写出疫情信息查询页面的代码. 实体类与上篇博客SSM整合中的Ci ...
- edusrc上海交通大学证书
- 再次学习sql注入
爆所有数据库 select schema_name from information_schema.schemata 先爆出多少个字段 id = 1 order by ?; mysql5.0及以上 都 ...
- django 验证码
1.django 缓存设置 django的六种缓存(mysql+redis) :https://www.cnblogs.com/xiaonq/p/7978402.html#i6 1.1 安装Djang ...
- 聊聊Spring的FactoryBean其实没那么难
前言 谈到Spring的FactoryBean,就会知道Spring中经典的面试题:FactoryBean和BeanFactory的区别.我们这里就简单概括下: . BeanFactory是接口,提供 ...
- Excel优雅导出
流程 原来写过一篇文章,是介绍EasyExcel的,但是现在有些业务需要解决,流程如下 1.需要把导出条件转换成中文并存入数据库 2.需要分页导出 3.需要上传FTP或者以后上传OSS 解决方案 大体 ...
- java-02-基础语法
1.分支语句 if语句 格式 if(关系表达式1){语句1} else if(关系表达式2){语句2} else{语句3}; 说明 如果关系表达式1的值为true,执行语句1. 如果关系表达式2的值为 ...
- 01-docker基本使用
docker 常用命令 指令 说明 docker images 查看已经下载的镜像 docker rmi 镜像名称:标签名 删除已经下载的镜像 docker search 镜像 从官方仓库中查看镜像 ...