前言: 看了几天HTML标签和CSS布局,我狭义的认为他们就是iOS里面的视图控件了.而且布局相对于iOS要简单一点,虽然我大iOS有AutoLayout,但是UIScrollView之类的控件写起来还是要相对复杂一点的.各有利弊,以后再边学边比较吧.(以上纯属个人看法)
-
1 css注释代码
/*注释部分*/ -
2 内联式css样式,直接写在现有的HTML标签中
从css样式代码插入的形式来看基本可以分为3种: 内联式,嵌入式和外部式三种.
内联式: css样式表就是把css代码直接写在现有的HTML标签中.<p style="color:blue">这里是蓝色</p>如果有多条css样式代码设置,可以写在一起,中间分好隔开.
<p style="color:blue;font-size:18px;font-weight:blod"> 这里是文字 </p> -
2 嵌入式css样式,写在当前的文件中
<style type = "text/css"> span{ color: blue; font-size: 12px; } </style> -
3 外部式css样式,写在一个单独的文件中
也称外联式,把css代码写在一个单独外部文件中,这个css样式文件以".css"为扩展名.在<head>内(而不是在< style>标签内) 使用<link>标签将css样式文件链接到HTML文件内,代码如下:<link href="base.css" rel="stylesheet" type="text/css"/> -
4 三种样式的优先级
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面.<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
#shijian{
color:green;
font-size:5px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>慕课网，<span>超酷的互联网</span >、IT技术免费学习平台，创新的网络一站式学习、<span id = "shijian">实践体验</span>；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
#shijian{
color:blue;
font-size:30px;
}
结论: 此时"实践体验"字体是蓝色的,因为嵌入式css样式的位置在外部式的前面了.
```
-
5 类选择器
语法: .类选择器名称{css样式代码;1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用: <span>胆小如鼠</span> <span class = "stress">胆小如鼠</span> /*设置类选择器css样式,类前面要加一个英文圆点*/ .stress{ color:red; } -
6 ID选择器
为标签设置id = "ID名称"
ID选择符的前面是"#"<style type="text/css"> #stress{ color:red; } </style> </head> <body> <h1>勇气</h1> <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> </body> -
6 类和ID选择器的区别
1. ID选择器只能在文档中使用一次.ID在一个HTML文档中,ID选择器只能使用一次,而且仅一次.而类选择器可以使用多次. 2. 可以使用类选择器词列表方法为一个元素同时设置多个样式. .stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class = "stress bigsize">三年级</span>下学期时</p> -
7 子选择器
用大于符号(>),用于选择指定标签元素的第一代子元素. .food > li {borde:1px solid red;} 代码如下: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food > li{color: blue;}/添加边框样式（粗细为1px， 颜色为红色的实线）/
.first > span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
效果图时这样的:
```
14954364402366.jpg
```
子选择器我开始没看懂,但是看到评论区有个人分析,才恍然大悟,>这个“选择指定标签元素的第一代子元素”就是让样式只作用于它的孩子，不作用与他的孙子。注意看这段代码:
<p class="first"><span>我还是一个<span>胆小如鼠</span>的小女孩</span></p>
看清了外面的span是p标签的亲儿子,而里面的span是p标签的孙子,所有,子选择器选择的是外面的span标签,所以是外面的span元素有红色边框...(说实话,技术课程搞那么多虚的概念不如大白话来的明白!)
```
-
8 包含(后代)选择器,加入空格,用于选择指定标签元素下的后辈元素.
.first span{color: red;}
与子选择器的区别: 子选择器仅是指它的直接后代,而后代选择器作用与所有后代子元素.
```HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;border: 1px solid blue;}
.food li{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
代码运行结果:
```
14954371747130.jpg
注意: 慕课给出的例子还是不太容易理解,我对代码稍稍做了修改,更能轻易的对比出包含选择器和子选择器的区.
-
9 通用选择器
使用一个(*)指定,作用是匹配html中所有标签元素{color:red;} -
10 伪类选择符
它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;}
意思就是为a标签划过的状态设置字体颜色变红.目前为止,可以兼容所有浏览器的"伪类选择符"就是a标签上使用 :hover了,比较常用的还是 a:hover 的组合
-
11 分组选择器
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符;h1,span{color:red;} /*相当于*/ h1{color:red;} span{color:red;}
示例:
```HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
.first span,#second span,.askMe span{color:green;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<span class = "askMe">批评我</span>。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
```
-
12 继承
cs的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 某种颜色应用于p标签,这里子元素为span标签.p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p>
span中的文本也被设置成了红色.但有一些css样式是不具有继承性的.比如 border:1px solid red;
-
13 特殊性
有时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一个css样式呢?p{color:red;} .first{color:green;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩</p> /*会显示绿色,浏览器会按照权值来判断使用哪种css样式,哪种权值高的就使用哪种css样式*/
权值的规则:
标签权值为1,类选择符的权值为10,ID选择符的权值最高为100.继承也有权值,但是最低(0.1)
-
14 层叠
一个元素有多个css样式,当有相同权重的样式存在时,会根据这些css样式的前后顺序来解决,处于最后面的css样式会被应用.p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> /*最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。*/
```
-
15 手动设置最高权值
使用!important手动设置某些样式的最高权值p{color:red !important;} p{color:green;} <p class = "first"> 三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</span> /*p段落中的文本会显示红色,尽管红色设置在绿色前面*/
注意: !important要写在分号的前面,即使是下面的代码(类选择器的权值高于标签),p段落的文本也会显示红色哦~
```HTML
p{color: red !important;}
.first{color: green}
<p class = "first"> 三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</span>
```
-
16 文字排版 -- 字体
为网页的文字设置字体为宋体,代码:body{font-family: "宋体";}
注意: 不要设置不常用的字体,因为如果用户本地电脑上没有安装你设置的字体,就会显示浏览器的默认字体.一般的网页喜欢设置"微软雅黑":
```CSS
body{font-family: "Microsoft Yahei";}
/*or*/
body{font-family: "微软雅黑";}
/*第一种比第二种兼容性更好一些*/
```
-
17 文字排版
/*字号、颜色:*/ body{font-size: 12px;color: #666}/*粗体:*/ p span{font-weight: bold;}/*斜体*/ p a{font-style: italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>/*下划线*/ p a{text-decoration: underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>/*删除线*/ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>删除样式</title> <style type="text/css"> .oldPrice{text-decoration: line-through;} </style> </head> <body> <p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body> </html><!--段落排版,缩进--> p{text-indent: 2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p><!--段落排版,行间距(行高)--> p{line-height: 1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p><!--中文文字间隔,字母间隔--> h1{letter-spacing: 50px;} <h1>了不起的盖茨比</h1> <!--英文单词之间的间隔--> h1{word-spacing: 50px;} <h1>welcome to China!</h1><!--段落排版,对齐--> h1{text-align: center;} <h1>了不起的盖茨比</h1> <!--居左--> h1{text-align: left;} <h1>了不起的盖茨比</h1> <!--居右--> h1{text-align: right;} <h1>了不起的盖茨比</h1> -
18 元素分类
html中的标签元素大体被分为三种不同的类型: 块状元素、内联元素(又叫行内元素)和内联块状元素.<!--常用的块状元素--> <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> <!--常用的内联元素--> <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> <!--常用的内联块状元素--> <img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
将内联元素a转换为块状元素:
a{display: block;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
将块状元素转换为内联元素:
div{display: inline;}
内联块状元素特点:
同时具有内联元素和块状元素的特点.
1、和其它元素都在一行上;
2、元素的高度、宽度、行高以及顶和低边距都可设置
将元素设置为内联块状元素:
display: inline-block;
```
<!--a
元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。如果将a元素设置为内联块状元素就可以了.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联块状元素</title>
<style type="text/css">
a{
display: inline-block;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</body>
</html>
```
* 19 盒模型的边框
```CSS
/*边框: 盒子模型的边框就是围绕着内容及补白的线,这条线可以设置它的粗细、样式和颜色*/
div{ border: 2px solid red; }
/*也可以写成这样*/
div{
border-width: 2px;
border-style: solid;
border-color: red;
}
```
```
注意:
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
```
```CSS
/*单独设置一个方向的边框*/
div{border-bottom: 1px solid red;}
/*同样可以使用下面的代码设置其他方向的边框*/
div{
border-top: 1px solid red;
border-right: 1px solid red;
border-left: 1px solid red;
}
```
* 20 盒模型的宽度和高度
```
盒模型的宽度和高度指的是填充以里的内容范围.
一个元素实际宽度(盒子的宽度) = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 有边框 + 右边界.
元素的高度同理.
```
* 21 盒模型的填充
```CSS
元素的内容和边框之间是可以设置距离的,称之为"填充",填充可分为上右下左(顺时针).
div{padding: 20px 10px 15px 30px;}
/*顺序不要搞混,可以分开写上面的代码*/
div{
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
/*如果上右下左的填充都为10px,可以这样*/
div{padding: 10px;}
/*如果上下填充一样,左右一样,可以这样*/
div{padding: 10px 20px;}
```
* 22 盒模型的边界
```CSS
/*使用边界margin来设置,边界也是可分为上右下左:*/
div{margin: 20px 10px 15px 30px;}
/*也可以分开写*/
div{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 30px;
}
/*边界都一样的*/
div{
margin: 10px;
}
/*上下一样,左右一样的*/
div{
margin: 10px 20px;
}
```
```
结论: padding和margin的区别,padding在边框里,margin在边框外
```
* 23 css布局模型
```
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
```
* 24 流动模型
```
流动是默认的网页布局模式.网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.流动布局模型具有2个比较典型的特征:
第一,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.
第二,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示.
```
* 25 浮动模型
```HTML
块状元素独占一行,如果我们想让两个块状元素并排显示,怎么办呢?答案是设置元素浮动.
默认情况下,任何元素都是不能浮动的,但是可以用CSS定义为浮动.如下代码可以实现两个div元素一行显示
div{
width: 200px;
height: 200px;
border: 2px red solid;
float: left
}
<div id = "div1"></div>
<div id = "div2"></div>
```
```
/*当然也可以设置两个元素右浮动,也可以实现一行显示*/
div{
width: 200px;
height: 200px;
border: 2px red solid;
float: right;
}
```
```css
/*设置一左一右*/
div{
width: 200px;
height: 200px;
border: 2px red solid;
}
#.div1 {float: left;}
#.div2 {float: right;}
```
* 26 层模型
```
CSS定义了一组定位(positioning)属性来支持层布局模型.
层模型有三种形式:
1. 绝对定位(position: absolute)
2. 相对定位(position: relative)
3. 固定定位(position: fixed)
```
```
层模型的绝对定位: 将元素从文档流中拖出来,然后使用left 、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口.
```
**个人总结: 相当于移动端开发的frame布局(这点大家都很懂,蜜汁微笑)**
```CSS
div{
width: 200px;
height: 200px;
border: 2px red solid;
position: absolute;
left: 100px;
top: 50px;
}
<div id = "div1"></div>
```
效果如下:
层模型的相对定位
position: relative(表示相对定位),它通过left、right、top、bottom属性确定元素
在正常文档流中的偏移位置.首先按static(float)方式生成一个元素(并且元素像层一样浮动
了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性
确定,偏移前的位置保留不动.
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
width: 200px;
height: 200px;
border: 2px red solid;
position: relative;
left: 100px;
top: 50px;
}
<div id = "div1"></div>
```
效果图:
14951876467910.jpg
/*如果加上这段代码,便能清楚的理解"偏移前的位置保留不动"了,效果图如下*/
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
14951877626489.jpg
层模型的固定定位:
注意: 如果你是移动端开发者,你可以把它理解成一个悬浮框(解释的内容可以跳开不看了),如果不明白,再去看如下解释
fixed: 表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身,由于视图本身是固定的,他不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口视图的某个位置,不会受到文档流动影响.
代码:
#div1{
width:200px;
height:200px;
border:2px red solid;
position: fixed;
bottom: 0;
right: 0;
}
<div id="div1"></div>
-
27 relative 与 Absolute组合使用
使用position: absolute 可以实现被设置元素相对于浏览器设置定位,但是可不可以相对其它元素进行定位呢?答案是可以的,使用 position: relative来帮忙,但是必须遵守下面的规范: 1. 参照定位的元素必须是相对定位元素的前辈元素(相当于iOS的父控件): <div id = "box1"> <!--参照定位元素--> <div id = "box2">相对参照元素进行定位</div> </div> 2. 参照定位的元素必须加入 position: relative; #box1{ width: 200px; height: 200px; position: relative; } 3. 定位元素加入position: absolute,便可以使用top、bottom、left、right来进行偏移定位了. #box2{ position: absolute; top: 200px; left: 30px; } 这样,box2就可以相对于父元素box1定位了(这里注意: 参照物此时就可以不是浏览器了,而可以自由设置了). 个人总结: 被定位元素想要相对于父类元素设置绝对定位,需父类元素实现 position: relative. -
28 盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果top、right、bottom、left的值相同，如下面代码： margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2、如果top和bottom值相同、left和 right的值相同，如下面代码： margin:10px 20px 10px 20px; 可缩写为: margin: 10px 20px; 3、如果left和right的值相同，如下面代码： margin:10px 20px 30px 20px; 可缩写为: margin: 10px 20px 20px; 注意：padding、border的缩写方法和margin是一致的。 -
29 字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码： body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; } 这么多行代码可以缩写为一句: body{ font: italic small-caps bold 12px/1.5em "宋体",sans-serif; } 注意: 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用： body{ font:12px/1.5em "宋体",sans-serif; } 只是有字号、行间距、中文字体、英文字体设置。 -
30 颜色值
1、英文命令颜色 p{color:red;} 2、RGB颜色 这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p{color:rgb(20%,33%,25%);} 3、十六进制颜色 这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 p{color:#00ffff;} -
31 长度值
长度单位总结一下，目前比较常用到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（也就是两个字体大小的距离）。 下面注意一个特殊情况： 但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码： html: <p>以这个<span>例子</span>为例。</p> css: p{font-size:14px} span{font-size:0.8em;} 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px） 老子的字体大小是14px,儿子的1em就是14px,没错,这很css. 3、百分比 p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
结束语:
持续挖坑中...
网友评论