CSS学习
我们有3种在html页面中引入样式的方式，分别为：inline，内部样式，外部样式。
1.inline:在标签内部用stlye引入样式，比如：
<head style="border: 2px solid red">hello.</head>
2.外部样式：使用<link>标签引入样式
比如：在html的<head>标签中，加入如下代码：
<link href="hello.css" type="text/css" rel="stylesheet" />
在hello.css文件中对该html的样式进行改变。
其中，link标签中的href是用来链接css文件的位置，rel是用来规定当前文档与链接文档之间的关系，type是用来规定被链接文档的 MIME 类型。
3.内部样式：<style></style>
比如：在html的<head>标签中，加入代码
<style>
header{
border:2px solid blue;
}
</style> 然后在该html中直接对header的样式改变。
在上面三种对样式的影响中，inline的优先级最高，link和style的样式受位置的影响,后面的会覆盖掉前面的。在平时的使用中，推荐利用css文件来对html中的样式进行调整。
如何利用css来调整html的样式。
假如说我们已经如上面所写的代码一样，在html中引入了hello.css文件。
创建一个叫hello的css文件，在该文件中写入：
header{ //header是元素选择器，选择器包括:ID选择器，类选择器，元素选择器etc/
//大括号内写样式属性
border:2px solid green; //冒号后是修饰该属性
}这个时候，如果我们想让footer标签和header标签都有这样一个border，那么我们可以在css中再加入一个
footer{
border:2px solid green;
} 如果我们想要多个元素里面的内容一样，这样一个一个的去写，就会很麻烦，这个时候我们可以用类的方法来改变它的样式。
在header和footer标签中分别加入一个class="hello"
然后在css文件中加入：
.hello{
border:2px solid gray;
}那么我们就可以实现在两个元素中显示相同的样式。
id选择器的使用
这个时候我们可以在div标签中加入一个id
id = 'name'
然后在css文件中写入
#name{
border:2px solid red;
}
这三种选择器之间的优先级比较：id>class>element
盒模型
每一个元素都是一个长方形的盒子，这个盒子里面有三个元素：margin（外边距），border(边框)，padding（内边距）。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
块级元素和行级元素
块级元素各占一行，是垂直方向的，可以撑满父级元素的所有空间。display:block
行级元素元素会再一条直线上，是在同一行的，只能占自己的那一小块地方。display:inline
比如如下代码：
<li> <div>hello</div> <a>qwe</a> <a href = "">首页</a> </li>
显示结果为：
hello
qwe首页
这是因为div是块级元素，而<a></a>是行级元素。
我们可以在样式中，用display修改他的属性。
位置
float：定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
position（top,left,right,bottom）：
fix。始终在屏幕的某个固定位置，广告窗口就是这个样子实现的。
static。默认。
relative。
abusolute。生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT