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中,形成 ...
随机推荐
- PyQt(Python+Qt)学习随笔:QTableWidgetItem的构造方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidgetItem类为QTableWidget类的项实例类,用于保存表格部件的信息.项 ...
- 移动端点击300ms延迟问题
移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 解决方式 1. 禁用缩放 `<meta nam ...
- CF1400F - x-prime Substrings
1400F - x-prime Substrings 首先发现 \(x\) 很小,所以发现对应的 x-prime 字符串数也很少,最多的情况是 \(x = 19\),有 2399 个,先爆搜出来. 现 ...
- shell--数据库备份脚本
#!/bin/bash #数据库的完全备份 #把日期显示为170605(这个是当前的时间)的格式 date=$(date +%y%m%d) #计算下这个备份的数据库文件的大小 size=$(du -s ...
- JavaScript:记录一些字符串和数组常用的方法
字符串: 字符串的方法:注意:都不会改变原来的字符串,返回值为新的字符串.如果(1,2),一般是包含小标1,不包含下标2 str.charAt(i): 取str的第i+1个字符,类似数组的arr[i] ...
- .net core WebAPI性能监控-MiniProfiler与Swagger集成
------------恢复内容开始------------ 安装Nuget Install-Package MiniProfiler.AspNetCore.Mvc Install-Package M ...
- Linux查看、开启、关闭防火墙操作
一.防火墙区别 CentOS6自带的防火墙是iptables,CentOS7自带的防火墙是firewall. iptables:用于过滤数据包,属于网络层防火墙. firewall:底层还是使用 ip ...
- windows10 64位下安装oracle 11g和PL/SQL Developer
一.材料准备: oracle11g安装包(64位) oracle11g客户端(32位) PL\SQL Developer安装包(32位) 1.下载Oracle 11g链接:http://www.ora ...
- 使用pdfobject.js
一.下载pdfobject.js 二.CSS样式 <style type="text/css"> html, body, #pdf_viewer { width: 10 ...
- linux 配置本地yum源,配置国内yum源,配置epel源
目录 一.配置本地yum源 二.配置国内yum源和epel源 一.配置本地yum源 1.挂载ISO镜像 mount -o loop /mnt/yum-iso/CentOS-7-x86_64-DVD-1 ...