相对定位：使用相对定位调整左右侧边栏的位置，使其正确显示。...设置左右内边距，以留出左右侧边栏的位置。 让主要内容部分占满容器的空间，这样俩个广告位就会被挤到下面去。...弹性布局的优点在于其简单易用，能自动调整元素的大小和位置，以适应不同的屏幕尺寸和内容量。 弹性容器：设置display: flex使容器成为弹性容器。...弹性子元素：使用flex属性使子元素在弹性容器中调整其占用空间。 顺序控制： 使用order属性让子元素在弹性容器中调整其位置。...这样可以轻松地将中间内容区域和左右侧边栏按表格的方式排列，使其具有相同的高度，并且可以通过设置固定宽度来控制侧边栏的宽度。 表格容器：使用display: table将容器设为表格布局。
在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...将侧边栏位置设置为固定。在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...以下代码片段包含了将侧边栏设置为固定位置的样式，如上述截图所示。
.main1 { height: 100px; margin-left: 200px; /* 左侧 200px 被侧边栏覆盖....main2 { height: 100px; margin-left: 200px; /* 左侧 200px 被侧边栏覆盖....main3 { height: 100px; margin-left: 200px; /* 左侧 200px 被侧边栏覆盖...三列布局.png [3] 弹性 (Flex) 布局 弹性布局：采用 Flex 布局的元素，称为 Flex 容器（flex container），它的所有子元素自动成为容器成员，称为 Flex 项目（flex...用法：display：flex （不能与 float、position 混用）； (父)容器属性：flex-flow （包括 flex-direction、flex-wrap）、justify-content
对于侧边栏菜单和面包屑导航，element和antd都有相应的组件可以直接使用，其他的手写实现。 三、css布局 良好的css布局代码才能保证页面布局的稳定性。...而对于整体布局来说，flex是首选，稳定性更好，不兼容ie9。 这里将整体布局封装成组件PageLayout （1）首先，设置侧边栏右侧的盒子撑满屏幕剩余宽度。...flex布局有个特性是：只对一个子元素设置flex: 1属性时，该子元素默认会撑满父容器的剩余空间。...appMainWrap 侧边栏右侧的（顶部导航区域 + 内容区域）容器 appMain 内容区域容器 （2）侧边菜单区域默认撑满高度，宽度可交给antd组件自适应，也可以自己设死。...: absolute; top: 0; right: 0; width: 100%; } 四、侧边栏菜单 侧边栏的实现方式是难点，因为这里即涉及到如何和路由数据匹配，又涉及权限的筛选。
下面是需要创建的内容： 要完成这个基本布局， Flexbox 需要完成的主要任务包括以下方面： 创建完整宽度的 header 和 footer 将侧边栏放置在主内容区域左侧 确保侧边栏和主内容区域的大小合适...具有 .wrapper 类的 div，也需要设置 display: flex; 但是 flex 方向与上述不同。这是因为侧边栏和主内容区域彼此相邻而不是堆叠。....wrapper { display: flex; flex-direction: row; } 主内容区域和侧边栏的大小设置非常重要，因为重要的信息都在这里展示。...主内容区域应该是侧边栏大小的三倍，使用 Flexbox 很容易实现这点。...这里 grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr 是网格的分数单位。 接下来，需要调整 header 容器中的 fr 单元。
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，它允许开发者在任意方向上对元素进行排列，并且可以动态地调整元素的大小和位置，以适应不同的屏幕尺寸和设备。...Flex布局是响应式设计的关键工具，它提供了一系列的属性来控制子组件的排列和对齐方式。Flex布局基础Flex布局通过使用Flex组件来实现，它可以在水平或垂直方向上对子元素进行布局。...Flex布局的关键在于理解主轴（main axis）和交叉轴（cross axis）的概念。主轴是Flex容器的主线方向，而交叉轴与主轴垂直。...Flex布局的用途Flex布局在ArkTS中有多种用途，包括：水平导航栏：可以使用Flex布局的Row方向，将导航项水平排列，并通过justifyContent和alignItems调整对齐方式，实现美观的导航栏布局...垂直侧边栏：利用Flex布局的Column方向，创建垂直的侧边栏，方便放置菜单、工具选项等内容。表单布局：在表单中，使用Flex布局可以灵活地排列输入框、标签和按钮等组件，提高表单的可读性和用户体验。
对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。...这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。...与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。...由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。...">主内容栏宽度自适应 第1个侧边栏宽度固定 第2个侧边栏宽度固定
题 1：基于栅格布局的现代博客首页设计 题目要求： 创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。.../header> 侧边栏推荐内容 ...第一行是顶部导航栏，第二行分为左右两栏，第三行是页脚。通过 grid-template-areas 确定每个区域的布局位置。...内容区域：main-content 和 sidebar 分别设置在栅格的中间部分，主内容区域宽度是侧边栏的三倍，符合现代博客的布局风格。...图片自适应：img 标签通过 max-width: 100% 确保图片不会超出其父容器，且可以根据容器大小自适应缩放。
单列布局 单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。...1 2列布局 2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。...实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。...属性 通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。...1 flex布局 代码如下: html 左边定宽 中间自适应 右边定宽 css { padding: 0px; margin: 0px; } body,html{ width: 100%; height
但也是有一定套路的，我最常用的就是通过临时添加不同的背景颜色去调试嵌套盒模型，这样我们可以很方便看到各种布局的效果，调试完成后，再恢复到预期的背景色即可。...background-color: green; /* 设置侧边栏的宽度为250像素 */ width: 250px; /* 设置侧边栏的高度为320像素...完善样式 参考预期的效果，关于核心内容目前还缺少的样式如下： 右侧广告栏，固定展示位置，不管文章列表如何滚动，始终固定显示在页面上； 右侧广告栏的内容居中展示； 各种边框阴影效果等； .content...: green; /* 背景颜色 */ /* 设置侧边栏的宽度为240像素 */ width: 240px; /* 宽度 */ /* 设置侧边栏的高度为280像素 */...align-content: center; /* 导航栏内内容的垂直对齐方式设置为居中 */ position: fixed; /* 导航栏的位置属性设置为固定，以便在页面滚动时保持在原位置
书写顺序 一般而言css都有一定的书写顺序，而不是想起来什么属性写说明属性。一般css的书写顺序为： 位置（z-index position top display float ...）...font-size: 24px; background: #f6f6f6; color: red; padding: 10px 5px 12px; display: flex...; z-index: 999; } /* 规范示例 */ .test { z-index: 999; display: flex; padding: 10px 5px...4 常见css命名规则表 一般可用id来命名 4.1 页面结构 css名 表示规则 main 主体 container 容器 header 头 content 内容 footer 尾 sidebar 侧边栏...nav 导航 column 栏 wrapper 页面外围控制整体布局容器 4.2 导航 css名 表示规则 nav 导航 subnav 子导航 topnav 顶部导航 sidebar 侧边导航 menu
flex布局是开发中最常用的布局之一 阮一峰的flex布局教程 下方摘自uniapp官方文档flex布局一栏 Flexbox Flex 容器 Flex 是 Flexible Box 的缩写，意为"弹性布局...不换行，flex 成员项在一行排布，排布的开始位置由direction指定 justify-content 定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。...默认值为 flex-start 可选值 描述 flex-start 左对齐，所有的 flex 成员项都排列在容器的前部 flex-end 右对齐，则意味着成员项排列在容器的后部 center 居中，即中间对齐...可选值 描述 stretch 即拉伸高度至 flex 容器的大小 flex-start 上对齐，所有的成员项排列在容器顶部 flex-end 下对齐，所有的成员项排列在容器底部 center 中间对齐，...经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。
二、两列布局的经典实现 在实际的项目中，两列布局 是一种非常常见的布局形式。常见的两列布局包括主内容区域和侧边栏，它们通常具有不同的宽度。...2.1 基于浮动的两列布局 经典的基于浮动的两列布局，左侧是主内容，右侧是侧边栏： 主内容 主内容 侧边栏 头部 主要内容 侧边栏 3.4...启用偏移容器 在网格布局中，有时需要某些列偏移一定的距离，以便实现更复杂的布局。
双栏布局 双栏布局是一种非常使用的布局。左边是目录、公告等内容，右边是主内容。 双栏布局的侧边栏部分通常都是放目录、公告等需要稳定表现的内容，所以侧边栏需要固定，然后让主内容自适应。...float+margin/overflow 原理就是侧边栏给定宽度，并设置 float为 left或 right，然后主内容部分设置 margin-left或 margin-right为侧边栏的宽即可,...布局 利用flex布局的flex属性会均分剩余部分的特性，给侧边栏设置宽度，然后给主内容设置 flex: 1;即可。...(没学过grid，推测的结果，不对请指正) 三栏布局 两边的侧边栏固定宽度，中间的主内容自适应宽度。 比较有名的有圣杯布局、双飞翼布局两种。 圣杯布局 圣杯布局是比较特殊的三栏布局。...300px; } .middle { /* 实现主内容自适应 */ width: 100%; background-color: #ccc; } 最外面的大盒子添加 padding，为两边的侧边栏留出位置
-- 可变高度的容器 -->响应式设计最佳实践1. 布局原则使用 flex 和 grid 进行响应式布局合理使用容器约束注意内容可读性侧边栏模式侧边栏 -->flex flex-col md:flex-row"> 侧边栏 --> 的响应式设计系统提供了：完善的断点系统直观的响应式语法灵活的自定义能力丰富的工具类支持通过合理运用这些特性，我们可以：...快速构建响应式界面保持代码的可维护性提供更好的用户体验适应各种设备需求在实际开发中，应该根据项目需求合理使用这些功能，并始终遵循移动优先的原则。
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。...通过设置display: flex;，你可以将一个容器变成弹性容器（Flex container），而其内部的子元素则成为弹性项（Flex items）。 1....设置 flex 属性 flex属性是弹性盒子的核心，用于设置弹性项如何在弹性容器中分配空间。...它通常写作flex: 1;、flex: 2;等，表示子元素在容器中所占的相对比例。...grid-area: footer; background-color: lightpink;">Footer 通过grid-template-areas，我们创建了一个包含头部、侧边栏
理解Flex容器与项目的混淆 问题描述：初学者常混淆Flex容器和Flex项目（子元素）的属性，错误地在容器上应用align-items或在项目上使用justify-content。...解决方案：明确区分容器和项目属性。...容器负责整体布局（如display: flex;、flex-direction、justify-content、align-items），而项目则控制自身表现（如flex-grow、flex-shrink...避免元素溢出 问题描述：当Flex项目内容过多时，可能会导致容器溢出或布局错乱。...圣杯布局 技巧：利用Flexbox可以轻松实现圣杯布局（两侧固定宽度栏，中间自适应内容区域）。关键在于设置侧边栏的order属性，以及主内容区域的flex-grow: 1;来填充剩余空间。 3.
容器与宽度容器 --> 的内容容器 -->栏布局栏布局 -->flex flex-col md:flex-row"> 侧边栏 --> 侧边栏内容 的间距刻度避免使用任意值保持响应式一致性2. 布局规范使用语义化容器保持布局层级清晰合理使用响应式类3....性能优化避免过度嵌套合理使用容器查询优化重排重绘总结Tailwind CSS 的间距和布局控制系统提供了：完整的间距刻度系统灵活的布局工具类强大的响应式能力丰富的布局模式支持通过合理运用这些特性，我们可以
是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。...（要么是水平方向，要么是垂直方向），能让元素在容器内方便地调整位置、大小等布局属性，以适应不同的屏幕尺寸和设计需求。...">3 在上述代码中，.flex-container 作为弹性容器创建了 FFC，内部的 .flex-item 子元素通过 flex: 1 设置...： order，flex-grow，flex-shrink，flex-basis，flex，align-self应用响应式布局：在网页设计中，对于不同屏幕宽度（如桌面端、移动端等）的适配，FFC 可以方便地调整导航栏...页面整体布局：对于复杂的网页页面，如电商网站的商品展示页面、新闻资讯网站的文章列表页等，使用 GFC 可以清晰地划分不同的板块区域，像头部导航、侧边栏、主体内容区、底部版权信息区等，将它们按照网格结构进行布局
关于个人博客站点的搭建方案有很多，之前也用过一些静态博客，还是有点繁琐的。...左侧侧边栏展开想收起的话必须滑动到页面顶部，超过一屏以后就不行了，点击屏幕侧边栏还一直在 一些配置项： dg-home: true：表示首页 dg-publish: true：表示要发布，如果取消发布，...设置成 false dg-path: "测试/目录/abc.md"：比如文章在 Obsidian 里是 /读书/哲学/老子.md，首先地址栏变成了 测试/目录/abc，侧边栏位置变成 随笔/目录/老子，...侧边栏的文章名字不会变，标题也还是“老子” title: "老子"，侧边栏文章标题就变成了 “老子” dg-pinned: true：侧边栏中固定到当前所在文件夹的顶部 dg-created: 设置发布时间...dg-hide: true # 不在侧边栏显示 dg-path: "home.md" # 如果在目录里，侧边栏还是会显示目录，只是不显示文章标题，所以将目录设置成根目录，配合 gd-hide 侧边栏完全不显示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
