通过css来转换块级元素和内联元素
区分这2种元素最好的方式就是看，该元素是否是独占一行，独占一样的就是块级元素，否则就是内联元素。
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>我是内联元素</span><span>我是内联元素</span>
将上面的代码存为html文件，就会看到`span`元素在一行，`div`元素就是独占一行的。
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>我是内联元素</span><span>我是内联元素</span>
<style>
div { display: inline; }
span { display: block; }
</style>将上面的代码存为html文件，就会看到div元素在一行，span元素就是独占一行的。
这个就是css的基本用法。
html文件引入css的3种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
<meta name="keywords" content="文档关键词">
<meta name="description" content="文档描述">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="main.css" media="all"> <!-- 方式1：引入外部css文件 -->
<!-- 方式2：css块 -->
<style>
h1 { font-size: 16px; color: red; }
</style>
</head>
<body>
<div class="text">命中外部css的样式</div>
<h1>totonoo</h1>
<!-- 方式3：直接写在元素上 -->
<div style="color: green;">心中的大草原</div>
</body>
</html>建main.css文件
.text {
color: #ffcc00;
}css优先级
第一原则：默认<外部引入<内联样式<行内
第二原则：内联样式 > ID 选择器 > （类选择器 = 属性选择器 = 伪类选择器） > （标签选择器 = 伪元素选择器）
伪类元素：
!important 最高
首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after
1.用于链接的几个伪类元素
:link用这个可以设置未被访问的链接的样式
:visited用这个设置已经被访问的链接的样式
:hover 用于设置将鼠标悬浮在链接上的样式
:active用于设置鼠标点击链接时到鼠标松开时的样式
:focus 用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）
position:absolute 绝对定位
position:relative 相对定位
position:fixed 固定定位
子绝父相
使用CSS重置（reset）
css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。
大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。
*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。
