css块级元素
《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现
内联元素中只能放内联元素。表现为行布局
块元素可以放块元素和内联元素
正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度;
设置绝对定位/固定定位/浮动会脱离文档流;
脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度;
给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。(显示高宽为内容撑开,脱离父元素掌控)
问:
如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?
我用js取这个元素的父节点的childNodes还能否取到这个元素;
同时,这个元素的parentNode还是不是html中的父节点?
//脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右,自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制,把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是,dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。
CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
特殊:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
css块级元素的更多相关文章
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- 02 CSS块级元素和行内元素
02 CSS块级元素和行内元素 划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关. 要先了解这个 得先了解 什么是容器级别的标签和文本级? 容器级标签 什么是容器级标签? 内部 ...
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- css块级元素、行内元素
说说对html页面元素的排列认识: html中所有元素从上到下排列,所以需要css来对其中的元素进行排序.调节样式,并用js为其添加交互效果. css的排序.定位是相对块级元素而言的,margin/p ...
- CSS/块级元素与内联元素的深入理解
今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- CSS 块级元素、内联元素概念
p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong.span等元素称为行内元素,它们的内容显示在行中,即“行内框”.(可以使用display=block将行内元素转换成块元 ...
- CSS块级元素、内联元素概念[转]
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
随机推荐
- DataFoundation比赛总结
2018.3.20号左右,因为研究生的数据挖掘课程的老师要求我们集体参加一个比赛 ,所以在比赛参与时间.比赛难度和比赛类型的几种条件下,我们选择了2018平安产险数据建模大赛-驾驶行为预测驾驶风险比赛 ...
- CodeForces - 755B PolandBall and Game(博弈)
题意:A和B两人每人都熟悉一些单词.A先开始,每人说一个单词,单词不能与两人之前说过的所有单词重复,谁无话可说谁输.两人可能有共同会的单词. 分析:因为要让对方尽量无单词可说,所以每个人优先说的都是两 ...
- mfc WebBrowser打开本地网页
本地路径要用file协议,例子:file:///c:/abc/def.html注意点:file:后面是3个正斜杠,路径中用正斜杠(不是标准的反斜杠).如果你觉得IE地址栏支持标准的路径写法,那么你就错 ...
- ubuntu12.04安装JDK8
系统里已经有jdk1.6,下载并解压jdk后,按照网上的教程(bash.bashrc)没成功. sudo update-alternatives --install /usr/bin/java jav ...
- Spring 面向切面编程(AOP)
Spring 系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of ...
- Spring-ResolvableType可解决的数据类型
ResolvableType,可解决的数据类型.它为java语言中的所有类型提供了相同的数据结构,其内部封装了一个java.lang.reflect.Type类型的对象. 在讲解这个数据结构之前,首先 ...
- 一、VIP课程:互联网工程专题 04-Maven私服使用与插件开发
第四课:Maven私服构建与插件开发.docx 一.maven 生命周期 知识点概要: 生命周期的概念与意义 maven 三大生命周期与其对应的phase(阶段) 生命周期与插件的关系 生命周期与默认 ...
- 修改element-ui里table中悬浮框中三角号的颜色及透明度设置
.el-tooltip__popper,.el-tooltip__popper.is-dark{background:rgba(0,0,0,0.6) !important;} .el-tooltip_ ...
- CSS - 自学笔记
2018-12-14 ----- 1 所有元素的锚点默认就是它的物理中心 2 改变锚点位置的方法: transform-origin: x-axis y-axis z-axis; 3 ps里在层级里选 ...
- JVM探秘:jinfo查看JVM运行时参数
本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. 如何查看JVM运行时参数,对于线上JVM调优是很关键的,因为只有知道了当前使用的JVM ...