文档章节

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

MayaTeacher
 MayaTeacher
发布于 2016/09/15 09:30
字数 565
阅读 13
收藏 0

像素和相对长度

前面的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

© 著作权归作者所有

MayaTeacher
粉丝 3
博文 77
码字总数 23783
作品 0
杭州
项目经理
私信 提问
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
2018/01/22
0
0
Html学习笔记总结

图片来自网络,侵删 做做笔记,防遗忘。 常见标签 html基本标签 文件标签:html、head、body 排版标签:br、p、hr、《!-- -- 》 块标签:div、span 文字标签:font、h1-h6 清单标签:ul+li...

陈文洁945
2018/01/20
0
0
docker centos7安装

个人笔记,仅供参考:docker在centos上的安装方法,推荐使用centos7系统。添加docker的yum源:vi /etc/yum.repos.d/docker.repo 内核已更新,重启服务器 查看docker版本: 安装完成!...

qq564627110
2017/12/11
0
0
HTML&CSS基础学习笔记1.30-选择器是什么

选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法。 选择器主要分为:元素标签选择器、通用选择器、类选择器、ID选择器、属性选择器、组合选择器、伪类选择器、伪元素选择器...

MayaTeacher
2016/09/20
11
1
网页设计入门必看的六点建议

虽然说对于已经会Html的人来说,学Html真的算不上什么有技术性的东西,因为那个实在是很简单,如果这个都搞不定,其他就不用提了。但是对于初次接触网络语言的人来说,那还是不容易搞定的一件...

程序员客栈
2016/06/01
47
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部