日度归档:2020年6月24日

CSS代码中有哪些长度单位可用呢?


摘要:
下文讲述css代码中长度单位的简介说明,如下所示:

在css的很多属性值中都会使用长度单位,如:
width,height,margin,padding border,top,left等都会使用到长度单位,那么css中到底有哪些长度单位可用,如下所示:

绝对长度单位


px–像素

.a {
  width:200px; 
}

css中的px像素不是设备像素,它是一个使用角度度量的单位。


in–英寸

 
.a {
  width:4in; 
}

in英寸是一个物理度量单位,
在CSS领域,英寸只不过被直接映射成像素罢了

1in == 96px


cm–厘米

 
.a {
  width:2cm; 
}

在css代码中,厘米也被映射为像素

1cm == 37.8px


mm–毫米

 
.a {
  width:2mm; 
}

在css代码中,毫米也被映射为像素

1mm == 0.1cm == 3.78px


pt–点

 
.a {
  font-size: 10pt;
}

pt(point)点,
排版中字体常用的单位,它是一种固定长度的度量单位

1pt=1/72in=1.33px


pc–派卡

 
.a {
  font-size: 2pc;
}

pc(pica)派卡是印刷行业使用的长度单位

1pc=12pt=16px


相对字体的长度


em

 
.a {
  font-size: 10em;
}

Em 是一个相对单位,

在无CSS定义下,1em的长度是:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
1em相对于font-size大小


rem

 
.a {
  font-size: 10rem;
}

rem和em都是相对单位


rem

 
.a {
  font-size: 10rem;
}


ex

 
.a {
  font-size: 60ex;
}

ex是一个基于当前字体的x字母高度度量的。
ex度量时有时候根据字体自身的信息,有时候由浏览器指明是通过一个小写字形来度量,最糟糕的情况是,它被设置成0.5em。


ch

 
.a {
  font-size: 60ch;
}

ch和x高度相似,
只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。


vw

 
.a {
  font-size: 60vw;
}

vw 可视区百分比长度单位

vw 可视区域宽度单位,
1vw为可视区域宽度的百分之一


vh

 
.a {
  font-size: 60vh;
}

vh可视区百分比长度单位

vh 可视区域高度单位,
1vw为可视区域高度度的百分之一


vmin

vmin为vh和vw中最小的一个值


vmax

vmax为vh和vw中最大的一个值

CSS预编译工具有哪些什么呢?


摘要:
下文讲述css预编译工具,如下所示:


css预编译工具

css预编译工具的功能:
css预编译工具的功能就是对css代码的文本变量及一些表达式 循环 判断 转换为实际的css代码,
css预编译器是一种css编程语言,我们可以借助css预编译工具生成css文件,供各项目使用

CSS预处理器语言,
  如:Sass(SCSS),LESS,Stylus,Turbine,Swithch CSS,CSS Cacheer,DT CSS
-----------------------------------------------------------------------
市面上使用最多的三种预处理器有:
   Less,Sass(Scss),Stylus


Sass

2007年诞生,
最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架。
目前受LESS影响,已经进化到了全面兼容CSS的SCSS(SCSS 需要使用分号和花括号而不是换行和缩进)

Less

2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,
在ruby社区之外支持者远超过SASS。
缺点是比起SASS来,可编程功能不够。
优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。

Stylus

2010年产生,
来自Node.js社区。
用于Node项目进行CSS预处理支持

CSS预编译操作起什么作用呢?


摘要:
下文讲述css预编译的功能说明,如下所示:


css预编译功能

css预编译的功能:
编译编写的css代码,
如:
我们可以在css中编写一些表达式,函数,变量,循环,判断,然后通过css预编译工具,将css代码转换为实际的css代码,
这个就是css预编译工具的功能。

css预编译功能举例:


  //用var定义一个字体颜色变量样式
  var colorBlue {color:blue}

  //定义一个新闻列表样式
 .tmpTest{
  font-size:20px;
  line-height:20px;
  color:@colorBlue;
  //设置文字颜色由colorBlue
 }


 //预编译工具生成的css代码
  .tmpTest{
  font-size:20px;
  line-height:20px;
  color:blue; 
 }