专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

html定位有哪几种,html常见定位方式

来源:小易整编  作者:小易  发布时间:2023-02-22 03:17
摘要:html定位有哪几种,html常见定位方式2023-01-2809:09·TaskBuilder1.流式定位这是网页元素默认的定位方式,网页元素按照其HTML标签的先后顺序,在网页内依次显示,就像液体一样“流动”,所以称为“流式定位”,这种...

4. 表格定位

顾名思义,表格定位就是用表格来实现网页内容的定位,先绘制一个多行多列的表格,并设定表格各列的宽度和各行的高度,然后在表格的单元格里插入相关网页元素,最终实现这些元素的位置定位。

这种定位方式比较适合可以将页面内容清晰明确地划分为多行多列的场景,例如各种业务单据和数据报表等。

有两种方式可以实现表格布局: HTML Table(<table>标签)和CSS Table(display:table 等相关属性)。HTML Table是早期网页设计采用的表格定位方式,由于其渲染性能较低,且有些界面效果较难实现,用的人已经比较少了,现在推荐使用CSS Table,能实现一些HTML Table做不到的效果。

目前,TaskBuilder只是在报表设计器里集成了一个第三方的表格插件,在前端tfp页面设计器里,还没有提供表格定位相应的容器组件,未来会提供。(现有的可编辑表格和数据表格不是用来为其他组件提供定位的,所以不能算作是表格定位的容器组件)

5. 弹性定位

弹性定位又叫弹性布局,这种定位方式最大的特点就是可以让子元素的大小可以根据父元素的大小自动扩张或收缩,从而可以做到自动适应不同终端的屏幕尺寸,或者在用户改变浏览器窗口大小时自动伸缩。

这种定位方式需要先将一个父元素的CSS属性display设置为flex,然后该元素里的子元素即可实现弹性定位。

采用弹性定位的容器元素可以设置以下CSS样式:

元素排列方向(flex-direction):用来设置子元素的排列方向,有四种方式可以选择:从左到右显示(row)、从右到左显示(row-reverse)、从上到下显示(column)、从下到上显示(column-reverse)。

html定位有哪几种,html常见定位方式

元素水平对齐方式(justify-content):用来设置子元素在水平方向的对齐方式,可以选左对齐(flex-start)、右对齐(flex-end)、居中对齐(center)、两端对齐(space-between)和等距对齐(space-around)。

html定位有哪几种,html常见定位方式

元素垂直对齐方式(align-items):用来设置子元素在垂直方向的对齐方式,可以选顶部对齐(flex-start)、底部对齐(flex-end)、居中对齐(center)、基线对齐(baseline)、自动伸展(stretch)。

html定位有哪几种,html常见定位方式

内容整体对齐方式(align-content):当有多行子元素时,可以用该属性设置全部子元素整体的垂直对齐方式,包括自动拉伸(stretch)、在容器的顶部排列(flex-start)、在容器的底部排列(flex-end)、在容器内居中排列(center)、均匀分布,上下靠边(space-between)、均匀分布,每行等距(space-around)。


本文地址:IT问答频道 https://www.hkm168.com/itwenda/903257_2.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小易整编
相关文章相关阅读
  • html中浮动是什么

    html中浮动是什么

    在html中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。本教程操作环境:windows7系统、CSS3...

  • html如何解析%%

    html如何解析%%

    html是一种用于创建网页结构的标记语言,它提供了一种方式来标记文本、图像、链接以及其他与网站相关的内容。html可以在网页中插入各种元素,包括表格、列表、图像、表格等等。本文将讨论html的解析过程以及如何编写有效的html代码。HTML...

  • html embed标签怎么用

    html embed标签怎么用

    HTMLembed标签使用方法和属性详解一、基本语法代码如下:embedsrc=url说明:embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE都支持。url为音频或...

  • HTML5中nav是什么意思

    HTML5中nav是什么意思

    在html5中,nav全称“navigation”,中文意思为“导航”,是一个导航标签,用于表示html页面中的导航;nav标签会定义一个含有导航链接的区域,语法“链接...”。本教程操作环境:windows7系统、HTML5版、Dell...

  • html中什么是伪类

    html中什么是伪类

    在html中,伪类是一种用于已有元素处于某种状态时(滑动、点击等)为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的。常用伪类有“:active”、“:hover”、“:link”、“:root”、“:valid”等等。本教程操...

  • HTML代码如何格式化

    HTML代码如何格式化

    HTML代码可以通过sublime中的内置命令Reindent对代码格式化,还可以安装HTML-CSS-JSPrettify插件对代码格式化有时候我们将别人的代码复制过来的时候发现代码排列的非常杂乱无章,无法去阅读代码,今天就将和大家介绍...

  • doctype html 什么意思

    doctype html 什么意思

    “doctypehtml”是指html5标准网页声明,即告诉浏览器当前html是用第五版本编写的,完整语法“”。doctype声明是一条指令,必须位于html5文档中的第一行,也就是位于“”标签之前。本教程操作环境:windows7系统、...

  • 苹果手机共享位置怎么设置 附:苹果手机的定位共享定位使用方法

    苹果手机共享位置怎么设置 附:苹果手机的定位共享定位使用方法

    php小编柚子为大家分享了苹果手机共享位置的设置方法。在文章中,详细介绍了如何使用苹果手机的定位共享功能,并提供了相应的使用方法。通过共享位置,用户可以方便地与家人、朋友等分享自己的位置信息,实现更加便捷的沟通和定位。无论是出行、旅游还是日...

  • 周排行
  • 月排行
  • 年排行

精彩推荐