CSS常用技巧专题一

一、transition和animation的区别

transition和animation都是用于在CSS中添加动画效果的属性。

1.1、transition

transition是过度属性，强调过度。

它可以控制CSS属性从一个值平滑过渡到另一个值的时间、速度曲线和延迟。

通过指定过渡的 属性、时间、曲线和延迟 ，我们可以创建出各种各样的动画效果。

例如，我们可以使用transition来实现元素的淡入淡出、颜色渐变、尺寸变化等效果。

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。

它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

1.2、animation

animation属性则更加强大，它允许我们创建更复杂和精细的动画效果。

animation属性需要定义关键帧（keyframes），即在动画过程中元素的不同状态。

我们可以指定每个关键帧的具体样式，然后使用animation属性来指定关键帧的名称、持续时间、重复次数、速度曲线等参数。

通过这些参数的组合，我们可以实现更加自由和多样化的动画效果。

例如，我们可以创建旋转、缩放、移动、渐变等复杂的动画效果。

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid black;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。

它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

二、两栏布局的实现

一般两栏布局指的是 左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

2.1、利用浮动

2.1.1、利用浮动，将左边元素宽度设置为200px，并且设置向左浮动

将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}

2.1.2、利用浮动，左侧元素设置固定大小，并左浮动

右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
}
.right{
    height: 300px;
    background: blue;
    overflow: hidden;
}

2.2、利用flex布局

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}

2.3、利用绝对定位

利用绝对定位，将父级元素设置为相对定位。

2.3.1、左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

2.3.2、左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}

三、使用 clear 属性清除浮动的原理

使用clear属性清除浮动，其语法如下：

clear:none|left|right|both

如果单看字面意思:

• clear:left 是“清除左浮动”
• clear:right 是“清除右浮动”

实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。

官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是 clear属性对“后面的”浮动元素是不闻不问的。

考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问。

因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；

同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。

一般使用伪元素的方式清除浮动：

.clear::after{  
    content:'';  
    display: block;   
    clear:both;
}

clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因。

四、画一条0.5px的线

4.1、采用transform: scale()

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

transform: scale(0.5,0.5);

4.2、采用meta viewport的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果

五、水平垂直居中的实现

5.1、利用绝对定位

5.1.1、利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

该方法需要考虑浏览器兼容问题。

.parent {    
    position: relative;
} 

.child {    
    position: absolute;    
    left: 50%;   
     top: 50%;    
     transform: translate(-50%,-50%);
}

5.1.2、利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中

该方法适用于盒子有宽高的情况：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

5.2、使用flex布局

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

六、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞收藏关注✨，一起加油☕