(17)HTML标准文档流
在我们遇到的 HTML 元素中,有的标签元素如 <div>、<p> 等在浏览器中加载时必须独自占满一行,有的标签元素如 <a> 、<span>等则不会独占一行,原因是什么?
一、什么是标准文档流?
标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。前面内容发生了变化,后面的内容位置也会随着发生变化。HTML就是一种标准文档流文件。HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级。
1.1微观现象:
①空白折叠现象。 ②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。③自动换行,元素内一行内容写满元素的 width 时会自动进行换行。
二、元素等级
在标准流中,大部分元素是区分等级的,习惯将元素划分为几种常见的加载级别:块级元素、行内元素、行内块元素等。
块级元素:大部分容器级标签包括p标签都是块级元素,比如 <div> 、<h1> 等。
行内元素:大部分的文本级标签,比如 <span>、<a>、<b> 等。 •行内块元素:比如 <img>、<input> 等。
各种等级的元素有自己的加载特点。
2.1块级元素
a、块级元素可以设置宽高,在浏览器中正常加载。
b、块级元素必须独占一行,不能与其他任何标签并排一行。
c、块级元素如果不设置宽度,会自动撑满父级的 width 区域;高度不设置,会被内容自动撑开高度。
2.2行内元素
a、行内元素不能正常加载宽度和高度属性,其他的盒模型属性虽然能设置,但是容易出现加载问题。
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高,宽度和高度都只能被内容自动撑开。
2.3行内块元素
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高,要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质,例如空白折叠现象。
(17)HTML标准文档流相关推荐
- html脱离标准文档流,关于css脱离标准文档流的两种方式
所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. 不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个浮动一个不浮动,则浮动的盒子会覆 ...
- css样式脱离标准文档流
标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 元素脱离标注文档流之后,将不再在标准流中占据空间, ...
- html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流 文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
- 继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
- css span 右端对齐_CSS标准文档流
web页面的制作,是个"流",像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为. 标准文档流的一些微观现象 1. 空白折叠现象 1) ...
- (前端)html与css css 15、标准文档流
标准文档流 常用的Word文档就是一个经典的标准文档流,内容必须是从上往下,从左往右书写的,有一个光标控制,前面的大小或者内容发生变化,后面的内容会跟着发生一些位置变化. 制作的html网页就是一个标 ...
- 脱离标准文档流(1)---浮动
浮动 标准文档流 标准文档流分为三种:块级元素,行内元素. 标准文档流无法做到使两个盒子并排放在一起. 我们可以通过使块状元素或者行内元素转化为行内块元素,来做到将两个和盒子放到一排. 小偏方 运用d ...
- 关于css脱离标准文档流的两种方式
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- CSS:标准文档流、浮动、绝对定位—(解决有时候父元素不能自动扩展)
CSS(表现标准语言)的三种定位机制 标准文档流:从上到下.从左到右,由块级标签(独占一行div ul li dl dt )和行级元素(同一行显示)组成 自动居中 margin:0 auto:设置ma ...
最新文章
- 如何通过中序和层序序列建立二叉树
- java 数组降序_Java里的数组降序
- linux脚本或关系表达,Shell运算符:Shell算数运算符、关系运算符、布尔运算符、字符串运算符等...
- IOS Animation-CAShapeLayer、UIBezierPath与Animation的结合
- Hadoop学习记录(4)|MapReduce原理|API操作使用
- NYOJ--458 小光棍数
- 分区丢失导致文件丢失?巧用EasyreCovery找回
- csv文件导入后台乱码_win7系统下excel打开csv文件出现乱码怎么修复
- 视频语音自动生成字幕文件的免费软件工具,日剧,美剧都能看懂了
- 从经典到最新前沿,一文概览2D人体姿态估计
- iphone与计算机连接,苹果usb怎么与电脑连接_苹果怎么设置与电脑连接的图文步骤...
- 大中型 UGC 平台的反垃圾(anti-spam)工作
- 柠檬班的课程怎么样,来自一个金融行业转行到软件测试行业的故事
- Weakly-supervised Online Hashing
- 竞价实例 and 弹性伸缩的结合
- 阿里云腾讯云服务器安装oracle11g
- mac电脑删除多余输入法
- unity Quality Settings 质量设置
- 将knif4j快速集成到springboot项目中
- 一个想法:成立草根技术联盟对开发人员进行技术定级解决企业员工招聘难问题!