HTML&CSS基础学习笔记1.31-像素和相对长度 -

octopole

浏览: 71077 次
性别:
来自: 杭州

最近访客更多访客>>

wapapapapapapow

cyouakari

zhoufh

loiyil

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML&CSS基础学习笔记1.31-像素和相对长度

博客分类：

HTML

像素和相对长度

之前的笔记中，我们提到过用属性width、height来设置图片的尺寸，它们的单元都是”px（像素）”。
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。

p {
    font-size:12px;
    text-indent:2em;
}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

3、百分比

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

p{
    font-size:12px;
    line-height:130%
}

px的特点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em的特点：
1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

rem的特点：
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

看段html和css的代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title></title>
</head>
<body>
<h1>像素和相对长度</h1>
<div>青春</div>
<div>财富</div>
<div>爱情</div>
</body>
</html>

body {
    margin: 0;
}

div {
    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;

    margin-left: 20px;
    margin-bottom: 20px;

    font-size: 24px;
    font-weight: bold;

    background-color: lightgreen;
    color: RGB(0, 0, 0);
}

div + div {
    background-color: lightpink;
    margin-left: 70px;
}

div + div + div {
    background-color: brown;
    color: #FFFFFF;
    margin-left: 120px;
}

更多学习内容，就在码芽网http://www.mayacoder.com/lesson/index

查看图片附件

0
顶

0
踩

分享到：

Python新手学习基础之数据结构-列表2 添加 | C语言基础学习运算符-自增自减

2016-09-23 10:07
浏览 747
评论(1)
分类:Web前端
查看更多

1 楼 octopole 2016-09-23

2333333333

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML&CSS基础学习笔记1.31-像素和相对长度

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML&CSS基础学习笔记1.31-像素和相对长度

评论

发表评论

相关推荐

HTML&CSS基础学习笔记1.33-元素选择器

HTML&CSS基础学习笔记1.32-选择器是什么

HTML&CSS基础学习笔记1.30-颜色的表达

HTML&CSS基础学习笔记1.29-灵活地使用样式

HTML&CSS基础学习笔记1.28-给网页添加一个css样式

HTML&CSS基础学习笔记1.27-input提交数据

HTML&CSS基础学习笔记1.26-input重置表单

HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素

HTML&CSS基础学习笔记1.24-input标签的单选与多选

HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表

HTML&CSS基础学习笔记1.22-简单的注册页面

HTML&CSS基础学习笔记1.21-语义化标签

HTML&CSS基础学习笔记1.20-DIV标签2

HTML&CSS基础学习笔记1.19-DIV标签1

HTML&CSS基础学习笔记1.18-表格的边框

HTML&CSS基础学习笔记1.17-表格头部与尾部

HTML&CSS基础学习笔记1.16-单元格间距和表格主体

HTML&CSS基础学习笔记1.15-合并单元格

HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

HTML&CSS基础学习笔记1.13—无序列表

最近访客更多访客>>