CSS常用技巧专题一

发布时间:2023年12月19日


一、transitionanimation的区别

transitionanimation都是用于在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; 这样右边就触发了BFCBFC的区域不会与浮动元素发生重叠,所以两侧就不会发生重叠。

.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:leftclear: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.5pxviewport只针对于移动端,只在移动端上才能看到效果

五、水平垂直居中的实现

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:centerjustify-content:center设置容器的垂直和水平方向上为居中对齐,然后它的子元素也可以实现垂直和水平的居中。

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

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

六、最后

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

文章来源:https://blog.csdn.net/u012804440/article/details/135074661
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。