持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情
CSS基础教程6——元素显示模式与CSS特性
块级元素
元素独占一行，宽度默认是父元素的宽度，可以设置宽高，<div>、<h>、<p>、<ul>、<li>等等。
行级元素
元素一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高，<a>、<span>、<b>、<i>、<u>、<s>等等>
行内块元素
元素一行可以显示多个，可以设置宽高，<input>、<textarea>、<button>、<select>、<img>等等。
元素显示模式转换
display：值 ；
取值可以有block(转换成块级元素)，inline-block(行内块元素)，inline(行内元素)
元素显示模式转换有什么用？
例如行级元素我们想给他设置宽高时就需要给他转为行内块级别，或者是块级元素我们想让他在同一行也需要转为行内块级别，实际转换根据需求而改变。
CSS继承性
子元素默认继承父元素样式的特点，但是有些元素不发继承某些属性，例如：<a>中color失效，<h~>中font-size会失效。
CSS层叠性
给同一个标签设置相同的样式时只会生效最后写上的样式。
CSS优先级
CSS的优先级根据：继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important 注意： !import不要给继承添加，自己有样式也会导致无法继承！！！！！
权重层叠计算
复合选择器（行内个数(1000)，id个数(100)，类个数(10)，标签个数(1)）从头比较个数一旦比较出结果就不用继续比下去，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div .one{
height: 300px;
width: 200px;
color: red;
}
div #one{
height: 300px;
width: 400px;
color: blue;
}
.two{
font-size: 18px !important;
}
#two{
font-size: 28px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在案例中div .one的权重为1+10=11，div #one的权重为1+100=101，则实际会生效的是div #one的样式，而.two的权重为10，#two的权重为100，但是由于.two中存在!important则.two的权重最高，因此实际生效的是.two的样式。
