CSS 实现盒子水平垂直居中的方法
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD1.png"><img src=&quo...
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD1.png"><img src=&quo...
<h2>效果展示 {#效果展示}</h2> <h3>清除浮动前 {#清除浮动前}</h3> <p><a href="/img/posts/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A81.png"><img src="/img/posts/%E6...
<h2>效果展示 {#效果展示}</h2> <h3>原始效果 {#原始效果}</h3> <p><a href="/img/posts/%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%801.png"><img src="/img/posts/%E4%B...
一直以来,习惯在 flex 布局中使用 `gap` 这个属性设置间距,一直以来也都是在最新的 Chrome 上调试,所以从来没有想在 flex gap 在其他浏览器上存在兼容性问题。最近看了一下文档才反应过来,`gap` 原来只是 grid 布局的属性,虽然近些年来[主流浏览器都已经支持了](https://caniuse.com/flexbox-gap),但是一些使用人数不少...
一、移动端公共样式 {#menu_index_1} ------------------------- /* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 ...
<br />  无论是`rgb()`颜色函数,还是`hsl()`颜色函数,现在还支持一...
CSS备忘录 {#CSS备忘录} ================ 元素水平和垂直居中 {#元素水平和垂直居中} ---------------------- 水平居中 |-----------------------|-----------------------------------------------------------------------------...
<p>最近有空给网站除草了,在这里也做了一些小优化,添加网站背景图片看起来不这么单调。</p> <p>简单记录折腾日志。</p> <h3>添加渐变背景 {#添加渐变背景}</h3> <p>|---------------------------------------|-------------...
结构大概是这样的,大盒子左下角添加一个不透明多行描述,且盒子为圆角,上下盒子宽度不一致,盒子之间需要有圆弧衔接:  DOM...
<br /> <p><img src="http://static.51tbox.com/static/2024-12-11/col/b3e28084ef575db77ab44a58a06dbe8a/03354c37fb0f43748db42c3a97918694.jpeg.jpg" alt="封面占位图 麋鹿&quo...