引入
Day 2
系统学习一下网页开发的基本知识，查缺补漏。
在此贴出需要注意的知识点，方便查阅。
知识点
完整链接css
<link rel="stylesheet" type="text/css" href="xxx.css" />
布局属性 display
首先，元素可以分为块级、内联、内联块级三类
块级元素的特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
块级元素中最具代表性的就是<div>，此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~<h6>等
内联元素特点：
行内元素中最常用的是<span>，此外还有<b>、<i>、<u>、<li>等等
1、和其他元素都在一行上
2、元素的高度、宽度及顶部和底部边距不可设置。
3、元素的宽度就是它包含的文字或图片的宽度，不可改变（可以用padding调节左右）。
inline-block 元素特点：
内联块级元素常见的有<img>、<input>标签
1、和其他元素都在一行上, 这一行溢出换新一行（类似于block的特性）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
display属性还可以使用list-item：和block差不多，但是会附有列表项标记
或者使用none: 不显示元素
相对长度单位em
em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。
比如给该元素设定font-size: 16px; padding: 1em;
最终会得到一个值为16px的padding渲染值。
重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。
可以利用这个特性，改变字体大小来实现元素的缩放
当font-size使用em作为单位时，会从继承得到的字体大小来进行新的计算。（比如从<body>处继承)
注意：带有em值的属性在元素中嵌套出现时，可能会导致套娃缩小（因为每一层都会计算一次新的em值）
可以用这种方式来修正为相同大小，但是总归是会比较复杂
ul { font-size: .8em; }
ul ul { 1 font-size: 1em; 1 }
所以，建议font-size属性远离em
其他可能用到的相对长度单位
rem
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素 （根元素指的是整个文档的根元素，比如HTML中html元素）
vh vw
vw: viewpoint width, 相对于浏览器窗口的宽度，1vw=视窗宽度的1%
vh: viewpoint height, 相对于浏览器窗口的高度，1vh=视窗高度的1%
%
父元素长或宽的百分比
font-family 字体系列
该属性指定字体系列名称的优先级顺序（即排在前面的若不可用，则用后面的依次替代）
line-height
顾名思义指一行文字的高度。具体来说是指两行文字间基线（下图红线）之间的距离。
vertical-align属性（对内联元素）中有top、middle、baseline、bottom就和下图四条线相对应。
所以当（内联)元素只有一行时可以轻松将容器的line-height设为容器高度来实现垂直居中
但是要注意元素超过一行时，需要更多处理，如下
父元素依然是line-height=height
子元素首先将继承得到的line-height置为normal
再设置为内联块级元素，最后设置垂直对齐vertical-align针对中线middle对齐即可
#father {
height:200px;
line-height:200px;
}
#son {
line-height:normal;
display: inline-block;
vertical-align: middle;
}
span标签
span标签并没有特殊的意义，就像div标签一样，可以作为一种无意义的容器
但是span和div的唯一区别在于，div是块元素（会强制换行），span则是内联元素
所以span常常用于修改一段文本中部分文字的样式
样式的优先级
在css文件中的优先级(递增）
- 类型选择器（例如，
h1）和伪元素（例如，::before） - 类选择器 (例如，
.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover） - ID 选择器（例如，
#example）。 - 使用
!important(尽量少用)
其他优先级
内联样式 > 内部样式表 > 外部样式表
总之，就近原则
引入多个样式表
- 使用多个
link标签 style标签内使用@import "style.css"/@import url(style.css)
方式1在HTML中链接了样式表，所以会在装载页面主体部分之前装载css文件这样加载出来的页面从一开始就是带有样式效果的。
方式2会在整个页面装载完成之后再装载css文件，如果页面文件的体积比较大，则会出现先现实无样式的页面，闪烁一下之后再出现设置样式的情况。
最好的处理方式：
可以写一个主样式style.css作为"目录"用link标签链接，
在这个主样式文件中把其他样式import进去。
