CSS常用属性

​

 

?

1 2 3 4 5 6 7 8 9 10 11 12

/* *作者：呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货，记得关注哦！ *vx：it_daimeng */

　　

1. 动画

调用自定义动画 ：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

.cls_div{     width: 100px;     height: 100px;          /*执行动画    infinite:重复动画*/     animation: 5s change2 infinite;   } 点击并拖拽以移动      自定义动画:        @keyframes change{     from{       background-color: pink;     }     to{              background-color: blue;        margin-left: 100px;            }   }       @keyframes change2{     0%{       background-color: pink;              margin-left: 0px;     }     50%{              background-color: blue;        margin-left: 100px;            }     100%{       background-color: pink;              margin-left: 0px;     }   }

　　

 

调用动画库:

1. 导入动画库

<link rel="stylesheet" href="css/animate.min.css" />

1. 调用

 

?

1 2 3 4 5 6 7 8 9 10

.cls_div2{   width: 150px;     height: 30px;     background-color: pink;     animation: 3s tada infinite; /*调用动画库中的动画*/   }

　　

 

1. 查看动画库中有哪些动画名称(动画库网站)

网址:https://daneden.github.io/animate.css/

 

1. 响应式,多媒体查询

媒体查询：是指根据不同的终端(不同分辨率的设备),选择不同的样式

方式1:在同一个css文件中分辨不同的终端

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

.zong{              width: 100%;              border: 1px solid red;               display: flex;              flex-direction: row;              flex-wrap: wrap;   }       /*超小屏幕*/   @media only screen and (max-width: 767px) {              .zong div{                      width: 100%;           background-color: blue;                  }          }       /*小屏幕*/   @media only screen and (min-width: 768px) and (max-width: 992px) {              .zong div{                      width: 50%;           background-color: green;                  }          }       /*大屏幕*/   @media only screen and (min-width: 993px) and (max-width: 1200px) {              .zong div{                      width: 33%;           background-color: pink;                  }          }       /*超大屏幕*/   @media only screen and (min-width: 1201px) {              .zong div{                      width: 25%;           background-color: orange;                  }          }

　　

 

方式2:创建不同的css文件,根据不同的分辨率调用不同的css文件

 

 <link rel="stylesheet" href="css/common.css" />

    <link rel="stylesheet" media="screen and (max-width:767px)" href="css/iphone.css"  />

    <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" href="css/ipad.css"  />

    <link rel="stylesheet" media="screen and (min-width:993px) and (max-width:1200px)" href="css/pc.css"  />

    <link rel="stylesheet" media="screen and (min-width:1201px) " href="css/big_pc.css"  />

 

单位:px em rem的区别

　　在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的绝对单位em和rem。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。　

px

em

）是指相对于父元素的字体大小的单位

代码

<div class="one">

    <span>第一层</span>

    <div class="two">

        <span>第二层</span>

        <div class="three">

            <span>第三层</span>

        </div>

    </div>

</div>

font-size: 20px; } .one{     font-size: 1.5em; } .two{     font-size: 0.5em; } .three{     font-size: 2em; }

结果:

　.one  --->  30px    1.5 * 20 = 30px

　.two  --->  15px    0.5 * 30 = 15px

　.three ---> 30px     2  * 15 = 30px  

 

rem

<div class="one">

    <span>第一层</span>

    <div class="two">

        <span>第二层</span>

        <div class="three">

            <span>第三层</span>

        </div>

    </div>

</div>

font-size: 20px; } .one{     font-size: 1.5rem; } .two{     font-size: 0.5rem; } .three{     font-size: 2rem; }

结果： 

　　　.one  --->  30px    1.5 * 20 = 30px

　　　.two  --->  10px    0.5 * 20 = 10px

　　　.three ---> 40px     2  * 20 = 40px  

 

文字为什么都用px:

考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。

一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。

多屏适配布局问题

移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位基于rem的原理，我们要做的就是: 针对不同手机这里我们提取了一个公式(rem表示基准值)

说明：

 

1.乘以dpr，是因为页面有可能为了实现2.除以10，是为了取整，方便计算(理论上可以是任何值)

所以就像下面这样，html的font-size可能会：

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2 / 10 = 64px

iphone6: 375px * 2 / 10 = 75px

 

 

 

​