目录
一，元素显示模式
1，块级元素：
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，块级元素的特点：
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
- 文字类的元素不能使用块级元素，如p标签主要用于存放文字，因此p里面不能放块级元素，特别不能放div，同理h1~h6也不能放其他块级元素。
2，行内元素：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
- 链接里面不能再放链接，a可以放块级元素
3，行内块元素：
在行内元素中有几个特殊的标签——<img>、<input>、<td>，他们同时具有块元素和行内元素的特点。行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素的特点）
4，元素转换模式：
特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。
- 转换为块级元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块元素：display:inline-block;
二，CSS三大特性——继承性，层叠性，优先级
1，继承性
我们css中的继承就可以定义为特定的css属性向下传递到子孙元素。这其实也很好理解，就是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
2，层叠行
一：层叠性指的是样式的优先级，当产生冲突时以优先级高的为准。
（1）开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
（2）id选择器>（伪）类选择器>标签选择器
（3）权重相同时取后面定义的样式
二：CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
三：层叠性指的是上级标签的样式会自动继承到其所有下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。
3，优先级
1，选择器样式
- 标记选择器（如：body,div,p,ul,li）
- id选择器（如：id="name",id="name_txt"）
- 类选择器（如：class="name",class="name_txt"）
- 后代选择器（如：#head .nav ul li 从父集到子孙集的选择器）
- 子元素选择器（如：div>p ,带大于号>）
- 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
2，权重的计算
- 第一等级：代表内联样式，如style=“”，权值为1000
- 第二等级：代表ID选择器，如#content，权值为100
- 第三等级：代表类，伪类和属性选择器，如.content，权值为10
- 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中， 所以他们的权值为0
三，清除浮动
1，父盒子设置固定高度
2，内墙法清除浮动，在浮动元素的后面加一个空的块级元素(通常是div),设置该元素clear:both；属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.clearfix{
clear: both;//当我们添加clear属性后，该元素margin属性会自动失效。
}
</style>
</head>
<body>
<div class="father">
<div class="child">child</div>
<div class="clearfix"></div>
</div>
</body>
</html>3，伪元素清除浮动（与隔墙法相似）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">child</div>
</div>
</body>
</html>4，overflown：hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.father{
overflow: hidden;
border: 1px solid red;
}
.child{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">child</div>
</div>
</body>
</html>
