常用css技巧

• transition和animation的区别

• transition

• animation

• 两栏布局的实现

• 利用浮动

• 利用flex布局

• 利用绝对定位

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

• 画一条0.5px的线

• 采用transform: scale()

• 采用meta viewport的方式

• 水平垂直居中的实现

• 利用绝对定位

• 使用flex布局

transition和animation的区别

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

transition

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

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

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

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

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

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

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

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定义）完成动画。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

两栏布局的实现

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

利用浮动

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

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

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

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

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

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

利用flex布局

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

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

利用绝对定位

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

左边元素设置为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;}

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

左边元素宽度设置为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的线

采用transform: scale()

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

transform: scale(0.5,0.5);

采用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只针对于移动端，只在移动端上才能看到效果

水平垂直居中的实现

利用绝对定位

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

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

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

利用绝对定位，设置四个方向的值都为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 的一半 */}

使用flex布局

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

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

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

参考文档

• https://www.cnblogs.com/gogo2027/p/17159485.html