CSS2.2中对这个规定有了新的解释。引入了表格式化上下文。并且声明,在CSS的未来级别,将引入其他类型的格式化上下文。 果不其然,CSS3中,引入了GFC,FFC和RFC 4....BFC常见用途: 常见的多栏布局,结合块级别元素浮动,里面的元素则是在一个相对隔离的环境里运行。 防止margin折叠。 防止高度塌陷。 4.2....我们可以通过在网格容器(grid container)上定义网格定义行(grid definition rows)和网格定义列(grid definition columns)属性各在网格项目(grid...item)上定义网格行(grid row)和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。...多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素。 Flexbox 下的子元素不会继承父级容器的宽度。
我们的系统能不能改成自适应布局啊? 我顿时虎躯一震:woc, 要把一个迭代了一年多的固定设计的产品,改成自适应布局? 真让人害怕 ???。...这可能并不总是与视口的大小有关,而是与组件在布局中的放置位置有关。 例如,以下组件可能显示在网站布局的窄或宽列中。 如果有空间,它将显示为两列,否则,我们希望将其堆叠显示。...上图中的左右两个组件,是同一个组件,功能上是完全一样的,只是要展示不同的布局。...目前而言, 我们可以通过以某种方式识别该组件,比如通过添加一个类或使用其他选择器来定位元素,该选择器可以查看它在文档结构中的位置。 但是,这并不能完全实现媒体查询在整个布局中的作用。...为了使卡仅在边栏宽于700px时才显示为两列,我们使用以下CSS: @container (min-width: 700px) { .card { display: grid; grid-template-columns
完成左列定宽右列自适应 步骤如下: 左边列开启浮动 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 实现CSS代码如下: .left { /* 左边列开启浮动 */ float: left...右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下: .left { /* 1....Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下:...Grid方案 实现步骤如下 开启 grid 布局 置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 实现CSS代码如下: .main { /* 开启grid布局 */ display...: grid; grid-template-rows: auto 1fr auto; /* 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部 */ min-height
由于文档流的限制,极大限制了我们的网页,例如:能并排的不能改宽高等。所有,我们需要脱离标准文档流。 CSS中有三种手段可以使一个元素脱离标准文档流,分别为「浮动」、「绝对定位」和「固定定位」。...你可以通过设置top、left、bottom和right偏移量属性来将元素移动到你想要的位置。 但是通常情况下你并不希望元素相对于视口进行定位,而是相对于容器元素。...5.2.2 行和列 容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。 上图中,水平的深色区域就是"行",垂直的深色区域就是"列"。...,直到容器不能放置更多的列。...grid-auto-flow: column dense; 上面代码的效果如下。 上图会先填满第一列,再填满第2列,所以3号项目在第一列,4号项目在第二列。8号项目和9号项目被挤到了第四列。
不同点是float仍可占据位置,不会覆盖在另一个BFC区域上,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止, absolute会覆盖文档流中的其他元素,即遮盖现象。...(3) JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言,比如鼠标单击( click)事件、前后台数据请求(Ajax)等。 10、为什么要初始化CSS?...可以通过在网格容器( grid container)上定义网格定义行( grid definition row)和网格定义列(grid definition column),在网格项目( grid item...)上定义网格行( grid row)和网格列(grid column)来为每一个网格项目定义位置和空间。...自适应的单位有以下几个 百分比:% 相对于视口宽度的单位:ww 相对于视口高度的单位:vh 相对于视口宽度或者高度(取决于哪个小)的单位:Vm 相对于父元素字体大小的单位:em 相对于根元素字体大小的单位
一般来说,在处理这样的问题时,我们需要开发和提供不同的布局,通过检测视口的分辨率,判断当前访问设备的种类,请求不同的页面布局从而提供尺寸较为合适的展示场景。...网格(Grid)布局 网格布局(Grid)是CSS(层叠样式表,为网页添加页面样式的一种计算机语言)布局方案的一种,也是泛用性最广泛的一种。...自适应模式 在活字格中,自适应代表的不是页面自适应,而是组件的自适应。活字格的页面设计是所见即所得的,每一个组件都是通过单元格的组合而形成。...在活字格中,范围模式提供了按照像素与占比两种方式来设定范围 活字格的范围模式设置界面 上图中的最大值占比,代表的是当且设置的列,在整个页面占据的比例为1份,也就是说,如果整个页面,只有当前列被设置了占比为...多行区域的单元格范围设置 通过设置范围模式达到内容自动填充页面的效果 总结 通过对页面拉伸和行列设置灵活运用,活字格所涉及的应用可以灵活的适应不同尺寸下的展示终端,此外,活字格还提供了移动端的界面,方便用户在移动端下
设置该元素的偏移量,值为50%; (4). 通过外边距-值的方式将元素移动回去。...两列布局 所谓的两列布局就是一列定宽,一列自适应的布局。...左列容器开启左浮动; (3). 右列容器开启右浮动; (4). 使中间自适应的宽度为父级容器减去两个定宽的列。...设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持在底部; (4). 设置中间部分容器高度为自适应。...Grid方案 实现步骤: (1). 开启 grid 布局; (2). 设置最小高度为当前视口,不管中间部分有多高,始终都可以保持在底部。
在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度,然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...喔或,这是一个很好的问题。 问题是,只有当视口宽度大于特定值时,开发人员才会使用组件的变体。例如,如果我在平板中使用 featured 也就是 PC 的样式,它不能工作,为什么?...此外,我们可以在任何想要的地方定义它们,这意味着如果需要,我们可以在顶级容器上进行查询。现在大家已经理解了CSS容器查询的基本思想,在看看下面图片加深一下映像。 在左边,这是一个正在调整大小的视口。...在CSS网格中,我们可以通过使用auto-fit关键字告诉浏览器,如果列的数量低于预期,我们希望展开列(您可以在这里阅读更多相关内容)。...CSS容器查询用例 我们来探索一些可以使用CSS容器查询实现的用例。 聊天列表 我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。
盒的宽高其实是有着很复杂的计算方法,这一点我们在CSS进阶系列后面的文章中详细说明。这里我们来看一个例子: <!...就是说对于标准流中的块级非替换元素,如果其overflow最终计算结果为visible,那么高度只会考虑其在标准流中的子元素(比如,移动和绝对定位的盒子是会被忽略的,相对定位的盒子只会考虑其未被定位前的位置...4.2 可以看到,div2即使包含在另一个块盒中,但是如果与div1在同一个BFC且相邻,一样会产生margin折叠。...4.3 多栏布局(更多内容可以参考BFC与多列布局) 4.3.1 两栏布局 特点:侧边栏宽度固定,内容栏可以根据浏览器宽度自适应。 <!...前端精选文摘:BFC 神奇背后的原理 BFC与多列布局 前端精选文摘:BFC 神奇背后的原理
,通常移动端和web端是分开的,也就是会搞两套,一个移动版本,一个pc版本,并且两者的功能要同步迭代,典型的例子就是 m.taobao.com 和 taobao.com 自适应网页设计 自适应网页设计是一种网页设计...{ margin: 1em 2em; } } 这段css表示的意思就是当前视口至少要有800像素,才会给.container选择器加上对应的css样式,你可以加入很多这样的条件,调整页面显示的最佳尺寸...,改变相应的样式,这种行为被称为断点 同时在设计项目的时候,我们可以先完成一个手机端的页面,然后通过断点的方式不断完善pc的展示效果,这种通常被叫做移动优先设计 现代自适应布局 在很久之前,我们经常使用...float进行多列布局,但是出现css3之后,现在我们通常使用flex、grid等现代的方式进行,本质是通过参照容器的空间大小,缩小或者放大每个元素分布的空间,达到动态平衡,更改flex-grow以及flex-shrink...: 500px; } } _Users_01394862_Downloads_A liquid layout.html (2).png 这种自适应的方式在切换起来很流畅,并且布局的改动在grid的加成下变得异常简单明了
长单词和链接 当在移动屏幕上阅读一篇文章时,一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...网格中auto-fit和auto-fill之间的差异的误解 在CSS grid中,repeat函数可以创建响应列布局,而不需要使用媒体查询。...简而言之,auto-fill将在不扩展列宽的情况下对列进行排列,而auto-fit只会在列为空的情况下将列折叠到零宽度。 8....使用 CSS grid 定义 main 和 aside 元素 CSS grid 常规布局中 main 和 aside 部分,为了让布局更加的完美,我们应该让 aside 高度等于 main 高度,即使...压缩或拉伸图像 在CSS中调整图像大小时,如果宽高比与图像的宽度和高度不一致,则可能会对其进行压缩或拉伸。
//html部分同上 .parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px } 三、三栏布局 特征:中间列自适应宽度...③ 缺点 center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。...实现方法简单,兼容性强,不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。 在制作样式之前需要一张类似下面的背景图: ?...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定,右侧自适应 两列自适应布局的四种思路 css常见布局之九:三栏布局的常见实现 【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三列布局
两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式 1.float+overflow:hidden 如果是普通的两列布局,浮动+普通元素的margin便可以实现,但如果是自适应的两列布局,...//html部分同上 .parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px } 三、三栏布局 特征:中间列自适应宽度...③ 缺点 center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。...实现方法简单,兼容性强,不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。 在制作样式之前需要一张类似下面的背景图: ?...参考文章 双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定,右侧自适应 两列自适应布局的四种思路 css常见布局之九:三栏布局的常见实现 【布局】聊聊为什么淘宝要提出
在 CSS 网格中,可以使用 grid-gap 属性轻松地在列和行之间添加间距。...它是行间距和列间距的简写。...按需差距 我真正喜欢 CSS 网格的地方是 grid-gap 仅在需要时才应用,考虑以下模型。 我有一个有两张卡片的部分。 在移动设备上,我希望间距低于第一个,而在桌面上,间距将在它们之间。...在使用 :not 选择器之前无法覆盖它。 如果设计有多于一列,它将不起作用,见下图。 关于解决方案 #2,它没有 CSS 特异性问题。 但是,它仅适用于一个列堆栈。...CSS 数学函数:Min()、Max()、Clamp() 是否有可能拥有动态margin? 例如,根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的! 我们可以。
grid items,即 display 的值为 grid 或 inline-grid 的元素的直接子元素(该子元素 display 不为 flex,grid,或 table)。...弹性格式化上下文(FFC,flex formatting context),在 CSS3 中定义。 栅格格式化上下文(GFC,grid formatting context),在 CSS3 中定义。...BFC 包含内部的浮动(解决内部浮动元素导致的高度塌陷)。 BFC 排斥外部的浮动(触发 BFC 的元素不会和外部的浮动元素重叠)。 外边距折叠的计算不能跨越 BFC 的边界。...各自创建了 BFC 的兄弟元素互不影响(注:在水平方向上多个浮动元素加一个或零个触发 BFC 的元素可以形成多列布局)。...通过 BFC 可以实现灵活健壮的自适应布局,在一行中达到类似 flexbox 的效果,示例如下: 两栏自适应布局 1.gif 多列自适应布局 2.gif 参考资料 块级格式化上下文 包含块:MDN
视口 - viewport IOS 中的 Safari 最早引入的概念 视口:移动设备中,浏览器里显示网页的一块区域(PC 端会忽略) 对于响应式网页,设置视口的信息: (1)....视口的手动缩放:不允许缩放网页 在 HTML 中指定视口信息:(移动端必备) <meta name="viewport" content="width=device-width,initial-scale...<em>列</em>偏移数量,每个<em>列</em>都可以指定向右偏移几列位置(<em>不能</em>用float),偏移<em>的</em><em>列</em>会影响后续<em>的</em><em>列</em>,主要作用是<em>列</em>左右留白,<em>列</em>右对齐,<em>列</em>居中 A. .col-xs-offset-n :<em>在</em> xs 下,当前列向右偏移...<em>列</em>排序数量,控制某<em>列</em>向右或向左<em>移动</em>,并不影响其它<em>的</em><em>列</em>,主要作用是<em>在</em>特定<em>的</em>屏幕下临时调整列<em>的</em>出现位置 A、col-lg-push-n: <em>在</em> lg下,当前列向右<em>移动</em>n <em>列</em><em>的</em>距离 B、col-lg-pull-n...: <em>在</em> lg下,当前列向左<em>移动</em>n <em>列</em><em>的</em>距离 ⑦.
当我遇到一个新产品时,我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序,并注意到我可以在网页上预览公共帖子。...使用CSS Grid进行帖子布局 在生产应用程序中,CSS Grid的最显着的用例之一就是Threads。CSS Grid用于构建帖子布局。...我不知道为什么团队会选择这种方法,但我更喜欢使用gap属性。 为什么不使用命名的CSS网格区域呢? 根据我目前观察到的情况,有三种网格布局变体,它们都可以受益于使用命名网格区域。...当选项卡数量增加时,我们只需要更改CSS变量的值。很简洁,对吧? 溢出换行 我注意到在帖子正文中使用了overflow-wrap: anywhere。我以前没有使用过或听说过这个关键词。...如果Threads团队中有任何人正在阅读这篇文章,我非常好奇为什么。 动态视口单位的使用 我喜欢在启动画面中使用动态视口单位dvh。
当left,right值中的一个将元素定位在body元素外部时,可能会发生这种情况 ? 要解决这个问题,首先需要检查为什么这个元素被放置在viewport之外。...grid 项目 CSS 网格有三种情况可以导致水平滚动,来看看它们。 对列使用像素值 ? 当使用像素值时,这将在视口宽度较小时引起问题。...,只在有足够空间的视口上使用上面的列。...1fr)); grid-gap: 1rem; } 可能会遗忘要针对移动设备进行测试,因为最小宽度为300px,这将导致在某个点进行水平滚动。...一个简单的解决方法是将grid-template-columns重置为1fr,并在视口较大时对其进行更改。
CSS网格中,可以使用 grid-gap 属性轻松在列和行之间添加间距。...按需定制 我真正喜欢CSS Grid 的地方是 grid-gap 只在需要的时候才会被应用。考虑下面的模型。 ? 没有CSS网格,就不可能拥有这种灵活性。...在使用 :not 选择器之前不可能覆盖它。 万一设计中有不止一列,它将无法正常工作。参见下图。 ? 关于解决方案2,它没有CSS特异性问题。但是,它只能处理一个列栈。...或者,当它垂直堆叠时在移动设备上将如何工作?很多很多的复杂性。...CSS数学函数:Min(),Max(),Clamp() 有可能有动态的边距吗?例如,根据视口宽度设置具有最小值和最大值的空白。答案是肯定的!我们可以。
领取专属 10元无门槛券
手把手带您无忧上云