CSS-position 属性

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动(float)和绝对定位(position)。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

标准文档流的概念

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。

  1. 行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域,从左到右排列。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
  2. 块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

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 属性&元素脱离文档流引发父级边框塌陷问题的更多相关文章

  1. css中哪些属性会脱离文档流

    一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中

  2. HTML元素脱离文档流的三种方法

    一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...

  3. float的元素脱离文档流,但不完全脱离,只是提升了半层;

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

  4. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  5. 子元素position:absolute定位之后脱离文档流,怎么使子元素撑开父元素

    纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...

  6. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  7. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  9. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

随机推荐

  1. 第11.22节 Python 中re模块的字符串分割器:split函数

    一. 引言 在<第11.2节 Python 正则表达式支持函数概览>介绍了re模块的主要函数,在<第11.3节 Python正则表达式搜索支持函数search.match.fullm ...

  2. PyQt(Python+Qt)学习随笔:Qt Designer中部件的windowTitle和windowOpacity属性

    windowOpacity 这个属性仅对window对象生效. windowOpacity为浮点数,表示透明度,为1完全不透明,为0完全透明,缺省是1. 可以通过windowOpacity().set ...

  3. 课堂练习之疫情APP

    title: 课堂练习之疫情查询APP date: 2020-03-17 20:08:51 tags: 在之前的体温记录APP上改进,只写出疫情信息查询页面的代码. 实体类与上篇博客SSM整合中的Ci ...

  4. edusrc上海交通大学证书

  5. 再次学习sql注入

    爆所有数据库 select schema_name from information_schema.schemata 先爆出多少个字段 id = 1 order by ?; mysql5.0及以上 都 ...

  6. django 验证码

    1.django 缓存设置 django的六种缓存(mysql+redis) :https://www.cnblogs.com/xiaonq/p/7978402.html#i6 1.1 安装Djang ...

  7. 聊聊Spring的FactoryBean其实没那么难

    前言 谈到Spring的FactoryBean,就会知道Spring中经典的面试题:FactoryBean和BeanFactory的区别.我们这里就简单概括下: . BeanFactory是接口,提供 ...

  8. Excel优雅导出

    流程 原来写过一篇文章,是介绍EasyExcel的,但是现在有些业务需要解决,流程如下 1.需要把导出条件转换成中文并存入数据库 2.需要分页导出 3.需要上传FTP或者以后上传OSS 解决方案 大体 ...

  9. java-02-基础语法

    1.分支语句 if语句 格式 if(关系表达式1){语句1} else if(关系表达式2){语句2} else{语句3}; 说明 如果关系表达式1的值为true,执行语句1. 如果关系表达式2的值为 ...

  10. 01-docker基本使用

    docker 常用命令 指令 说明 docker images 查看已经下载的镜像 docker rmi 镜像名称:标签名 删除已经下载的镜像 docker search 镜像 从官方仓库中查看镜像 ...