2021-08-23 4.5 文档流定位方式flow

于 2021-08-23 18:00:32 发布
阅读量295 收藏
点赞数
分类专栏： # CSS # web前端设计与开发 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjj8008120308/article/details/119874439
版权

1.文档流定位方式，所有的元素从左到右，从上到下依次排列。对于每个元素来说，根据自己的不同分类，有自己的特征，有的元素独占一行，有的元素会跟其他元素排列在一行。那么元素的分类有三种类型
在这里插入图片描述

（1）block：独占一行，元素的height、width、margin、padding等属性都可以设定。常见的block类型的元素：div、p、h1…h6、ol、ul、table、form等。
（2）inline：不单独占一行，宽度够用的情况，所有inline类型的元素都在一行显示；width、height不可以设置；width就是它包含的文字或图片的宽度，不可改变。常见的inline类型的元素：a、span等。

inline元素之间有一个间距的问题
两个inline元素水平排列开的时候默认带有间隙，通常情况下最简单的方式就是将inline类型的元素转换成block类型或其它类型的元素来进行的显示。这也是为什么我们在做导航条的时候，尽管a标签元素是可以默认水平排列的，但是我们也不用这种方式，而是在每个a标签外面用p标签或者ul标签来进行这种超链接的设置。默认的inline类型的元素有间隙问题，处理起来比较麻烦。

（3）inline-block：就是同时具备inline元素、block元素的特点。不单独占用一行，元素的height、width、margin、padding等属性都可以设定。可以把这种元素看成是可以水平排列的block类型的元素。常见的inline-block类型的元素：img等。
2.可以通过display属性来对元素的类型进行转换
例如
在这里插入图片描述
3.案例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin:0;
	}	
	#nav{
		margin: 0 auto;
		width: 300px;
		font-size: 0;
	}
	a{  /*否则无法设置高度宽度等*/					
		display: inline-block;
		/*盒子的样式*/
		width: 80px;
		height: 30px;
	border-bottom: 1px solid #ccc;
		/*超链接文本*/
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		text-decoration: none;
	}
	a:hover{
		color: white;
		background-color: #ccc;
		border: 1px solid;
		border-left-color: orange;
		border-top-color: orange;
		border-right-color: orange;
	}
	/*父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白*/
	</style>
</head>
<body>
<div id="nav">
	<a href="#">链接1</a>
	<a href="#">链接2</a>
	<a href="#">链接3</a>
</div>
</body>
</html>

实现效果
默认：

在这里插入图片描述
鼠标悬停到超链接内：
在这里插入图片描述

小昔超厉害
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
iPhone开发秘籍
12-16
9.11 秘诀：使用加速度将方向定位到“向上” 241 9.12 秘诀：使用加速度移动屏幕上的对象 243 9.13 小结 246 第10章　连接服务 247 10.1 秘诀：添加自定义设置束 247 10.2 秘诀：使应用程序支持自定义url模式 ...
CSS定位机制——文档流
One of thre_tigers的博客
01-11 652
CSS的定位机制用来对页面元素（盒子）进行排版，找到每一个页面元素的位置，确定每一个元素的位置。主要有三种定位方式： 文档流定位，浮动定位和层定位。 1.文档流定位： 是一种默认的情况，不需要额外的设置，每一种元素在当前网页上按次序排列，有些元素独占一行或与其他元素在一行依次显示. 2.浮动定位： 当我们想要让一个大盒子里面的元素并排排列的时候，这个时候就要用到浮动，让元素浮动起来，分别向左向...
浮动与定位
01-06 180
整理下关于文档流，浮动，定位及造成的影响文档流的知识点 一 文档流的概念指什么？ 　　文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。 　　标准流的特点：1.块级元素从上到下，独占一行 　　　　　　　　　2.行内元素，行内块级元素从...
layui流加载 终止flow.load()，执行第二个流加载时禁止上一个流加载执行
xiaojun201593的博客
01-16 4875
思路是当点击事件触发时，把ul移除，绑定的事件移除，重新加载ul，相当于把之前的删除重新加载了flow.load。
文档流 定位方式
zxjsm的博客
10-21 546
在html中，默认使用流式布局 流式布局：在一个html中每个元素都有自己的位置，行元素和行内块元素从左到右，块元素从上到下的布局方式 文档流：在一个页面中，在文档流中的元素都有自己的位置，如果某个元素脱离了文档流，那么它将不再参与流式布局，不再拥有自己的位置。 块元素 如果脱离了文档流，那么它将不再参照父元素的宽度定宽，所以脱离文档流的块元素，如果没有内容，则必须设置宽高，如果有内容，那么它的宽...
常见定位方案（三种文档流）
weixin_46100406的博客
01-08 1013
定位方案（文档流）是控制元素的布局，有三种常见方案: 1.普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 普通流其实就是指BFC中的FC 2....
CSS网站布局实录 （第二版）PDF版
12-10
3.11.1 文档流(Document Flow) 3.11.2 浮动定位 3.11.3 浮动的清理(Clear) 3.11.4 何时选用浮动定位 3.12 绝对定位与相对定位 3.12.1 绝对定位 3.12.2 相对定位 3.12.3 何时选用绝对与相对定位 第4章 CSS网站元素...
visio教程PDF
05-17
4．5 Map文件夹中的样板 4．5．1 Directional Map 4．5．2 Geographic Maps 4．6 Network Diagram文件夹中的样板 4．7 Office Lavout文件夹中的样板 4．8 Organization Chart文件夹中的样板 4．8．1 ...
测试培训教材
04-01
定位到“Cruise Search”测试用例，在“设计步骤”界面中选择“生成脚本->QUICKTEST_TEST” 需要“Launching Quick Test Professional”来进一步地编辑和修改自动化测试脚本。 什么是BPT？ 业务组件测试 ...
Visio 2000 技术大全
05-01
4．5 Map文件夹中的样板 4．5．1 Directional Map 4．5．2 Geographic Maps 4．6 Network Diagram文件夹中的样板 4．7 Office Lavout文件夹中的样板 4．8 Organization Chart文件夹中的样板 4．8．1 ...
文档流、文本流以及定位方式的理解
ThisEqualThis的博客
07-15 1857
1、文档流（普通流【normal flow】） 符合HTML中标签本身含义，遵循自上而下，从左至右的布局。 那么什么是符合HTML中标签本身含义呢？ 众所周知，HTML标签，也称为HTML元素分为块级元素和行内元素，块级元素独占一行，而行内元素可以在一行内从左至右排列，不会换行。 1）块级元素大多为结构性标签： div、table、form、ul、ol、dl、marquee(滚动文本)、blo...
1.文档流、浮动 、定位的概念总结
宋坚强大大~~
04-21 1039
文档流、浮动 、定位的概念1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点： - 块元素 1.默认宽度是父元素的全部 2.默认高度被内容（子元素）撑开 3.在页面中自上而下垂直排列 - 内联元素 1.默认高度和宽度都被内容撑开 2.在页面中自左向右水平排列，如果一行不足以容下所有的元素 则换到下一行继续从左向...
css定位
m0_51683428的博客
11-01 175
css定位 ​ 定位是指允许定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置. 定位分为两种 : 相对定位(relative) 绝对定位 (absolute) 相对定位 ​ 相对定位相对于自己本身的位置进行移动，并没有脱离文档流,移动后原来的位置还被占用。 ​ 可以通过 position : relative ; 开启相对定位， ​ 用 left ,right ,top, bottom四个属性来设置标签的偏移
CSS 文档流定位(float,position)
weixin_46131409的博客
05-10 382
一.文档流 1.文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列 2.block元素和inline元素在文档流中的排列方式: block元素通常被现实为独立的一块,独占一行,多个该类元素会各自新起一行;默认宽度自动填满父元素宽度;可设置width/height/margin/padding属性 inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,...
CSS 浮动
weixin_33853827的博客
07-30 132
css中，文档流是什么？ 普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。 例： &lt;div id=”01”&gt;&lt;/div&gt;&lt;div id=”02”&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt; 很显然这是最普通的文档流，从左到右，一个挨一个按照顺序01先，02其次，03最后排列。 一旦给其中...
CSS定位机制Ⅰ——文档流定位
banchi6453的博客
07-26 193
关于CSS的定位机制Ⅰ ㈠概念 对于盒子模型来说，也就是页面元素，这些盒子究竟在页面的什么位置，怎样排列它，那么找到它的位置，确定它的位置，这个就是定位机制所决定的。 ㈡分类 文档流， 浮动定位，层定位 ㈢三种类型定位的功能 ⑴文档流定位（normal flow） 默认 我们不需要额外的设置，每种元素它们在当前的网页上面呈现出来的状态都不同，文档流定位就相当...
文档流，定位
v587的博客
09-18 2154
概念：html元素在页面上从上到下依次排列，就是文档流。 1.盒子模型     html元素构成：内容(content)、填充(padding)、边框(border)、边界(margin)     由这些元素构成一个盒子 2.CSS的定位机制有3种：     普通流、     浮动（float：left/right/none）     定位 （position:s
css绝对定位、相对定位和文档流的那些事
weixin_30408165的博客
07-09 215
前言 接触html、和css时间也不短了，但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决，但总不是个事，所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。 文档流的概念 确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元...
文档流的理解和定位（转）
奥特打小怪的博客
04-16 1031
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序) 下面为转自http://www.cnblogs.com/huangbx/archive/2012/08/15/2640734.html 一、定位的专业解释(来自百度百科) 　　在CSS中关于定位
approval-flow组件使用方式
最新发布
04-04
approval-flow组件是一个审批流程组件，可以方便地在应用中创建审批流程，并处理审批流程中的各个环节。下面是approval-flow组件的使用方式： 1. 引入approval-flow组件 在应用中使用approval-flow组件，需要先在页面中引入该组件。 ```html <template> <div> <approval-flow></approval-flow> </div> </template> <script> import ApprovalFlow from 'path/to/approval-flow' export default { components: { ApprovalFlow } } </script> ``` 2. 配置审批流 在组件中配置审批流程，包括审批人、审批条件、审批结果等。具体配置方式可以参考approval-flow组件的文档。 ```html <template> <div> <approval-flow :flow="flow"></approval-flow> </div> </template> <script> import ApprovalFlow from 'path/to/approval-flow' export default { components: { ApprovalFlow }, data() { return { flow: { name: '请假申请', steps: [ { name: '部门领导审批', approver: '张三', condition: '请假时间不超过3天', result: '同意', }, { name: '总经理审批', approver: '李四', condition: '请假时间超过3天', result: '同意', }, { name: 'HR审批', approver: '王五', condition: '请假时间超过7天', result: '同意', } ] } } } } </script> ``` 3. 处理审批结果 在审批流程结束后，可以通过approval-flow组件的回调函数来处理审批结果。 ```html <template> <div> <approval-flow :flow="flow" @finish="handleFinish"></approval-flow> </div> </template> <script> import ApprovalFlow from 'path/to/approval-flow' export default { components: { ApprovalFlow }, data() { return { flow: { name: '请假申请', steps: [ { name: '部门领导审批', approver: '张三', condition: '请假时间不超过3天', result: '同意', }, { name: '总经理审批', approver: '李四', condition: '请假时间超过3天', result: '同意', }, { name: 'HR审批', approver: '王五', condition: '请假时间超过7天', result: '同意', } ] } } }, methods: { handleFinish(result) { if (result === '同意') { // 处理审批通过后的逻辑 } else { // 处理审批不通过后的逻辑 } } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小昔超厉害

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值