博主信息
 一纸荒凉* Armani
博文
118
粉丝
4
评论
5
访问量
39074
积分:0
P豆:302
博文分类
html3篇
CSS11篇
JavaScript16篇
jQuery2篇
Vue11篇
PHP20篇
ThinkPHP32篇
React0篇
other4篇
Laravel17篇
小程序5篇

【CSS入门】学习CSS盒模型及常用样式属性详解(整理)

2021年03月24日 12:47:48阅读数:750博客 /  一纸荒凉* Armani/ CSS

初步认识盒模型

前言

盒子模型,英文即box model。无论是div、span、还是a都是盒子。

但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。

盒子中的区域

一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

盒子模型的示意图:

上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意:宽度和真实占有宽度,不是一个概念

盒模型计算公式

总宽度:左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

总高度:上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

标准盒模型和IE盒模型

我们目前所学习的知识中,以标准盒子模型为准。

标准盒子模型:

img

IE盒子模型:

img

上图显示:

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式:

  • width和height:内容的宽度、高度(不是盒子的宽度、高度)。
  • padding:内边距。
  • border:边框。
  • margin:外边距。

CSS盒模型和IE盒模型的区别:

  • 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
  • IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。

内外边距语法规则

1.内边距padding

语法规则

  • padding-top 上内边距
  • padding-right 右内边距
  • padding-bottom 下内边距
  • padding-left 左内边距

简写形式

  • 四个值 5px 10px 15px 20px 上右下左
  • 三个值 5px 10px 5px 上 左右相等 下
  • 两个值 5px 10px 上下相等 左右相等
  • 一个值 10px 上下左右相等

2.外边距margin

外边距更很好理解,就是指边框以外的距离,可以表示和其它元素之间的距离,使用margin属性来设置。

二、属性设置

1、单独写法
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;

外边距可以有负值
margin-left和margin-top可以改变这个元素本身的位置
margin-right 和margin-bottom 不能改变这个元素本身的位置,只能改变这个元素右边和下边元素的位置

2、复合写法
margin后面可跟多个值,中间用空格分离,含义如下:
margin:(一个值) 上下左右外边距均为这个值
margin:(两个值)第一个值为上下外边距,第二个值为左右外边距
margin:(三个值)第一个值为上外边距,第二个值为左右外边距,第三个值为下外边距。
margin:(四个值)第一个值为上外边距,第二个值为右外边距,第三个值为下外边距,第四个值为左外边距。

外边距实现盒子居中

可以让一个盒子实现水平居中,需要满足一下两个条件:

  1. 必须是块级元素。
  2. 盒子必须指定了宽度(width)

然后就给左右的外边距都设置为auto,就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局,示例代码如下:

  1. .header{ width:960px; margin:0 auto;}

border边框属性

语法:

  1. border : border-width || border-style || border-color

边框属性—设置边框样式(border-style)

边框样式用于定义页面中边框的风格,常用属性值如下:

  1. none:没有边框即忽略所有边框的宽度(默认值)
  2. solid:边框为单实线(最为常用的)
  3. dashed:边框为虚线
  4. dotted:边框为点线
  5. double:边框为双实线

表格的细线边框

以前学过的html表格边框很粗,这里只需要CSS一句话就可以美观起来。 让我们真的相信,CSS就是我们的白马王子(白雪公主)。

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。

圆角边框(CSS3)

从此以后,我们的世界不只有矩形。radius 半径(距离)

语法格式:

  1. border-radius: 左上角 右上角 右下角 左下角;

案例:

  1. <style>
  2. div {
  3. width: 200px;
  4. height: 200px;
  5. border: 1px solid red;
  6. }
  7. div:first-child { /* 结构伪类选择器 选亲兄弟 */
  8. border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
  9. }
  10. div:nth-child(2) {
  11. /*border-radius: 100px; 取宽度和高度 一半 则会变成一个圆形 */
  12. border-radius: 50%; /* 100px 50% 取宽度和高度 一半 则会变成一个圆形 */
  13. }
  14. div:nth-child(3) {
  15. border-radius: 10px 40px; /* 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 */
  16. }
  17. div:nth-child(4) {
  18. border-radius: 10px 40px 80px; /* 左上角 10 右上角 左下角 40 右下角80 */
  19. }
  20. div:nth-child(5) {
  21. border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
  22. }
  23. div:nth-child(6) {
  24. border-radius: 100px;
  25. height: 100px;
  26. }
  27. div:nth-child(7) {
  28. border-radius: 100px 0;
  29. }
  30. </style>

box-sizing属性及作用

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

标准盒模型 box-sizing: content-box

content-box:
width = content width;
height = content height

IE盒模型 box-sizing: border-box

border-box:
width = border + padding + content width
heigth = border + padding + content heigth

  1. <div class="content-box">Content box</div>
  2. <br>
  3. <div class="border-box">Border box</div>
  4. <style>
  5. div {
  6. width: 160px;
  7. height: 80px;
  8. padding: 20px;
  9. border: 8px solid orange;
  10. background: pink;
  11. }
  12. /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ; */
  13. .content-box {
  14. box-sizing: content-box;
  15. }
  16. /** 元素的总宽度 = 160; 总高度 = 80px; */
  17. .border-box {
  18. box-sizing: border-box;
  19. }
  20. </style>

从下图我们可以看出,同样宽高的两个盒子,采用怪异盒模型和IE盒模型的总宽度明显不同。前者总宽度需要宽高加上内边距和边框的尺寸,后者的总宽度就是设置的宽高,已经压缩了我们设置的宽高从而包含了内边距和边框的尺寸。开发中我们经常使用后者,可以避免盒子之间的挤压变形。

总结一下:

  1. 对于给定width和height的元素,设置box-sizing属性会影响盒子content width和 content height。
  2. 浏览器默认使用标准盒子模型,即box-sizing: content-box, 就是我们所写的宽度和高度就是对content 进行设置的。
  3. 在一些响应式布局中,我们修改了浏览器计算元素宽度、高度的方式,认为元素的宽度和高度是包括内边距padding和边框border

背景图片颜色设置

CSS 可以添加背景颜色和背景图片,以及来进行图片设置。

background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景的合写(复合属性)

背景图片(image)

语法:

  1. background-image : none | url (url)

参数:

none :  无背景图(默认的)
url :  使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

背景平铺(repeat)

语法:

  1. background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数:

repeat :  背景图像在纵向和横向上平铺(默认的)

no-repeat :  背景图像不平铺

repeat-x :  背景图像在横向上平铺

repeat-y :  背景图像在纵向平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置(position)

语法:

  1. background-position : length || length
  2. background-position : position || position

参数:

length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position :  top | center | bottom | left | center | right

说明:

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意:

  1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  2. 如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的,就是背景图片居中对齐了。

背景附着

语法:

  1. background-attachment : scroll | fixed

参数:

scroll :  背景图像是随对象内容滚动
fixed :  背景图像固定

说明:

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

  1. background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

  1. background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

背景缩放(CSS3)

通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

  1. background-image: url('images/gyt.jpg');
  2. background-size: 300px 100px;
  3. /* background-size: contain; */
  4. /* background-size: cover; */

position定位

CSS中position的定位主要分为静态定位,相对定位,绝对定位和固定定位,属性值分别为:static,relative,absolute,fixed;元素的位置通过 “left”, “top”, “right”, “bottom” 属性进行规定

1. 静态定位 static

它是position的默认值,一般不设置position属性时,元素会按照正常的文档流进行排列。

2. 相对定位 relative

relative属性,我们只要搞清它是相对哪个对象来进行偏移的就ok了,答案是它原本的位置。需要注意的是,相对定位不会脱离文档流,原来的位置仍然被保留。

举个栗子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. div {
  9. height: 100px;
  10. width: 100px;
  11. background-color: pink;
  12. margin-bottom: 10px;
  13. }
  14. .box {
  15. background-color: green;
  16. position: relative;
  17. left: 120px;
  18. top: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div></div>
  24. <div class="box"></div>
  25. <div></div>
  26. </body>
  27. </html>


可以看出,第二个方块在原来位置的基础上,向右移动了120px,向下移动了3px,并且下方粉色div元素仍然在它原本的位置上,并没有因为绿色的div元素的移动而产生位置上的变化,这是因为虽然绿色的位置发生了变化,但他原来的位置仍然保留着,没有脱离文档流。

3. 绝对定位 absolute

它是相对不是static的最近一级父元素来进行定位的,如果没有这样的元素,那么就相对body元素来进行定位,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置。

我们可以这样理解:假设一个div元素,他所有的父级元素属性都是position:static,也就是所有父级元素都没有设置position,那么这个div就会相对body元素来进行定位。如果这个div元素存在某一个父级元素设置了除static以外的position,那么这个div就会相对这个父元素来进行定位。

举个栗子:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. body {
  13. background-color: yellow;
  14. }
  15. #red {
  16. width: 200px;
  17. height: 200px;
  18. background-color: red;
  19. }
  20. #blue {
  21. width: 100px;
  22. height: 100px;
  23. background-color: blue;
  24. position: absolute;
  25. right: 100px;
  26. top: 100px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="red">
  32. <div id="blue"></div>
  33. </div>
  34. </body>
  35. </html>


我们发现蓝色div虽然是红色div的子级元素,却并没有在红色div的内部,而是在加上position:absolute属性后直接相对body元素定位到了右侧。因为绝对定位 absolute的参照物是父级的非static定位,由于没有给红色的方块设置定位,默认是static,所以绿色方块已body作为了参照物。

那么试着在红色div的CSS内加上position:relative;

  1. #red{
  2. width: 400px;
  3. height: 400px;
  4. background-color: red;
  5. position: relative;
  6. }

我们发现,当蓝色div的父级红色div内加上position:relative;后,蓝色div变成相对于红色div定位了。

从这里我们可以看出,当一个元素设置了position:absolute属性之后,而它的父级元素的属性为position:relative时,它不再是相对于文档定位,而是相对于父元素定位。最重要的是,父元素设置为position:relative并不会脱离文档流,也就是说利用给父元素设置position:relative属性,再将子元素设置为position:absolute就可以在文档流中实现需要的定位,这是一种常见的方法。

4. 固定定位 fixed

固定定位是最好理解的,它相对于浏览器的窗口进行定位并脱离文档流,即使拖动滚动条,元素的位置也是不变的,我们使用浏览器时一些广告的效果就是这样的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. body {
  13. background-color: yellow;
  14. }
  15. .red {
  16. width: 200px;
  17. height: 200px;
  18. background-color: red;
  19. margin-bottom: 10px;
  20. }
  21. .gotop {
  22. font-size: 14px;
  23. width: 60px;
  24. height: 60px;
  25. text-align: center;
  26. line-height: 60px;
  27. padding: 10px;
  28. background-color: #302c2c;
  29. position: fixed;
  30. right: 20px;
  31. bottom: 20px;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="red"></div>
  37. <div class="red"></div>
  38. <div class="red"></div>
  39. <div class="red"></div>
  40. <div class="gotop">返回顶部</div>
  41. </body>
  42. </html>

返回顶部按钮,他会始终在页面的右下角显示,不论滚动几屏幕,参照浏览器进行固定定位

总结:

position:relative; 不脱离文档流,相对于元素原来的位置进行定位。

position:absolute;脱离文档流,如果所有的父级元素都没有position属性,相对于body定位;如果存在父级元素有position属性,相对于最近的那个有position属性的父级元素进行定位。

position:fixed;脱离文档流,相对于浏览器窗口定位。

附:使用定位实现元素在盒子中垂直水平居中

  1. 方法一:通过绝对定位的方式 absolute + 负margin

思路:
给父元素相对定位 给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. #red {
  13. width: 200px;
  14. height: 200px;
  15. background-color: red;
  16. position: relative;
  17. }
  18. #blue {
  19. width: 100px;
  20. height: 100px;
  21. background-color: blue;
  22. position: absolute;
  23. left: 50%;
  24. top: 50%;
  25. margin-left: -50px;
  26. margin-top: -50px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="red">
  32. <div id="blue"></div>
  33. </div>
  34. </body>
  35. </html>
  1. 方法二:通过绝对定位的方式 absolute + margin auto

可用于宽高未知情况
这个是需要将各个方向的距离都设0,再将margin设为auto;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. #red {
  13. width: 200px;
  14. height: 200px;
  15. background-color: red;
  16. position: relative;
  17. }
  18. #blue {
  19. width: 100px;
  20. height: 100px;
  21. background-color: blue;
  22. position: absolute;
  23. left: 0;
  24. right: 0;
  25. top: 0;
  26. bottom: 0;
  27. margin: auto;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="red">
  33. <div id="blue"></div>
  34. </div>
  35. </body>
  36. </html>

总结首先了解下,margin的auto属性的作用是用来分配剩余空间,所以对于有剩余空间的元素才有效哦(块及元素)。比如图片设置margin: 0 auto是无效的,因为图片是内联元素,不是占一整行,没有剩余空间。

1.块及元素水平方向居中:

原理:两侧auto,则平分剩余空间,相当于水平居中。

以上方法只能实现水平方向,对于垂直方向是无效的,因为垂直方向没有剩余空间,这点不再解释了。

2.想要实现垂直方向的居中可以用绝对定位。

  1. div {
  2. background: #FF0000;
  3. width: 200px;
  4. height: 200px;
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. right: 0;
  9. bottom: 0;
  10. margin: auto;
  11. }

margin: auto; 是关键,没有设置此项,也不会水平垂直居中哦。

解释下原理:

1.在普通内容流中,margin:auto的效果等同于margin-top:0;margin-bottom:0。

2.position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块块将填充其父元素的所有可用空间,所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto,即可实现垂直居中。(注意高度得设置)。

阿里图标

教你如何使用阿里字体图标方法详解

字体图标


图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的”http请求”,这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新”宠幸”啦。。 这就是字体图标(iconfont).


字体图标优点

字体图标的好处:字体图标是矢量的,可以无限放大不模糊,可以通过改变字体颜色color来改变图标颜色,再也不用做图片雪碧图了,换图标的话,如果保持名字和编码不变的话,就不用更改css或者类名,有这几个好处就有足够的理由来使用字体图标库了


可以做出跟图片一样可以做的事情,改变透明度、旋转度,等..

但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…

本身体积更小,但携带的信息并没有削减。

几乎支持所有的浏览器

移动端设备必备良药…


字体图标使用流程

阿里图标官方地址:http://iconfont.cn/

一、登录注册(只支持Github、新浪微博登录)

二、注册后,可以先浏览图标,添加到购物车

可以去相关的图标库里头,搜图标,然后右键添加到购物车里头。如图购物车会多一个图标。

三、点击购物车,如图步骤,就可以添加到项目中了。

四、按照如上步骤新增完之后,将图标下载到本地

下载后的文件目录

使用方式

Unicode 引用

Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face
  1. @font-face {
  2. font-family: 'iconfont';
  3. src: url('iconfont.eot');
  4. src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  5. url('iconfont.woff2') format('woff2'),
  6. url('iconfont.woff') format('woff'),
  7. url('iconfont.ttf') format('truetype'),
  8. url('iconfont.svg#iconfont') format('svg');
  9. }
第二步:定义使用 iconfont 的样式
  1. .iconfont {
  2. font-family: "iconfont" !important;
  3. font-size: 16px;
  4. font-style: normal;
  5. -webkit-font-smoothing: antialiased;
  6. -moz-osx-font-smoothing: grayscale;
  7. }
第三步:挑选相应图标并获取字体编码,应用于页面
  1. <span class="iconfont">&#x33;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看,默认是 “iconfont”。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. @font-face {
  9. font-family: 'iconfont';
  10. src: url('font_icon/iconfont.eot');
  11. src: url('font_icon/iconfont.eot?#iefix') format('embedded-opentype'), url('font_icon/iconfont.woff2') format('woff2'), url('font_icon/iconfont.woff') format('woff'), url('font_icon/iconfont.ttf') format('truetype'), url('font_icon/iconfont.svg#iconfont') format('svg');
  12. }
  13. .iconfont {
  14. font-family: "iconfont" !important;
  15. font-size: 16px;
  16. font-style: normal;
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. }
  20. .QRcode {
  21. font-size: 300px;
  22. color: red;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <span class="iconfont QRcode">&#xe704;</span>
  28. </body>
  29. </html>

font-class 引用

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:
  1. <link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
  1. <span class="iconfont icon-xxx"></span>

“ iconfont” 是你项目下的 font-family。可以通过编辑项目查看,默认是 “iconfont”。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="./font_icon/iconfont.css">
  8. </head>
  9. <body>
  10. <span class="iconfont icon-all"></span>
  11. <span class="iconfont icon-QRcode"></span>
  12. </body>
  13. </html>

常用单位

1.px

px就是 pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率;

2.em

参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,

整个页面内1em不是一个固定的值;

字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,

我们可以计算下: class为id1的div字体大小继承自父元素body:

16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:

24px1.5em = 36px class为id3的div字体大小继承自父元素id2:36px1.5em = 54px

3.rem

rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只

修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

4. vh和vw


vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度,1vw等于1/100

的视口宽度,比如:浏览器高度900px,宽度为750px,

1vh=900px/100=9px,1vw = 750px/100=7.5px;很容易实现与同屏幕等高的框。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:如此优秀,不忍点评,换一个喷

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论