如果你的惯用策略就是按部就班地组合布局 —— 先把 A 元素放在这儿，好了，A 元素就位了，我再看怎么把 B 放在那儿 …… 那你没有挫败感才怪呢。...article、div、li、ul 以及 p 标签都是块级元素。 注意，在上面的例子中，为什么即使 img 标签是行内元素，头像图片依然独占一行？因为它下方的 div 是块级元素。...下面咱们的第一段 CSS 代码，我们会把它放在 HTML 文档中 head 标签的 style 里： .tweet { display: flex; } 干得漂亮！...我们还要把它变成一个 Flex 容器，这样里面的按钮就能排成一行了（用 flex-direction: row）。...一种就是设置 Flex 子项的对齐方式。你应该对设置对齐方式很熟悉，每个富文本编辑器顶部都有这种功能的按钮： ? 它们把文本进行左对齐、居中对齐、右对齐以及 “两端对齐”，也就是铺满整行。
② 相关概念： 2.1 容器：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”，比如上面例子中是 tab-bar。...2.2 项目：容器内的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。比如上面例子中的 tab-bar-item。...所以我们需要将模板和样式都抽取出来，放在一个单独的文件中，然后在App.vue引用该文件即可。比如： <!...App.vue 组件也应该增加多一个 img 标签来存放活跃状态下的图片。...$router.replace(this.path) } } 那么path具体的数值来自哪里呢？
可它都火成这样了，我也没把它放在心上，因为这个技术方案就是有着很明显的痛点。你一看这代码一长串的 class 名，就感觉很糟心。...这些容器组件你一看就知道他要支持什么布局，例如 Flex() Stack() Row() Clomn() Tab() 所以呢，这种直接以容器属性来主导的布局风格就跟传统的 css 不一样。...div> 写好之后呢，我才回过头去重新分析布局特性是什么，应该用什么样的属性来约束。...这个时候，其实我的布局思维已经被拆解成了两个步骤。 然后紧跟着大问题就来了，我这个父级容器，应该叫个什么名字呢？...不过这对于喜欢定制自己 UI 的道友们而言，应该会很喜欢它。因为我总能时不时遇到有人在群里问如何修改 antd 的样式。如果能够比较自由定制自己的样式，或者小幅度调整组件样式，应该会很爽。
一个小程序项目必须有这3个描述App的文件，它们必须放在应用程序的根目录下，否则小程序会提示找不到app.json文件。...wxml文件类似于我们熟悉的HTML文件，用来编写页面的标签和骨架，不同的是wxml文件里的标签元素不可以使用HTML标签，只能使用小程序自己封装的一些组件，这些组件也是我们后面要重点学习的知识。...wxss文件的作用类似于我们熟悉的CSS文件，用于编写小程序的样式，实际上小程序的样式编写语言就是CSS，只是把.css文件换成了.wxss文件。 json文件用来配置页面的样式与行为。...image组件用来显示一张图片，类似于html中的img标签， 需要设置一个src属性，该属性指向一张图片的路径，用来显示该图片。...代码如下： /* 所有组件元素的容器样式 */ .container{ /* flex布局控制容器下子元素的排布规则 */ display: flex; flex-direction
这样的话，如果我们把思路转向组件的父组件呢?换句话说，如果我们查询父组件，并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。 什么是容器查询 首先，让我定义容器。...然后，再告诉浏览器，如果父元素的宽度等于或大于500px，它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。...我可以把这些组件分成以下几个部分 Viewport (媒体查询) Parent （容器查询） 通用:不受影响的组件，如按钮、标签、段落。 对于示例UI，下面是我们如何划分组件。...不仅如此，我们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种情况下，清楚在何处使用此变体是很重要的。 问题是，如何告诉设计师应该在哪里使用这些组件。...另外，我添加了contain属性。然后，如果容器宽度大于180px，将显示用户名。 另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。
但是对于我们这类特殊需求，只用可视化设置显示是满足不了需求的。这就要求我们学习一下CSS的布局知识，直接通过代码的方式来控制展示。...; row-gap: 12px; 我们还需要设置一下对齐方式，我们设置为左对齐 justify-content: flex-start; 这些属性要设置到哪里呢？...一般是要设置在父容器上。...现在图片组件的父容器是普通容器，我们切换到样式，点击CSS，粘贴如下的样式代码 图片 self { column-gap: 12px; row-gap: 12px; padding-top...如果认为低代码只是简单的拖拽就可以完成开发，那完全是一种主观的判断。还是要实际的操作一下你才可以体会到什么是低代码开发，低在哪，代码又在哪里。
也就是在当天，我给自己的博客 github 上面提交了一个 issue，也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的，这一拖，两个月就过去了，我的主题切换功能才终于上线了。...而切换的方式，我上面说到的是通过 js 定义，这个是前端实现的，当然，也可以后端实现，我发现 V2EX 好像就是调用了一个接口实现的，这个应该属于后端实现了。...css文件的加载位置 写过前端的人都应该知道，css 文件一般会放在 head 标签里面，而且文件是之上往下读取的，也就是说后面的文件中的样式可以覆盖上面的文件样式，这也就是主题切换的原因，其实就是样式覆盖...按理来说，做到这一步，整个主题切换的工作已经完成了，根本不需要涉及后端的操作，那为啥我要提到后端 cookies 呢？...我的解决办法的是把 js 中判断主题策略的方法删除掉，然后把判断主题状态的事情交给后端来做。
最近，Chrome团队发布了对一个新的CSS规范的实验性支持，即样式查询。简而言之，它让我们查询容器的样式，而不是只查询尺寸。在查询容器尺寸不够的情况下，这可能很有帮助。...容器查询还不够吗？ 这是一个好问题。在容器查询中，我们可以根据一个组件的父级宽度来控制它的样式，这非常有用。不过，在某些情况下，我们可能不需要查询尺寸，而是想查询一个容器的计算样式。...，然后在不在 CSS 中创建更多特定性的情况下为标题和描述打标签。.... */ } } 在这种情况下，样式查询的有用之处在于，将上述样式放在 CSS 中的一个地方是有意义的。...很简单，我们需要一种方法来告诉组件，如果你住在这个容器内，卡片的样式应该被填充。
其实，对于CSS来讲，大家都抱着一种「死记硬背」的东西来对待它。久而久之，就会出现上述我说的问题，一个属性或者一个使用案例，需要去指定的网站去查询。...这算是好的呢，有些同学没有自己的知识体系或者收藏资料。 每次遇到问题，都是baidu/google一下，然后CV大发一通。 其实，我们应该把将 CSS 视为一组布局模式。...为什么它们不共享相同的选项呢？我们将很快揭开这个谜团，但首先，我需要分享另一个对齐属性：align-self。...「根本原因是flex-shrink 的默认值是 1」，我们在示例中设置了该属性，按道理输入框应该能够缩小到它需要的程度！但是却事与愿违。...在 Flexbox 中，自动边距变得更加有趣： >> 「自动边距将吞噬额外的空间，并将其应用于元素的边距」。它使我们能够精确控制在哪里分配额外的空间。
不过你可以随时随地的重写它！常见的例子是：把 li 元素修改成 inline，制作成水平菜单。...所以开发者们把以下CSS代码放在他们页面上： * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;...比较下面两个例子：(貌似博客园不支持标签,代码里我用代替，大家懂意思就行) 我感觉好像我在漂浮！...*清除浮动(clearfix hack) img { float: right; } ? 不......这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！...把页面缩小看下效果！ article img { float: right; width: 50%; } ?
scale-down：会在 none 或 contain 中选择一个，原则是：当容器小时，它的表现和 contain 一样；当图片小时，它的表现和 none 一样。即谁小选择谁。...到这里不知道有没有小伙伴和我一样，在看到图片的不同表现时，我特意去浏览器查看了下 的真实尺寸，发现依然是 width: 100%;height: 100%;是充满整个容器的。...但为什么内容显示却有不同的效果呢，这让我产生了疑惑。本着发现探索的精神，就去寻找答案了。 W3c 是这么描述的：标签创建的是被引用图像的占位空间。...不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。 多图片的布局 上面一直在说的都单张图片的显示。只要我们把图片用合适的方式放进容器即可。如果是图片列表呢？...但是我认为瀑布流布局也是我们应该掌握的内容之一，即便此时用不到，也可以先把文章收藏起来，以备不时之需，文中采用了多种方式的实现，你可以选择一种最贴合你需求的方式。
这里就把GPT-4干的活儿展示一下： 先干点粗活 我的提问 我的文件夹下有很多.mdx文件，文中有若干段落： \s*<img src="(.*?)"...还可以让他继续完善 再解决一个问题：修改页面展现方式 GPT的回答毫无bug： 要让标签（tags）和“阅读文章”（Read post）按钮并排显示，你需要将它们放在相同的容器中，并使用`flex`布局来使它们水平排列...此外，还需要确保这个容器在不同屏幕尺寸下都能适应布局。...以下是调整后的代码： ```astro 代码太长了，此处略 ``` 更改后的代码中，我创建了一个新的父级`div`元素，其类为`flex flex-col sm:flex-row justify-between
flex容器,但是每个子元素两边是子元素间距的一半 align-content flex-start flex子元素在最上边 flex-end flex子元素在最下边 center flex子元素在纵向正中间...space-between 纵向平分flex容器 space-around 纵向平分flex容器,但是每个子元素两边是子元素间距的一半 stretch 默认：li将ul划分 align-items flex-start...5，浏览器兼容问题五：图片默认有间距 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。...碰到几率：20% 解决方案：使用float属性为img布局 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。...使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等） ◆IE6认识的hacker 是下划线_ 和星号 * ◆IE7 遨游认识的hacker
最终，他们把事情搞得过于复杂，导致 CSS 极难维护。...那么，答案是什么呢？ 我们希望我们的风格足够通用，可以在不同的语境中重复使用，但又不会太通用，以至于我们不得不在这些语境中不断重复自己的风格。... 当然，我们可能还想使用其他灵活的属性，但我坚信需要时才添加，而不是试图考虑所有可能的使用情况。就这张卡而言，这已经足够了。...我们可以使用 width >= 图像 当设计师在大屏幕和小屏幕之间采用完全不同的设计时，我有点抓狂。我会尽我所能让它发挥作用。 在这里，我们的图像会从一个小圆圈变成大屏幕上的全尺寸图像。...因此，我们的 --width 属性实际上是设置了最大宽度，而宽度和高度都设置为自动，由图片的宽高比来决定。为了补偿这一点，我在文本容器中内联添加了一个 align-self: center。
1.4.2 object-fit 限制高宽也可能会出现问题，比如图片被拉伸了，非常难看： [ ] 这个时候我们可以借助 object-fit，它能够指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽...正好， 标签提供了相应的属性 srcset 供我们操作。...接下来还需要考虑，当图片链接挂了，应该如何处理。 处理的方式有很多种。最好的处理方式，是我在张鑫旭老师《图片加载失败后 CSS 样式处理最佳实践》这篇文章中看到的。...那么，我们的页面如何尽可能做到高可用性呢？ 2.2.1 使用习惯用法 使用习惯用法。当我们设计一个新的页面时，页面位置、功能设置、视觉元素应当和惯常用法相差无几，这样才能让用户有舒适感。...: all 可以很好地解决这个痛点： [ ] 别看只是减少一次点击鼠标的次数，但正是这些细节的累积，才更能让用户感受到开发者的用心。
scale-down：会在 none 或 contain 中选择一个，原则是：当容器小时，它的表现和 contain 一样；当图片小时，它的表现和 none 一样。即谁小选择谁。...到这里不知道有没有小伙伴和我一样，在看到图片的不同表现时，我特意去浏览器查看了下 的真实尺寸，发现依然是 width: 100%;height: 100%; 是充满整个容器的。...但为什么内容显示却有不同的效果呢，这让我产生了疑惑。本着发现探索的精神，就去寻找答案了。 W3c 是这么描述的： 标签创建的是被引用图像的占位空间。...不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。 多图片的布局 上面一直在说的都单张图片的显示。只要我们把图片用合适的方式放进容器即可。如果是图片列表呢？...但是我认为瀑布流布局也是我们应该掌握的内容之一，即便此时用不到，也可以先把文章收藏起来，以备不时之需，文中采用了多种方式的实现，你可以选择一种最贴合你需求的方式。
背景 常见的一个图文列表设计，通常是这样的，两端顶着容器，中间的间距平均分，如下图的某东商品列表的设计： ? 列表是这样自适应的，当视窗足够放多少个商品就放多少个，然后各个商品项目之间的间距平均分。...我们看到效果，最后一行不正确，应该向左对齐才对，详细比较过多种方案，个人觉得还是增加空白项这种方案最佳，就是往后面多加几个空白项，你至少要放入 最大屏能显示的个数减去1个就行了，当然放得更多也是显示正常的...如果说外框容器是定死的比如1000px，那么每行的项目数目也是固定的，那可能还稍微好一些。...我们接着想，还不如直接用以前的display: inline-block 或者 float:left去实现呢，但是其实本质上跟 flex-start还是一样的做法。...因此我觉得就只有放空项目方案是最佳的了，维护起来也方便。比如未来项目宽度优200px改成了100px，我们直接把200改成100再检查一下空项目是否放的足够。
我写码的过程大致如下： 根据设计稿把需要的标签写好（这里拿一个作者简介卡作为例子）: <img src="http://p0.qhimg.com/t01e2c15da7b6fa9aba.jpg...我的标签看上去仍然很“语义化”且与样式分离，而且现在CSS也与标签结构解耦合了。额外的好处是避免了不必要的选择器嵌套，保持了低优先级。 但是很快我又陷入了两难境地。...但是说我们确实想使它成为一个真正的CSS组件，而不是从通用类库里挑出需要的类名进行组合。那么我们应该怎么称呼它呢？...我们更倾向于将它组合成小一些的组件，就像我们之前讨论过的那样。 那么这些小一些的组件会是什么？ 它可能被放在.card容器里。...你仍然应该创建组件 我的观点与那些顽固的实用派CSS拥护者的区别之一就是，我不认为你应该仅用通用类来给标签添加样式。
我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。...并且这里的弹出层的样式也可以完全自定义，没有用到 JS 代码，并且查看 HTML 代码可以看到不需要多余的标签。 怎么实现的呢？...的值，相当于content:"ABC" 而且框体由于是伪类生成的，所以我们可以自定义它的样式及位置，运用这个效果，我们应用在可以在许多无法正常把信息展示完的地方。...在移动端我们可以使用 flex 布局，但是在 PC 端如果要兼容 IE6+ ，通常都需要一些额外的标签控制最后一个元素或者配合 JS 进行运算。
比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。...标签列表 当有一个标签列表时，建议限制一个标签的最小宽度，这样如果它的内容很短，它的外观就不会受到影响。 ? 通过具有这种灵活性，无论内容有多短，标签都将看起来不错。...但是，如果内容作者输入了一个非常长的标签名称，而他使用的内容管理系统没有标签的最大字符长度，将会发生什么情况呢？ 我们也可以使用max-width。...用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。...我为图像添加了以下CSS： img { min-width: 35%; max-width: 70%; } ? 事例源码:https://codepen.io/shadeed/pe...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
