2024年09月16日
在过去十年左右的时间里，浮动是布置复杂网页的唯一选择。因此，即使在旧版浏览器中，它们也得到了很好的支持，开发人员已经使用它们来构建数百万个网页。
flexbox “柔性框”或“弹性框”布局模式提供了浮动的替代方法，用于定义网页的整体外观。浮动仅允许我们水平放置箱子，而弹性框让我们完全控制箱子的对齐方式、方向、顺序和大小。
2024年09月16日
为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？
水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了：
<div class="g-container">
<div class="g-box"></div>
</div>
.g-container {
display: flex;
}
.g-box {
margin: auto;
}
2024年09月16日
function fn(){
let a = 10; //变量a在fn函数内部定义 fn就是a的作用域 变量a被称为局部变量
}
fn();
?
console.log(a); //报错2024年09月16日
年初用Hugo搭建了个人博客，日常的一些想法和复盘都会记录在上面，写了大半年了，还是觉得博客不太能够满足个人的需求，博客虽然有标签、分类，也可以分享，但是没有那么的直观和好用。
2024年09月16日
CSS3的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下，这个属性已经被所有的现代浏览器所支持。如果想支持黑莓浏览器和安卓版的UC浏览器，你就需要添加-webkit-前缀了。
#myelement{
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
}2024年09月16日
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题（不一定复杂，但个人觉得都挺值得一说），这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题，希望帮到各位朋友。期待您的点赞，谢谢。
input标签元素（如button、text 、areatext）的一些事件（如click、focus等），在很多浏览器下默认会有蓝色边框出现，如把一个普通button的background和border都设置为none后，触发点击后样式如下：
2024年09月16日
transform: translate(-50%, -50%) 是一种常用的CSS技术，用于将一个元素在其容器中水平和垂直居中。它通常结合绝对定位和相对定位来实现这一效果。下面分别对这三个方面进行详解：
transform 是CSS属性，用于应用一些变换效果（如平移、缩放、旋转等）到元素上。translate() 是transform 属性的一个函数，用于平移元素。通过给 translate() 函数提供水平和垂直的偏移百分比，可以将元素相对于自身的尺寸进行平移，从而实现水平和垂直居中。
2024年09月16日
欢迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)
上一章节中，我们说主要说到了CSS3的transform属性的主要两大特点，先写后执行和translate不会改变旋转基点的位置。
今天我们拿这两个特性来做一些复杂的示例。
先来看效果：
这里我们用到的translateZ属性，它是垂直于屏幕的Z轴上的平移，默认为0，大于0则会离我们的视线越来越近。反之则反。
2024年09月16日
CSS3 转换
CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。
它是如何工作？
变换的效果，让某个元素改变形状，大小和位置。
您可以转换您使用2D或3D元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。