css基础回顾2

发布时间:2023年12月23日

display属性

display:[block|inline|inline-block|none]

block: 块级元素,作用:将行级元素转换为块级元素,转换后独处一行(等价于在块级元素后敲了一个回车),width与height就会有效果。
inline: 行级元素、作用:将块级元素转换成行级元素(注意:转换后高度和宽度就失效了

inline-block: 行内块元素,作用:具备块元素的属性,不会独处一行(不换行)

none: 隐藏块元素或者行元素

float浮动

float:[left|right]

使用经验:

结合left | right来实现页面的布局|排版

float:left | right |none

注意会发生边框他先问题

解决边框塌陷的问题

1、 设置父容器边框的高度(height)(不推荐使用)

2、 设置父元素的结构伪类清除浮动(最常用)

.clearfix:after{
   content: ””;
   display: block;
   clear: both;
}

3、 使用overflow:hidden

4、 在父容器中的子容器最后加一个空的div且清除两边浮动

<div style=”clear:both;></div>

绝对定位

position: absolute

特性:

1、 脱离文档流,定位元素占据的位置会释放

2、 原点计算:如果该元素做了定位,那么就去找它做了定位的父元素(找最近的)作为原点基准,如果父元素都没做定位,则以浏览器(0,0)作为原点基准。

3、 对内联元素定位后,设置宽高属性就会有效果

应用场景:

一般情况下,绝对定位用在下拉菜单、焦点图轮播弹出数字气泡、特别花边等场景

相对定位

position:relative

1、 不脱离文档流,定位元素占据的位置不会被释放

2、 原点计算:以父级元素作为原点基准,若没有父级元素则以浏览器(0,0)为基准。

一般的应用:父相子绝

  1. 父元素为相对定位,子元素为绝对定位,文档元素不会受影响。
  2. 父元素提供相对定位后,子元素以父元素为基准来进行定位。

应用场景:

相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量

固定定位

position:fixed

1、 脱离了文档流

2、原点计算:以浏览器(0,0)作为原点基准,尽管父元素做了定位也不会影响它的原点

基准。

应用场景:

一般在网页中被用在窗口左右两边的固定广告返回顶部图标吸顶导航栏

注意:使用定位后会激活如下5个属性

left | right | top | bottom | z-index

z-index:改变定位后的叠放顺序

取值范围:-1~9999

其他:

设置网页元素的透明度

opacity: 0~1;
filter: opacity(0.2) | contrast(0.2);

过渡transition

transition: 过渡的属性 过渡的时间 过渡的类型 延迟时间;
如:
  transition:all 2s linear 2s;
  transition:width 2s ease-in-out 2s,height .2s ease 3s;

变形transform

transform: 
平移:  translate(X轴,Y轴)
缩放:  scale(2,-2) --- 正数:默认是1 负数:先翻转,再缩放相应倍数
倾斜(扭曲): skew(45deg,45deg)  单位deg(度)
旋转:  rotate(360deg) 
缩放设置基准:
transform-origin:left |center| right | % | px  top | middle | bottom | % | px;

动画animation

animation: 动画规则的名称 动画执行的时间 动画的类型 延迟时间 动画执行的次数 执行动画结束后是否停止在结束的位置 动画反向执行;

如:

animation: mymove(动画规则的名称)  4s linear 2s 2(执行次数|infinite) forwards(在动画结束位置停止) alternate(反向执行);

自定义规则如下2种方式:

方式1:

@Keyframes mymove{
    from{}
    to{}
} 

方式2:

@Keyframes mymove{
    10%{}
    40%,60%{}
    100%{}
} 
animation-play-state: running;
animation-play-state:running | paused [ , running | paused ]*
文章来源:https://blog.csdn.net/qq_64646478/article/details/135166607
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。