显示与隐藏

用与页面模块的显示与隐藏，结合js在开发时非常常用（重点）

  • display: none; 隐藏时不保留原来的地方，类似float
    • 其他属性
    • block：变成可视元素或转换为块级元素
    • inline：转换为行内元素
    • inline-block：转换为行内块元素
  • visibilty: hidden; 隐藏元素后继续占有原来的位置
    • visible： 可视
  • overflow: hidden; 溢出隐藏
    • scroll：添加滚动条
    • auto：自动添加滚动条（较好）

取消图片底部空白

两种方法

  • vertical-align：baseline（基线）/top/middle/bottom；（最佳方法）
  • display：block；

添加省略号

一共三步

  • white-space: nowrap;(强制一行显示，默认是normal自动换行)
  • overflow：hidden；（溢出隐藏）
  • text-overflow：ellipsis；（用省略号代替超出的部分）

    粘性定位 sticky

  • position：sticky；
  • 必须至少有这四个top，bottom，left，right属性中的其中一个才能生效！！

伪元素清除浮动

  • .clearfix::after {
    content: ''; (伪元素必须属性)
    display: block; (插入的元素必须是块级元素)
    height: 0; (不要看这个元素)
    clear: both; (核心代码)
    visibility: hidden;(不要看见这个元素)
    }

盒子

  • 区别于默认的盒子算法content-box（width=内容+padding+margin）
  • 代码：box-sizing: border-box (width=width)注意padding或margin不要超过盒子的大小

动画过渡

  • 代码：transition: width 1s,height 2s;
    • 如果所有属性都加过渡，属性填all即可
    • linear 匀速
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加速再减速
  • 时间必须加单位（重点！）