使用 Grid 实现微信朋友圈图片九宫格布局
2024/12/09 23:24 核心点就两个:第一,实现行列间都等间距,使用 grid 布局。第二,图片不拉伸覆盖容器 object-fit 属性。 <style>
.imageList {
width: 100%;
display: grid;
g
Tailwind CSS 中 ul-ol 默认 list-style- none 导致样式丢失的解决方法
最近在使用的 tailwind 手搓博客前端的时候,遇到的一个不可控的问题,让我产生放弃 tailwind 使用传统 css 样式开发的念头了。本身不是什么大问题,但这种不可控的感觉让人很没有安全感。 一、问题 我的博客文章是 Markdown 格式,所以我使用的 markdown-github-c
Flex 子元素被内容撑开不收缩问题原因及解决方案
问题 最近遇到一个奇怪的问题,我有一个父元素和两个子元素,其中: 父元素:定宽、flex; 子元素 a :也设置的定宽,flex-grow 0,flex-shrink 0,flex-basis 300px 子元素 b :flex-grow 1, flex-shrink 1; 原本的需求就是,元素 a
响应式布局—— @media 媒体查询
思路 需要理解的几个概念: 大屏优先,小屏优先。 所谓大屏优先还是小屏优先,它的意思就是原本你的这套布局样式默认情况下是大屏样式还是小屏样式,即不使用 @media 媒体查询下的样式。 max-width,min-width。 屏幕值是变化的,这两个值就是用来设置查询断点的,当 min-width
css- transform、transition、animation 区别
transform 定义:转换结果,表示一个进行相应转换效果后的一个状态/帧。 常用值: translate(x, y):平移元素,x 和 y 代表水平和垂直的移动距离。 rotate(angle):旋转元素,angle 代表旋转的角度。 scale(x, y):缩放元素,x 和 y 代表水平和垂直