文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

，所以只需要复制过来即可： 随后删除不必要的内容，只剩下头部即可： 随后在主要内容下新建一个行，命名为博文头部，在这个行中存放博文标题以及发表时间、点赞： 由于此时你并不清楚标题的具体长度...，在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可： 由于头部标题本身上内边距是有一定距离的，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色...，当然你也可以设置边距样式达到同样的效果： 接着设置内边距： 此时页面效果如下： 接着往这个行中添加一个行命名为标题，同样设置高度为包裹背景色为透明： 由于标题还距离左右两侧有一定的边距...，并且接下来的所有内容都距离左右有一定边距，此时直接设置父容器的左右内边距是最方便的方法： 直接设置主要内容行的内边距： 接着往标题行中添加文本，设置字体大小以及文本组件的宽度为100%：...设置完毕后在左行中添加一个文本用于记录时间： 此时页面效果如下： 但此时我们的时间和点赞区域应该有一定的内边距，设置他们的父容器上下内边距： 此时页面显示如下： 接着在右按钮中添加一个按钮

1.1K40

【Flutter 组件集录】Padding | 8 月更文挑战

一、认识 Padding 组件 说到 Padding ，应该是大家入门 Flutter 时学习的第一批组件。它的功能非常简单，就是为子组件添加边距。...Padding 组件的使用 比如下面的灰色盒子中有一个 Icon 组件。这时想让它四周有 10 的边距，我们就可以通过 Padding 组件完成。...由于 Padding 组件的边距区域是不可见的，但占据空间，当其他组件并列排布，感觉上是两者之间有一个留白。...主要构造有如下四个： EdgeInsets.fromLTRB // 指定左、上、右、下、四个边距值(必须传入四参) EdgeInsets.all // 指定一个值，用于左、上、右、下边距...EdgeInsets.only // 指定左、上、右、下、四个边距值(入参任意) EdgeInsets.symmetric // 指定水平/竖直边距值 另外，由于其中重载了一下运算符，也就说明

55520
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作（除支付外）】

    ，设置左右上下的内边距： 由于我们的标题分为左右两个部分，在此直接在这个标题行内部创建两个行，一个命名为左，一个命名为右： 左右两个行，由于本身自带高度，都设置高度为包裹，并且设置宽度为...点击需要添加下拉菜单的容器，然后点击扩展组件，点击下拉菜单即可添加： 在下拉菜单的属性中，，更改当前选中值，设置选项列表中的内容，更改大小即可完成： 接着在右侧的行中更改水平对齐属性选择靠右...，此时添加的元素才有靠右显示： 接着添加一个正在热映文本，该文本需要设置其排版，上下左右内边距，否则无法设置其边距框： 接着在这个文本中的边框与圆角处设置下边距的颜色为主题色（紫红色...接着由于我们的内容需要与上下左右边缘有一定距离，那么此时直接设置内容行的内边距即可统一的为其元素自带边距效果，此时设置这个内容行的边距如下： 接着再内容行中创建一个行，命名为热映内容，这个热映内容也就是包裹单独一个影片信息的行...： 最后我们在右侧添加一个按钮，设置对应的文本和颜色： 三、添加导航容器 我们还发现，这个首页的导航栏是在下部： 那么此时就需要用到一个导航容器，点击扩展组件，找到导航容器添加到当前页面

    8.6K20

    vivo 悟空活动中台 - 栅格布局方案

    卡片宽度：卡片的宽度随着页面宽度自适应调整 卡片外边距：卡片互相之间的边距随着页面宽度自适应调整 容器内边距：容器的内边距随着页面宽度自适应调整 1、行业内的方案 我们这里收集了三种常见的行业内解决方案...该方案的优点是以谷歌的设计规范为蓝本，能够在一类产品中实现统一的布局风格。如果你的产品希望以谷歌的设计规范为依托，并且后期不会做个性化调整，谷歌的 Material Design 是很好的选择。...（2）自适应内边距方案 通过固定卡片边距和卡片宽度的尺寸来计算出页面边距，该方案的优点是，卡片展示内容整体居中，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是，卡片内容在大屏内会显得太小，但是在小屏上会显得很大...（3）自适应边距方案 通过固定页面边距和卡片宽度的尺寸来计算出卡片边距，该方案的优点是，页面左右两侧不会有太大的空白区域，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是卡片边距会动态调整，这种场景中卡片直接的距离往往比较大...1、组件使用方式 自适应栅格组件包含外层的容器组件 Grid 和内置的卡片组件 GridItem，容器组件有四个基础配置项和三个定制化配置项。

    1.5K40

    由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。 值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。...也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！...如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block...父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，除了用传统的伪类方法。...总结来说，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

    1.1K50

    【面试题解】什么是外边距重叠？如何解决？什么是BFC？

    （对于从右往左的布局，则相反），即使存在浮动也是如此； BFC 的区域不会与 float 重叠； BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...父子元素边距重叠 场景一：先来看这段代码，预计实现的结果应该是父容器距离页面顶部 100px，子容器距离父容器 100px 。...现象：发生了边距重叠，两个兄弟元素的上边距和下边距发生了重叠。 规则：正正取最大，负负取最负，正负就相加。 原因：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距。...原理：属于不同 BFC 的元素垂直方向边距不会发生重叠。...原理：属于不同 BFC 的元素垂直方向边距不会发生重叠。 感觉有帮助的小伙伴请点赞支持一下，谢谢~

    81121

    五、Web App 基础可视组件属性（IVX 快速开发教程）

    大多数组件都拥有相同的属性，相同属性在以下内容中不会赘述介绍；相对应用 与 绝对应用 属性大致相同，在此使用 相对应用 作为实例演示。...高度 上外边距 下外边距 左外边距 右外边距 上内边距 下内边距 边框宽度 边框颜色 边框类型 边框位置 5.2.1 行、列的宽度、高度 行、列的宽度、高度可以设置成百分比或者具体的像素，行 与 列 是元素的容器...、外边距 外边距 我们可以当做 “透明的墙”，可以理解成这个元素与上、下、左、右元素的距离，可以设置 具体的像素值 或 按百分比进行设置： 内边距 我们可以当做内部 “透明的墙”，可以理解成这个元素与内部上...则不会呈现 边框，实线边框 则是连续不中断的线条将当前元素进行包裹、虚线边框 则是以虚线的方式对边框进行包裹、点状边框 则是以点作为当前元素的边框包裹： 5.2.4 行、列元素的呈现方式 行组件 在...，字体样式可以设置加粗、斜体、下划线、删除线： 5.4 图片属性 图片组件 用于图片的显示，可以通过修改图片的 圆角，圆角值越大则角越 “圆滑” 做出比较独特的效果： 5.5 输入框属性 输入框组件

    4K20

    【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

    边框宽度 最终得到的才是盒子模型的宽度 ; 分析下面的代码 , 盒子模型 的尺寸如下 : 内容尺寸 : 200 x 200 像素 ; 内边距 : 上内边距 20px , 右内边距 10px , 下内边距...个值 : 设置 上下、左右 外边距 ; 设置 3 个值 : 设置 上、左右、下 外边距 ; 设置 4 个值 : 设置 上、右、下、左 外边距 ; /* 设置外边距 - 复合写法 - 上、右、下、左 外边距...和 右外边距 必须 设置为 auto 值 ; 如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中, 必须设置宽度 ; auto 的含义是 指定的 边距方向 自动充满 ; /*...两个边距之和 = margin-bottom + margin-top , 而是 这两个边距 中的较大的值 , 即 max (margin-bottom , margin-top) , 该现象称为 外边距...不会合并 ; 8、嵌套模型盒子 外边距塌陷 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边距 和 边框 父元素 和 子元素 都设置了 上外边距 , 则会出现 父元素 上外边距 与

    39510

    Web-CSS

    外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。...可以接受1~4个值（上、右、下、左的顺序） 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left 可取值 length：固定值...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。...第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。 flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。...center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。 stretch：拉伸所有行来填满剩余空间。

    8.6K20

    勇闯44关深入浅出CSS基础之第一篇

    padding； CSS让我们可以控制一个元素4个边的内边距，控制的属性分别是：padding-top (上)、padding-right (右)、padding-bottom (下)和padding-left...margin； CSS让我们可以控制一个元素4个边的外边距，控制的属性分别是：margin-top (上)、margin-right (右)、margin-bottom (下)和margin-left...10px 20px 10px 20px;； 这里面的四个数值顺时针的从上到左旋转来分配的：上，右，下，左； 其他语法： /* 应用于四个边 */ padding: 1em; /* 垂直方向| 水平方向...5% 的边距 */ margin: 10px; /* 所有的边都是 10像素 的边距 */ margin: 1.6em 20px; /* 上和下边是 1.6...字距, 左和右是 20像素 边距 */ margin: 10px 3% 1em; /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */ margin: 10px 3px 30px

    1.3K10

    6个常用的React组件库

    它不会帮你赢得任何设计奖项，但可以用来完成一些边缘项目和最小可行产品。 不过这取决于你要使用它的目的。如果你不熟悉 React，那么它是一个很好的入门库。...你可以选择直接使用 Bulma 中的类，也可以使用包装库，例如 react-bulma-components。...项目链接：Bulma 项目链接：react-bulma-components 包大小（来自 BundlePhobia）：缩小后 179kB，缩小 +gzip 压缩 20.1kB 优点： 不会让你的网站长一副...aria 标签； Discord 服务器提供支持； 易于定制（带有主题支持）； 高度模块化，因此摇树实际上会删除你不使用的代码。...没有可用的包大小，因为每个组件都单独导出为自己的 npm 包。 Reakit Reakit 是另一个底层组件库。从技术上讲它是一个 UI 库，但不附带 CSS。因此你仍然需要找到一种样式解决方案。

    2.2K10

    React Native 系列(四) -- 布局

    number 上外边距 marginVertical number 上下外边距 注意marginRight和width冲突，如果设置了width，marginRight无效。...做内边距 paddingRight number 右内边距 paddingTop number 上内边距 paddingVertical number 上下内边距 这里想跟大家介绍一下网页中的盒子模型布局...Flex 简介 Flex布局又叫弹性布局，会把组件看成一个容器，它的所有子组件都是它容器中的成员，通过Flex，就能迅速布局子成员。...center: 子组件侧轴居中 stretch: 子组件在侧轴方向被拉伸到与容器相同的高度或宽度 注意点：如果指定了宽或者高，这stretch对应的地方不能拉伸，比如指定了高度，这stretch在高度上就是那个指定的值...如果没有父容器则为 "stretch" flex-start:子组件向侧轴起点对齐 flex-end:子组件向侧轴终点对齐 center:子组件在侧轴居中 stretch:子组件在侧轴方向被拉伸到与容器相同的高度或宽度

    1.8K70

    制作简版消消乐（一）：资源准备与场景搭建

    左：编辑素材 | 右：游戏内容背景 4. 制作 8 x 8 的地图（简版为固定地图，所以这里不采用动态生成的方式）。...首先用 FlatPanel 来制作 64 个大小为 70 x 70 的方格 vacancy 节点作为单个方块的背景，创建节点 mapContainer 作为方格的容器，并加入 Layout 组件快速排列...，边距（padding）和方格间距（spacing）均为 5，最后顺便调整一下背景： ?...创建节点 tileContainer 作为方块的容器，在容器中创建一个 70 x 70 的空节点 tile ，给 tile 节点添加一个带有 Sprite 组件的子节点 sprite 并调整到合适的大小...然后将节点拖到 prefabs 目录下保存为预制体，并将 tile 节点删除。 ? 制作方块 tile 的预制体 ★ 到这里我们资源准备和场景搭建的部分就已经完成啦，下篇文章正式开始 撸 代 码 ！

    3.2K31

    前端学习笔记之CSS属性设置 CSS属性设置

    css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类，分别是容器级和文本级 在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...:上 右 下 左border-color：上 右 下 左2 、注意点： 1、这三个属性时按照顺时针，即上、右、下、左来赋值的 2、这三个属性的取值省略时的规律 省略右面，右面默认同左边...：上 右 下 左; 注意 1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。...上 右 下 左; 注意 1、外边距的那一部分是没有背景颜色的2、外边距合并现象 在默认布局的水平方向上，默认两个盒子的外边距会叠加 而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象...我 7、清除默认边距 #1、为什么要清空默认边距（外边距和内边距） 浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等 编写代码之前的第一件事情就是清空默认的边距

    5.9K30

    flexbox 伸缩布局

    | column-reverse flex-direction代表主轴布局方向 row: 左－> 右 ，row-reverse: 右 -> 左 ，column：上 －> 下 ，column-reverse...：下 －> 上 flex-wrap: nowrap | wrap | wrap-reverse flex-wrap:代表的是超出布局的元素如何显示，分别是不换行，换行，换行之后从右向左排列 flex-flow...align-items: flex-start | flex-end | center | baseline | stretch 定义伸缩项目交叉轴在当前行的对齐方式 flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边...flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。 center：伸缩项目的外边距盒在该行的侧轴上居中放置。 baseline：伸缩项目根据他们的基线对齐。...stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

    1.3K30

    2024年最值得尝试的5个CSS框架

    它与传统的 CSS 框架不同，不提供预设样式的组件，而是通过提供大量的低级实用类（utility classes），让开发者能够构建出完全定制的设计。...它与其他 UI 框架的不同之处在于，Bulma 是基于 Flexbox 构建的，Flexbox 是一种 CSS 布局模型，能够根据容器的宽度调整页面元素的宽度，这使得创建网格等任务变得非常简单，并且是框架轻量化的原因之一...易用且直观的语法：Bulma 的类名清晰直观，使得即使是 CSS 新手也能快速上手。...如何在项目中集成 Bulma 将 Bulma 集成到项目中相当简单，只需导入 Bulma 的 CSS 文件即可开始使用它提供的各种样式和组件。...响应式栅格系统：UIKit 提供了一个灵活的栅格系统，使得在不同设备上的布局变得简单和一致。 预设计的组件：UIKit 包含了大量预设计的组件，如导航栏、滑块、模态框等，简化了开发流程。

    1.3K10

    css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性...*/ white-space: nowrap;/*属性设置如何处理元素内的空白 */ /*nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。...red; } 内外边距 内边距 /*内边距*/ .padding{ padding: 2px;/*盒子模型的外边距，上左下右 各向内缩进2px*/ padding-top: 2px...3.第三种方式 父容器使用伪类after和zoom。 伪类选择器还没讲过，争取这两天写一份详细的选择器文章。...内容不会被修剪，内容溢出容器。 hidden 内容会被修剪，并且其余内容是不可见的,不会出现滚动条。

    1.3K20

    Web前端学习 第2章 网页重构6 盒子模型

    盒子之间或内外是有边距的，通过以下属性控制盒子的边距 margin：外边距 padding：内边距 盒子模型还会涉及到我们之前学过的一个属性 border:设置元素的边框 二、盒子模型属性讲解 margin...margin属性可以控制元素的外边距，简单的说就是设置margin的这个元素与其相邻的元素或外部容器元素的距离，对应有四个属性，上下左右： margin-top:上外边距 margin-bottom:...*/ 6 margin:0 auto; 7 } 左右外边距的值设置为auto，元素就会根据其父级容器的实际宽度，将元素左右两边的外边距设置为相同的值，这样元素就实现了水平居中的效果。...padding padding属性可以控制元素的内边距，简单的说就是控制容器与内部元素之间的距离，与margin一样，padding也有对应的四个属性分别表示上下左右 padding-top:上内边距...列表元素之间的间距为20px。 文章标题与列表上边距距为10px。 文章描述与标题的上边距为10px，距离底部边距为10px。 文章标题与文章列表距离列表的左边距为20px。

    33000

    【融职培训】Web前端学习 第2章 网页重构6 盒子模型

    盒子之间或内外是有边距的，通过以下属性控制盒子的边距 margin：外边距 padding：内边距 盒子模型还会涉及到我们之前学过的一个属性 border:设置元素的边框 二、盒子模型属性讲解 margin...margin属性可以控制元素的外边距，简单的说就是设置margin的这个元素与其相邻的元素或外部容器元素的距离，对应有四个属性，上下左右： margin-top:上外边距 margin-bottom:...下外边距 margin-left:左外边距 margin-right:右外边距 我们以margin-top属性为例，实例代码如下所示： ?...左右外边距的值设置为auto，元素就会根据其父级容器的实际宽度，将元素左右两边的外边距设置为相同的值，这样元素就实现了水平居中的效果。...padding padding属性可以控制元素的内边距，简单的说就是控制容器与内部元素之间的距离，与margin一样，padding也有对应的四个属性分别表示上下左右 padding-top:上内边距

    34320
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券