动画、less、scss使用的总结

436 阅读5分钟

less与sass的使用

less 框架应用

1复用

命名前面加上@可以进行复用

@mycolor: red;
@width  : 200px;
@hight  : 200px;
.box2 {
    width           : @width ;
    height          : @hight ;
    background-color: @mycolor;
    @font-size      : 20px;
    font-size       : @font-size;
}
​

2局部使用:局部使用只能在花括号里使用

.box2 {
    width           : @width ;
    height          : @hight ;
    background-color: @mycolor;
    @font-size      : 20px;
    font-size       : @font-size;
}

3嵌套

.box3 {
    width : @width;
    height: @hight;
​
    div {
        width           : 100px;
        height          : 100px;
        background-color: pink;
    }
​
    a {
        text-decoration: none;
    }
}

3mixins混入技术

.border{
   border: 3px solid;
}
.box4{
    width : @width;
    height: @hight;
    .border
}
.li(@radius,@padding,@sie,@color:pink){
    border-radius: @radius;
    padding: @padding;
    font-size: @sie;
    color: @color;
}
.box5{
    width : @width;
    height: @hight;
    background-color: @mycolor;
    .li(100%,20px,100px)
}

数值可以运算 可以进行加减乘除 除法需要用括号括起来 减号需要空格

.box6{
    width : (@width/2);
    height: @hight;
    background-color: @mycolor;
}

scss与less的区别

变量符号为$

混入时用@minxin 用@incluble导入

@mixin border {
    border-radius: 20%;
}
// 用@include引入
button{
    @include border;
}
​

继承类用@extend

.box{
    height:$width ;
    width:$height ;
    background-color: red;
}
.box2{
    @extend.box;
}

占位符用% less与css的区别

1:注释有区别

2:可以嵌套使用,根据dom机构嵌套

3:可以进行运算,仅限数值

4:可以定义变量 有局部和全局变量

5:minxins混入,声明样式块直接带入运用 可以进行传参

响应式布局

针对不同屏幕显示不同效果,用同一套代码适用于不同的终端

媒体查询

通过媒体查询去实现适应哪一种屏幕

如何定义:

1.通过@media关键字定义查询媒体

2.定义宽度

min-width屏幕最小宽度

 屏幕宽度不超过600 */
@media(max-width:600px) {
    .box2 {
        width: 400px;
        height: 400px;
        background-color: rgb(226, 17, 17);
    }
}

max-width 屏幕最大宽度

/* 屏幕宽度大于等于600时显示 */
/* @media(min-width:600px) {
   .box2{
    height: 200px;
    width: 200px;
background-color: rgb(150, 127, 255)};
} */

3.给定范围时通过and链接起来

/* 屏幕宽度最小600到最大1000 */
@media(min-width:601px) and (max-width:1000px){
    .box2{
        width: 500px;
        height: 500px;
        background-color: black;
    }
}

开发方式:

渐进增强,优雅降级

渐进增强:更新新功能 新任务 新玩法

优雅降级:特殊性企业为了保证安全等,一直保持低版本

业务挂钩,用户群体

开发采用的方式跟项目类型和所针对的群体有关,不同项目有不同的开发方式

浏览器兼容

所谓的浏览器兼容问题,是指:因为不同的浏览器对同一段代码右不同的解析,造成页面的现实效果不同意的情况。

浏览器见内核差异会产生兼容问题时产生兼容性的根本原因

浏览器 排版引擎

IEtrident、edgehtml
Chromewebkit、blink
Firefoxgecko
Safariwebkit
Operapresto

浏览器的工作模式常被称为渲染模式

2009年3月19日,微软发布的IE8重新定义了标准模式、再次增强了对规范的支持,同时为了保持对IE7的支持,IE8增加了准标准模式,于是IE8九分成了标准模式、准标准模式、混合模式

csshack有三种实现方式

1:css类内部的hack

2:css选择器的hack

3:html头部的hack

lte:less than or equal to 意思是小于等于

lt:lessthan 小于

gte:greater than or equal to 大于等于

gt:great than 大于

!:不等于

浏览器厂商前缀

火狐 -moz-

欧朋. -o-

微软-ms-

苹果-webkit- 标记字符的使用

1:在html里面使用

&加入字符;

<p>&#9639;</p>

2:在css使用

用伪元素选择器

<h1>标记</h1>
h1::after {
    content: "\2122";
}

文本阴影的使用

text-shadow

<h2>text shadow</h2>
h2 {
    /* 水平 垂直 模糊程度 */
    text-shadow: 10px 10px 10px coral;
}

盒子阴影的使用

box-shadow

<div class="box2"></div>
.box2 {
    width: 10px;
    height: 10px;
    background-color: cornflowerblue;
    box-shadow: 10px 10px 10px cornflowerblue;
}

text-overflow属性的使用

文本溢出的内容如何显示

text-overflow: clip;

text-overflow: ellipsis

不换行在同一行继续显示

white-space: nowrap

<div class="box3">werwerwerwerwerwer</div>
.box3 {
    /* 文本溢出的内容如何显示 */
    text-overflow: clip;
    /* text-overflow: ellipsis; */
    /* 不换行在同一行继续显示 */
    white-space: nowrap;
    /* 隐藏 */
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 1px black solid;
}

word-wrap: break-word;属性使用

某个单词或句子太长不能在一个盒子里面

<div class="box4">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line</div>
.box4 {
    height: 200px;
    width: 200px;
    border: solid black 1px;
    word-wrap: break-word;
}

伪类选择器组合使用

<section>
        <span class="type">1</span>
        <span>2</span>
        <span>3</span>
        <span class="type">4</span>
        <span>5</span>
        <span class="type">6</span>
​
    </section>
span:nth-child(even):not(.type) {
    color: blue;
}

display:none 与visibility:hidden的区别

display:none隐藏盒子并且没有位置

visibility:hidden隐藏盒子但是位置

  <article>
        <h2>1</h2>
        <!-- display:none隐藏盒子并且没有位置 -->
        <h2 style="display: none;">2</h2>
        <h2>3</h2>
        <!-- visibility:hidden隐藏盒子但是位置 -->
        <h2 style="visibility: hidden;">4</h2>
    </article>

transform: rotate和transform: translate的用法

transform: rotate:角度旋转

transform: translate:角度移动

 <h3 class="one"></h3>
    <h3 class="two"></h3>
.one {
    background-color: blue;
    width: 200px;
    height: 100px;
    /* 角度旋转 */
    transform: rotate(90deg);
}
​
.two {
    width: 200px;
    height: 100px;
    background-color: brown;
    /* 角度移动 */
    transform: translate(50px, 50px);
}

创建动画

1:@keyframes +名字 {from开始,to结束}

2:在盒子里面绑定动画animation: flash 输入时间(5s)infinite

<div class="box5"></div>
.box5 {
    width: 500px;
    height: 50px;
    background-color: brown;
    /* 需要绑定动画 */
    animation: flash 5s;
}
@keyframes flash {
    /* 开始 */
    from {
        background-color: burlywood;
    }
    /* 结束 */
    to {
        background-color: cornflowerblue;
    }
}

用百分比创建移动动画

需要用到定位:position

.box6 {
    width: 300px;
    height: 300px;
    background-color: cyan;
    position: absolute;
    animation: run 1s infinite;
}
@keyframes run {
    0% {
        background-color: darkblue;
        left: 0;
        top: 0;
    }
    20% {
        background-color: darkkhaki;
        left: 300px;
        top: 100px;
    }
    50% {
        background-color: rgb(87, 23, 204);
        left: 100px;
        top: 10px;
    }
    80% {
        background-color: darkkhaki;
        left: 500px;
        top: 20px;
    }
    100% {
        background-color: rgb(231, 60, 140);
        left: 0px;
        top: 0px;
    }
}

网站图标引用

1:进入font-awesome网站找到需要的图标引入链接到html里面

2:bootcdn网站里面周到font-awesome 4.70版本,引入后缀为min.css的link链接