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

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)

flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。 flex-basis : 指定 flex 元素在主轴方向上的初始大小。...grid-column 属性 ：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。 grid-column-start 属性 ：指定网格项在网格`列`中的起始位置。...grid-column-end 属性 ：指定网格项在网格`列`中的起始位置。 grid-row 属性 ：用于指定网格项目`行`的大小和位置，开始与结束的线的序号要使用/符号分开。...column-fill - 列平衡元素内容 描述: 该CSS属性控制在分解为列时如何平衡元素的内容。...我们来看一个最简单的 table 布局的示例, 设置 CSS 样式将 , div>, 和input> 设置分别显示表、表行和表单元: form { display

28420

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。 flex-basis : 指定 flex 元素在主轴方向上的初始大小。...grid-column 属性 ：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。 grid-column-start 属性 ：指定网格项在网格`列`中的起始位置。...flex-shrink ：指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。...3.网格布局 (Grid) 描述: CSS 网格是一个用于 web 的二维布局系统，Grid 网格布局设计用于同时在两个维度上把元素按行和列排列整齐, 为啥会出现网格布局？...grid-column 属性 ：用于指定网格项目列的大小和位置，开始与结束的线的序号要使用/符号分开。 grid-column-start 属性 ：指定网格项在网格列中的起始位置。

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

    理解 Css 布局和 BFC

    你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。...产生折叠的必备条件 再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。...将包裹文本的div设置为BFC 这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。...这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。...不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用

    1.4K00

    CSS Grid 那些鲜为人知的内幕

    基于百分比的列的宽度大小会按照容器宽度*N%变化，当列宽度小于图像宽度时，图像从列中溢出。 基于fr单位的列无论如何缩小容器宽度，该列也不会收缩到其最小内容大小以下。...此时我们用gap来设置所有列和行之间添加了固定量的空间 看看在%和fr之间切换时会发生什么： 当使用基于%的列时，内容会溢出到网格父容器之外。这是因为%是使用总网格区域来计算的。...隐式和显式行 隐式行 如果我们向一个两列网格添加「超过两个子元素」会发生什么呢？ 从结果来看，gird将第三个元素放置到了第二行。 ❝grid算法希望确保「每个子元素都有自己的网格单元」。....child { /* 位于从右数的第2列： */ grid-column: -2; } ❝我们还可以混合使用正数和负数。...如何抉择 在构建显示布局时，我们可以通过使用areas和行/列都可以达到目的，但是呢，使用areas时，它允许我们给grid分配语义含义，而不是使用晦涩难懂的行/列数字。

    16610

    理解 CSS 布局和 BFC

    你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。...查看演示 再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。 BFC 可以阻止元素被浮动元素覆盖 你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。...浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。...这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。...不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用

    1.2K00

    CSS进阶12-网格布局 Grid Layout

    然后，作者可以将其应用程序的构造块元素精确定位和设置到由这些列和行的交叉点定义的网格区域grid area中。以下示例说明了网格布局的自适应功能，以及它如何更清晰地分离内容和样式。...grid items的位置和大小，每个网格项每种场景都进行了优化。...浏览器的兼容性 CSS网格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始受到支持，微软Edge在Edge 15会更新对网格布局的支持。...一个网格项目引用网格线来确定其网格中的位置属性。 下面两个例子创建了三个列网格线和四行网格线。第一个示例演示了设计师如何将一个使用网格行号的位置来确定网格项目的位置，第二个例子显式的设置了网格线。...每个网格轨道可以设置一个大小，用来控制宽度或高度或者行可能会增长。 网格单元是网格行和网格列的交集。它是定位网格项时可以引用的网格的最小单元。 在接下来的例中定义了一个三行两列的网格。

    6K20

    前端-CSS Grid中的陷阱和绊脚石

    一个真正的网格是二维的。这两个维度就是行和列，并且使用网格布局，你可以同时控制它们。使用Flexbox，你可以选择是否将这些项列成一行或列，一个或另一个，而不是两个。...如果你使用一个简化版本的浮动12列“网格”，我们必须计算每一列的百分比大小，加上每个列之间间距的百分比大小。要创建跨多个列的项，需要将所有项的宽度加上用于分隔它们的边界宽度。...重要的是你想在布局里面的项目分配空间和相互关联。 网格轨道大小是否由内容来决定？ 我们已经看到了如何在使用网格布局时，在容器上设置网格和网格大小。但是，网格中的项可以指定网格轨道大小。...DEMO10：https://codepen.io/airen/pen/KoNwRb 然而这并不是真正的瀑布流布局，因为我们仍然有一个网格（具有行和列），并且潜在的网格项目从源代码中移出。...如何向网格区域添加背景和边框？ 一个网格尚未完成的问题，网格区域本身的背景和边框的样式。能在网格区域上直接添加背景和边框的样式吗？

    4.8K20

    CSS 中的 Grid 布局 完全指南

    它的第一个参数是重复的次数，而可以为auto-fill和auto-fit。 auto-fill 如果容器有明确的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。...如果任何重复次数都会溢出，则重复次数为1。 auto-fit 与auto-fill的行为相同，只是在放置网格项后，任何空的重复轨道都会折叠。...{ background-color: lime; } 隐式创建的行和列 css gird 会根据周围项目的大小和跨度自动调整网格上每个项目的位置。...如果我们在一个div中写几个div，再对父级设置display: grid;，从视觉的角度可以发现没什么变化。...这就需要了解之前介绍的网格线概念，横线（row）从上到下递增，竖线（column）从做到右递增，都是从 1 开始算。

    3.9K20

    【CSS】343- CSS Grid 网格布局入门

    div 是网格容器，而 .box div 是网格项。...这意味着在我们之前的例子中，有四条垂直线和四条水平线包含它们之间的行和列。 ? 在将网格项从一个位置跨越到另一个位置时，网格线变得非常有用。 网格轨道是两条线之间的空间。网格轨道可以是一行或一列。...网格单元格很像表格单元，是两条相邻垂直线和两条相邻水平线之间的空间。这是网格中最小的单位。 定位网格项 我采取了前面的例子的网格，并用数字从1到9标记每个单元格，而不是X或O，下面是它的样子： ?...结论 CSS网格布局允许我们更快地布局，并且更容易控制。在本教程中，我们学习了如何用CSS网格来定义布局， fr单位，repeat 函数和一些网格系统中特定的术语。...我们还学习了如何使用网格线和网格命名区域在网格容器内定位网格项目。但这只是一个开始。在下一个教程中，我们将深入到CSS网格。

    1.9K10

    理解CSS布局和块格式化上下文

    FC(formatting context)直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...常见应用场景 使父元素包含浮动元素 下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html div class="outer"> div class="float">I am a floated...[image] 但事实上，float中的文字已经脱离文档，如果文档流文字过少，浮动元素就会溢出父元素边缘。...div> div> css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子，在左侧div...flow-root浏览器兼容情况： [enter image description here] 浏览器对此值的支持是有限的，如果要在不支持flex或网格布局浏览器创建回退，了解BFC阻止浮动元素的负面影响十分必要

    2.1K30

    Grid布局简介

    浏览器兼容性 既然要使用最新的css布局，那浏览器对grid布局的兼容性这个点是逃避不了的，那我们接下来就来看看grid布局的兼容性如何呢。...最关键的区别就是，这种方式必须先定义布局的列。从定义列的宽度开始，然后我们才能将元素放在可用的单元格中。这种方式强迫我们去分割我们的header有多少列。...grid-column-gap和grid-row-gap分别定义网格之间的列间距和行间距，而grid-gap则是简写，第一个值为行间距，第二个值为列间距。...grid-auto-columns grid-auto-rows 这两个属性是自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。 我们看下面这个例子。...我们可以看出，网格项item-b定位在第五根列网格线（column line 5 ）和第六根列网格线（column line 6 ）之间。

    7.4K80

    使用 CSS Grid 的响应式网页设计：消除媒体查询过载

    说再见复杂的代码，拥抱更简单的解决方案吧：CSS Grid。在这篇文章中，我们将踏上一场激动人心的 CSS Grid 之旅，发现它如何消除了对复杂媒体查询的需求，使你能够轻松创建响应式网站。...介绍 CSS Grid想象一下，在开始开发之前为你的网站创建一个蓝图，这是其结构和设计的可视化表示。CSS Grid 采用了类似的原理。它为开发人员和设计师提供了一个强大的布局系统，由行和列组成。...让我们开始吧为了更好地理解 CSS Grid，让我们使用 HTML 和 CSS 创建一个简单的网格：div class="grid-container"> div class="item">Item...grid-gap 属性在网格项之间添加了间距，使设计更具视觉吸引力。Grid 默认具备响应性吗？ CSS Grid 不是默认具备响应性的。...让我们分解使用的不同CSS属性：display: grid;：此属性将容器元素定义为网格容器，建立一个新的网格格式上下文。这允许你创建具有行和列的网格布局。

    30610

    CSS中，如何处理短内容和长内容？

    image.png Hyphens CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。...这里有一个复选框列表，其中有一个非常接近它的兄弟项。发生这种情况的原因是网格上没有间距。这是来自Techcrunch网站的一个真实的例子。...image.png 现在大家已经对问题及其解决方案有了一定的了解，我们来探索web上的一些用例和示例。 用例和示例 个人资料卡 这是长内容的常见示例。 很难预测名称的长度。 我们应该如何应对呢？....product__name { margin-right: 1rem; } Flexbox和长内容 flexbox 和长内容会发生某种行为，从而导致元素溢出其父元素。...Shadeed div> Follow div> css .user { display: flex; align-items

    1.8K40

    CSS Flexbox与Grid：构建响应式布局的艺术

    .container { display: grid; } grid-template-columns 和 grid-template-rows 定义网格的列和行轨道（track）大小。....container { grid-gap: 10px 20px; /* 行间距10px，列间距20px */ } grid-auto-columns 和 grid-auto-rows 定义自动填充网格时新添加行或列的轨道大小...container { grid-auto-rows: minmax(100px, auto); /* 新添加的行最小高度为100px，最大高度自适应内容 */ } grid-auto-flow 控制网格项目如何自动填充和排列...每个网格项（子元素）内部使用Flexbox，使内容垂直居中。当屏幕宽度小于768px时，通过媒体查询切换到单列布局，以适应移动设备。...CSS Grid 更适合处理二维布局，如表格或复杂网格布局，以及精确的单元格控制。

    14010

    控制页面的滚动:自定义下拉到刷新和溢出效果

    前言 通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini...(橡皮筋效果),使用overscroll-behavior-y: none: 完整Demo 总结 CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为...开发人员最终编写不必要的JavaScript，添加非被动触摸监听器（阻止滚动），或者将整个页面粘贴到100vw / vh中（以防止页面溢出）。...阻止用户的点击动作产生任何效果 2. 阻止缺省鼠标指针的显示 3. 阻止CSS里的hover和active状态的变化触发事件 4....(示例效果) 总结 本文主要是针对页面上的滚动,自定义下拉刷新与溢出效果,通过css中的overscroll-behavior:container阻止滚动链接,也就是在触发子元素的事件操作时,不会传递给父级元素

    3.5K20

    5分钟学习css网格

    序言 您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid...直到你理解了基础知识之后，我才会把你不应该关心的一切都抛在脑后 你的第一个网格布局 CSS Grid的两个核心成分是包装（父）和物品（子）。...它会将6个div彼此叠放在一起 ? 列和行 为了使它成为二维的，我们需要定义列和行。我们创建三列和两行。...grid-column-end:4; } 我们在这里说的是，我们希望 item1从第一个网格线开始，到第四个结束线。...-- 是grid-column-start和grid-column-end的简写属性,通过在其网格布局中提供一行，一个跨度或任何内容（自动）来指定网格项的大小和位置，网格区域的内嵌开始和内嵌结束边缘 -

    1.7K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券