![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 75
Beijiyang999
这个作者很懒,什么都没留下…
展开
-
Understanding Block Formatting Contexts in CSS
A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal flow. According to W3C:Fl转载 2018-04-30 21:07:32 · 263 阅读 · 0 评论 -
grid 入门:用 grid 布局轻松解决 flex 布局不太好做的一个问题
最近一个需求如图:大概是数据上,react 组件从父组件接收两个数组,分别渲染出左右两列;左右两列内容都是动态的,要求自适应文字高度,同一行其行高一致;左列文字右对齐,右列文字左对齐;伪代码:Array1.map(渲染左列表组件)Array2.map(渲染右列表组件)...原创 2018-06-30 17:05:54 · 9076 阅读 · 4 评论 -
滚动条挤占内容宽度、破坏布局的解决方案
问题当内容增多,滚动条从无到有时,它的出现挤压了内容宽度,导致原来设计好的布局被破坏。原因滚动条的宽度是计算到内容 content 里的。解决思路增加一个中间层,使得外部容器宽度保持设计宽度,内部元素排列保持不变。具体案例使用 antd 的 Modal 弹窗,基于其最简单的基本示例,如图: 希望的效果:弹窗定宽定高;一排4个,宽度、边距固定;当总...原创 2018-08-21 17:11:02 · 31418 阅读 · 2 评论 -
垂直居中:两方向,四方法,条条大路通罗马
垂直居中常见的四种方法总结两条路,即 flex box 或者 绝对定位。四种方法,分别如下:方法一: flex box#container{ display: flex; justify-content: center; align-items: center;}方法二:绝对定位2.1 先把顶点移动到中心,再挪回自身长宽的一半(transform-translate)...原创 2019-03-07 19:26:06 · 253 阅读 · 0 评论