【前端--CSS】知识点（十一）—— 给男朋友总结的CSS知识点（五）

百年孤独html
370 阅读4分钟

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

每日一问，今天你学习了吗？周末到了，刷剧玩游戏的时候不用忘记学习吖~

css3 动画(animation)

animation: name duration timing-function delay iteration-count direction;

animation包含六个属性：

  • animation-name：规定需要绑定到选择器的 keyframe 名称

  • animation-duration：规定完成动画所花费的时间，以秒或毫秒计

  • animation-timing-function：规定动画的速度曲线

  • animation-delay：规定在动画开始之前的延迟

  • animation-iteration-count：规定动画应该播放的次数

  • animation-direction:规定是否应该轮流反向播放动画

例如：

@keyframes myFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.target{
  background: #999999;
  width: 100px;
  height: 100px;
  animation: myFadeIn 1s;
}

@keyframes 用来定义一个动画，其后的第一个单词，就是动画的名字（上面代码中的 myFadeIn）,最外层括号里的内容，就是动画的效果

from 和 to 分别定义两个状态，表示动画是由 0%变成 100%；

rem布局的优缺点

优点： 能让我们在手机各个机型的适配方面；大大减少我们代码的重复性，是我们的代码更兼容。

缺点：

  1. 目前ie不支持 对pc页面来讲使用次数不多；

  2. 数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；

  3. px转换成rem需要手动，计算方式：量的大小除以100，就等于rem，例如：量的设计稿元素宽度是120，那么就写成{width: 1.2rem}。

实现代码如下：

 let changeFontSize = function (designdraft) {
      let width = document.body.clientWidth;
      let fs = 100 * (width / designdraft);
      document.querySelector("html").style.fontSize = parseInt(fs) + "px";
    };
    changeFontSize(750);
    window.onresize = function () {
      changeFontSize(750);
    };

解决1px边框问题

移动端web开发中，UI设计稿中设置边框为1px，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。 解决办法： transform: scale(0.5)

  1. 设置height: 1px，根据媒体查询结合transform缩放为相应尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
  1. 用::after和::before，设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:'';
    width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

CSS允许使用的媒介类型？

@media属性主要有四种类型（包括screen）：

  • all—适用于所有设备。

  • print—打印预览模式/打印页面。

  • speech——适用于“朗读”页面的屏幕阅读器

  • screen——计算机屏幕（默认）

CSS有哪些单位

CSS 有两种类型的长度单位：相对单位和绝对单位。

相对长度：

  • em 描述相对于应用在当前元素的字体尺寸，一般浏览器字体大小默认为16px，则2em == 32px；

  • rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

  • vh viewpoint height，视窗高度，1vh=视窗高度的1%

  • vw viewpoint width，视窗宽度，1vw=视窗宽度的1%

  • vmin vw和vh中较小的那个。

  • vmax vw和vh中较大的那个。

  • % 相对父元素

绝对长度：

  • cm 厘米

  • mm 毫米

  • in 英寸 (1in = 96px = 2.54cm)

  • px 像素 (1px = 1/96th of 1in)

  • pt point，大约1/72英寸；(1pt = 1/72in)

用于控制背景图像滚动的属性

background-attachment

该属性设置背景图像是随页面其余部分滚动还是固定滚动。

background-repeat: no-repeat;
background-attachment: fixed;

主流浏览器前缀

  • -webkit- （Chrome，Safari，Opera的较新版本，几乎所有的iOS浏览器（包括Firefox for iOS）；基本上是任何基于WebKit的浏览器
  • -moz- （Firefox）
  • -o- （旧的，WebKit之前的Opera版本）
  • -ms- （Internet Explorer和Microsoft Edge）

CSS中 link 和@import 的区别

  • link属于HTML标签，而@import是CSS提供的，页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  • import只在IE5以上才能识别，而link是HTML标签，无兼容问题
  • link方式的样式的权重 高于@import的权重

使元素消失的方法

  • opacity：0; 不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

  • visibility：hidden;不会改变页面布局，也不会触发该元素已经绑定的事件

  • display：none;会改变页面布局，可以理解成在页面中把该元素删除掉

avatar
文章
阅读
粉丝