前言 vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。...top 与 bottom 对于内联元素，指的是元素的顶部（底部）和当前行框盒子的顶部（底部）对齐；即与 line-box 的顶部（底部）对齐。...如图所示(为了更明显我使用了色块来标识)，当子元素（图片）设置了 vertical-align:middle，并不是绝对居中，而只能说是近似居中。...子元素的垂直中心线与父级元素基线的位置往上二分之一 X 高度（X 的中心） 所在线对齐，通俗一点讲，就是图中红线表示父元素的垂直中心线，蓝线表示子元素的垂直中心线，可以明显的看到 蓝线 与 X 的中心保持一致...那么我们解决这类问题就可以使用以下步骤了： 主体元素 inline-block 化 0 宽度 100% 高度的辅助元素（伪元素） vertical-align : middle 案例 2：实现多图列表的两端对齐
的祖先元素创建： 如果其祖先元素是行内元素，则包含块取决于其祖先元素的direction特性； 如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。.../div> div元素生成一个块框，其中有几个行内框（如em）以及文本some和text，此时会专门为这些文本生成匿名行内框； display属性的影响 display的几个属性也可以影响不同框的生成...水平方向上的margin，border和padding在框之间得到保留，框在垂直方向上可以以不同的方式对齐； 它们的顶部或底部对齐，或根据其中文字的基线对齐 行框： 包含那些框的长方形区域，会形成一行...行框的宽度有它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定； 行框的规则： 如果几个行内框在水平方向上无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中（即行内框的分割）...行框在堆叠是没有垂直方向上的分割且永远不重叠； 行框的高度总是足够容纳所包含的所有框，不过他可能高于他包含的最高的框（例如，框对齐会引起基线对齐） 行框的左边接触到其包含块的左边，右边接触到其包含块的右边
定位是相对于最近的已定位（position 不是 static）祖先元素进行的。如果没有已定位的祖先元素，则相对于初始包含块（通常是 元素）进行定位。...它决定了一个元素在垂直堆叠上的显示顺序，即哪个元素会在哪个元素的前面或后面。 z-index 值可以是负数。 z-index 较大的元素将覆盖较小的元素。...CSS 对齐是指通过 CSS 属性来控制元素的水平和垂直对齐方式。...常见对齐属性有以下几个值： left：左对齐 center：居中对齐 right：右对齐 top：顶部对齐 middle：居中对齐 bottom：底部对齐 水平对齐 text-align 用于设置文本内容在元素框中的水平对齐方式... 效果： 垂直对齐 vertical-align 用于设置元素内部的行内元素在垂直方向上的对齐方式。通常用于行内元素，对块级元素没有直接影响。
天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...，显示省略号来代表被修剪的文本） ---- 边框圆角：border-radius 让盒子四个角变圆润 数字+px 、百分比 （从上、右、下、左) ---- 垂直对齐方式：vertical-align baseline...默认 top 顶部对齐 middle 中部对齐 bottom 底部对齐 ---- 精灵图： 测量图片左上角坐标，分别取负值设置盒子的background-position：x y 合并成一张大图片，这张大图片称之为精灵图...块级元素、浮动元素 需要去测量 定位元素 === top：50% 50% translateY(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐 设置vertical-align: middle...---- 垂直的用法： 文本框和表单按钮无法对齐 input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 使用line-height
」(position属性值「不是」static)的祖先元素计算 ❞ 有几个重要的点可以简单记住 非替换元素 position:absolute/fixed 对立方位同时有值 相对最近的有定位属性的祖先元素...我们继续来解释下，首先，块级元素定宽，也就是说该元素「流动性」消失了，不会100%于父级元素的宽度了。换言之，就是该元素在水平方向无法将父元素填充满。...通过对该元素设置「上下」方向设置pading。以到达将文本信息，放置到中间位置的效果。...针对多行元素在垂直方向的居中，通过在利用table元素的td的「默认」属性：即在垂直方向上vertical-align: middle; 我是一个多行文本信息...元素水平垂直居中 针对处理这类问题，我们可以通过将 「水平居中」和「垂直居中」合并起来。可以有(M*N)的解法。但是，在平时工作中，大致可分为四类。
组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小...在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。...VerticalAlign.Center：默认状态，子元素在垂直方向居中对齐。 VerticalAlign.Bottom：子元素在垂直方向底部对齐。...justifyContent(FlexAlign.Start)：元素在垂直方向方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。...可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。 使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。
列表项目标记放置在文本以外 这三者属性可以放在list-style中统一设置。....表格文本对齐 设置水平对齐方式，比如左对齐、右对齐或者居中 td { text-align:right } 设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐 td { vertical-align...:bottom } 3).单元格边框间距 table { border-spacing:10px 50px } 可以使用像素，不允许负值。...如果定义一个length 参数，那么定义的是水平和垂直间距 如果定义两个length 参数，那么第一个设置水平间距，而第二个设置垂直间距 4).表格标题的位置 caption { caption-side...:bottom } top 表格标题定位在表格之上 bottom 表格标题定位在表格之下 5).显示表格中的空单元格 table { empty-cells:hide } hide
内联元素垂直居中对齐 开发中会遇到用字幕x代替关闭icon，用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐，这是因为文本默认是基线对齐，x、省略号默认底部在基线处。.../baseline...关键字，也可以设置常用的度量单位，正负值均可，使用比较灵活。...，具有以下特性： 计算BFC高度时，浮动元素也参与计算 属于同一BFC容器的元素垂直方向的margin会合并 BFC容器是独立容器，不会影响外部元素的布局 利用BFC的特性，我们可以实现以下功能： 清除浮动...绝对定位元素脱离文档流，相对于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。...，而auto等分剩余可用空间，可以使元素达到垂直居中效果。
line boxes 的高度取决于 line-height。 通过 line-height 可以设置单行文本的垂直居中。...绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的，另外，绝对定位的元素会自动忽略有定位属性的祖先元素的 padding 属性。...BFC 的布局规则例如以下： 内部的盒子会在垂直方向，一个个地放置； 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠； 每一个元素的左边...属性垂直对齐，可能是底部对齐，顶部对齐，也可能是基线对齐（默认）； 是当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC； 能把在一行上的框都完全包含进去的一个矩形区域，...网格布局格式化上下文 GFC( GridLayout Formatting Contexts )，当一个元素设置为 display:grid 的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列
垂直对齐 拥有 4 个可选项依次为顶部、居中、底部。...在此我们讲解常用的 3 个可选项顶部、居中、底部： 将 垂直对齐 设置为 顶部，页面中的 可视对象 将会从顶部依次往下进行显示；将 垂直对齐 设置为 居中，那么页面中的 可视对象 将会从页面的 垂直中部...进行显示，底部选项 则是从底部开始显示： 5.1.4 水平对齐 水平对齐 指 页面 中的元素横排如何进行显示。...则不会呈现 边框，实线边框 则是连续不中断的线条将当前元素进行包裹、虚线边框 则是以虚线的方式对边框进行包裹、点状边框 则是以点作为当前元素的边框包裹： 5.2.4 行、列元素的呈现方式 行组件 在...，若有溢出则会使用省略号进行结尾： 5.3.4 文字颜色与字体样式 文字颜色 可以修改该文本框的呈现颜色，字体样式可以设置加粗、斜体、下划线、删除线： 5.4 图片属性 图片组件 用于图片的显示
2.在html文件标签里面添加结构 3.在html文件样式style里面声明字体：告诉代码和别人使用我们自己自定义的字体（一定注意路径问题） 4.给盒子设置字体即可 追加字体图标 原来的不能删除，继续使用...轮廓线 outline: 0/ none; ----- 去掉轮廓线 防止文本域拖拽 resize:none; vertical-align 垂直对齐方式 如果让单行文本垂直居中 -- 使用line-height...，如果处理图片和文本的垂直对齐方式，line-height=高 不可以实现！...注意：只针对行内元素和 行内块起作用。 通常用于 -- 图片和文本对齐问题和去除图片底部空白缝隙问题。...去除图片底部空白 让图片白不要和 基线对齐 --- vertical-align:top middle bottom 转换为块元素 -- display:block; div {
, 包括左右垂直居中的按钮 , 下方的小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ; /* 子绝父相 : 整个父容器需要设置相对定位 内部的子元素使用绝对定位任意摆放...*/ overflow: hidden; } 3、左右按钮设置 - 绝对定位垂直居中设置 / 使用圆角矩形设置半圆 / 文字垂直居中 绝对定位垂直居中设置 : 执行下面两个步骤 , 可以将...绝对定位 的子元素设置为 垂直居中 ; 首先 , 走到父容器高度的一半 ; 然后 , 向上走自己高度的一半 ; /* 使用绝对定位 在 相对定位的父容器中任意放置元素 */ position...15px 0; } /* 设置向右翻页按钮样式 主要是 绝对定位位置 和 圆角状态样式 */ .right { /* 绝对定位右侧 */ right: 0; /* 文本右对齐.../ 使用圆角矩形设置左右两侧半圆 / 使用圆角矩形设置小圆点 绝对定位水平居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为 水平居中 ; 首先 , 走到父容器宽度的一半 ; 然后
就像定义说的，这个属性允许你垂直对齐文本。它对于顺序指示器(st, nd等)、需要的输入星号(*)或没有正确居中的图标特别有用。...text-bottom：使元素的底部与父元素的字体底部对齐。 middle：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。 ?...4. user-select 每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，user-select属性将非常有用。...none：元素及其子元素的文本不可选中。 请注意这个Selection 对象可以包含这些元素。...默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。它采用与clip-path相同的值。
流动将页面上的每个元素都视为属于文本文档。 块级元素以垂直方式在页面上重叠显示。它们会尽量占用尽可能多的水平空间，同时尽量减少垂直空间的占用。 内联元素在水平方向上像段落中的文本一样显示在一起。...这意味着 CSS 将查找 HTML 树并找到最近的一个祖先，「该祖先也使用了这些值之一」。如果找不到，则绝对定位元素将相对于视口定位。...它们的外观和尺寸通常由其属性和外部资源决定。替换元素具有一定的固有尺寸，不受文本或子元素的影响。...为什么它们不共享相同的选项呢？我们将很快揭开这个谜团，但首先，我需要分享另一个对齐属性：align-self。...我可以画一条直线，将所有子元素串起来，就像烤肉一样： 然而，交叉轴是不同的。「一条垂直的直线只会与其中一个子元素相交」。 这更像是垂直方向用牙签串的烤肠，而不是烤肉串： 这里有一个显著的区别。
，它的包含块是祖先元素中最近一个非static 其他情况下包含块由祖先节点的padding edge组成 对于margin需要注意了：margin-top和margin-bottom的百分比也是相对于父元素...不能 能 水平对齐方式 父元素的text-align影响 默认左对齐 垂直对齐方式 自己的或者父为table-cell时的vertical-align 默认baseline 4.2IFC 不同于BFC...，IFC是默认地、隐式的创建，当一个区域内仅仅包含水平排列的元素才生成（文本、行级元素、行级块元素），可以通过vertical-align来设置垂直方向上的对齐。...我们只要让他的对齐线是bottom或者top（是top的时候，他用上边线和top对齐的）就行 4.2.2 行高inline-height 非置换元素可以设置，也可以被span、a、label影响，可置换元素或者行级块...父为table-cell的时候，可以利用vertical-align控制内部子元素垂直居中（无论行级元素还是块级元素） 对于块级包含文本的行高，比如p标签嵌套一些文字的情况，默认是normal。
，它的包含块是祖先元素中最近一个非static 其他情况下包含块由祖先节点的padding edge组成 ?...不能 能 水平对齐方式 父元素的text-align影响 默认左对齐 垂直对齐方式 自己的或者父为table-cell时的vertical-align 默认baseline 4.2IFC 不同于BFC...，IFC是默认地、隐式的创建，当一个区域内仅仅包含水平排列的元素才生成（文本、行级元素、行级块元素），可以通过vertical-align来设置垂直方向上的对齐。...我们只要让他的对齐线是bottom或者top（是top的时候，他用上边线和top对齐的）就行 4.2.2 行高inline-height 非置换元素可以设置，也可以被span、a、label影响，可置换元素或者行级块...父为table-cell的时候，可以利用vertical-align控制内部子元素垂直居中（无论行级元素还是块级元素） 对于块级包含文本的行高，比如p标签嵌套一些文字的情况，默认是normal。
: '',// 页面上的元素，可以是节点，也可以是节点的选择器 text: '我是第一步', img: '我是第一步的图片' },...目标元素可见了，接下来要做的是高亮它，具体的效果就是页面上只有目标元素是亮的，其他地方都是暗的，这个实现方式我考虑过使用svg、canvas等，比如canvas实现： class NoviceGuide...动态计算信息的位置 目前我们的信息框是默认显示在高亮元素下方的，这样显然是有问题的，比如高亮元素刚好在屏幕底部，或者信息框的高度很高，底部无法完全显示，这种情况，我们就需要改成动态计算的方式，具体来说就是依次判断信息框能否在高亮元素下方...对于信息框的水平位置，我们优先让它和高亮框左对齐，如果空间不够，那么就让信息框在浏览器窗口水平居中。 对于左侧和右侧的判断也是类似的，完整代码可以去文末的仓库里查看。...解决这个问题可以这么考虑，我们先找到目标元素的最近的可滚动的祖先元素，如果元素不在该祖先元素的可视区域内，那么就滚动父元素让元素可见，当然这样还没完，因为该祖先元素也可能存在一个可滚动的祖先元素，它也不一定是在它的祖先元素内可见
但有可能会被卡住 4、文本，图像，行内元素和行内块元素时采用环绕的方式来排列的，是不会被其它的浮动元素压在底下的 2、清除浮动 元素一旦浮动起来之后，就会对后续元素的位置带来一定的影响...如果后续元素不想被前面元素影响的话，可以通过 清除浮动 的方式来清除影响 清除影响：不上前占位 属性：clea 取值： 1、none...: 只让颜色变的透明 3、垂直方向对齐效果 属性：vertical-align 使用场合： 1、td 中使用...) 指定文本 相对于 图片 或 行内块元素垂直对齐方式 取值：top / middle / bottom / baseline...-不占据页面空间 2、绝对定位的元素会相对于离他最近的，已定位的，祖先元素 去实现位置的初始化 3、如果元素没有最近的祖先元素的话，那么就相对于最初的包含框
举个例子，现在我希望在列表组件加载完成后，列表能够自动滚动到第三个元素。...如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。...这里引用 stackoverflow 上的一个高赞解答，可以帮助你更好的理解。 使用 {block: "start"}，元素在其祖先的顶部对齐。...使用 {block: "center"}，元素在其祖先的中间对齐。 使用 {block: "end"}，元素在其祖先的底部对齐。...使用 {block: "nearest"}： 如果您当前位于其祖先的下方，则元素在其祖先的顶部对齐。 如果您当前位于其祖先之上，则元素在其祖先的底部对齐。 如果它已经在视图中，保持原样。
在我探索 mainAxisAlignment 对齐方式的最终渲染结果的时候，我发现其实可以将它分为两种对齐方式会更好，一种是轴线对齐方式，一种是空间分配对齐方式。... 主轴上垂直居中对齐 空间分配对齐方式 spaceBetween 左右两极对齐，剩余元素以相同间隔平均分配剩余空间 spaceAround 每个元素以相同的左右间隔平均分配剩余空间 spaceEvenly...所有元素以相同的间隔平均分配剩余空间 crossAxisAlignment mainAxisAlignment 是交叉轴的对齐方式，我称之为副轴，其中 Row 的交叉（副）轴为 y 轴，Column...（副）轴的垂直居中对齐，Column 交叉（副）轴的水平居中对齐 stretch 将 Row 子元素拉伸至交叉（副）轴高度相同，Column 子元素拉伸至交叉（副）轴宽度相同 baseline 需要与...其实在使用起来和 html 的标签逻辑还是大部分相似的，只不过这里将这些 widget 设计得更细，每个 widget 都负责固定的渲染结果或行为模式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
