一、元素类型与转换
1.1元素类型
元素类型包括块元素、行内元素、内联块元素
1.块元素：可以设置宽高大小、默认为100%，并且独占一行。例如：p,ul,li,h1,div,form,table等。
2.行内元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行。例如：i,b,span,a
3.内联块元素: 既能设置宽高大小，又能排在一块显示。例如：img、input
补充：居中：行内元素在文本居中时，都会跟着居中。text-align:center;
块元素 margin:auto
1.2 元素类型转换----- display属性
display: block 块元素
inline 行内元素
inline-block 内联块元素
例如：div本身为块元素
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
将div转换为行内元素后：display:inline
将div转换为内联块元素后：display:inline-block
二、定位
2.1 css中有三种基本的定位机制：普通文档流、浮动和定位。
除非特殊说明，否则所有HTML元素都在普通文档流中定位。块级元素从上到下一个接着一个排列，行内元素在一行中排列。
2.2 使用定位元素（position）可以选择4种不同类型的定位，这会影响元素的显示位置。定位元素可取：static(静态定位)、relative(相对定位)、absolute(绝对定位)和fixed(固定定位)
2.2.1 静态定位（static）
- 静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置。
- 块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中。
3.在静态定位方式中，无法通过位置偏移属性(top、bottom、left或right)来改变元素的位置。
2.2.2 相对定位（relative）
相对定位相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素位置。
注意：元素仍然占据原来未移动的位置，该元素移动后会覆盖其他的框元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
bottom: 50px;
left: 20px;
}
.div3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
2.2.3 绝对定位
绝对定位是脱离文档流的，不占据原来未移动的位置。绝对定位是相对于父级元素或更高的祖先元素中有relative（相对）定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中每有设置relative的，则默认相对body进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
.div-outer {
width: 50%;
position: relative;
bottom: -100px;
margin: auto;
border: black 1px solid;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div3 {
width: 100px;
height: 100px;
background-color: aqua;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 30px;
}
</style>
</head>
<body>
<div class="div-outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
2.2.4 固定定位（fixed）
固定定位是绝对定位的一种特殊形式，是以浏览器窗口作为参照物来定义网页元素。
当对元素设置固定定位后，该元素将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。元素始终会显示在浏览器窗口的固定位置。
2.2.5 定位元素的层叠次序
当多个块元素脱离普通文档流后就形成多个层。没有进行层叠次序时，在HTML源文件靠下面添加的层，其位置越靠上，即显示在浏览器的最前面。
使用z-index可以改变层叠次序：
1.z-index属性值大的元素放置在前面
2.z--index 仅能够在绝对定位元素上使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
div{
position: absolute;
width: 100px;
height: 100px;
}
.div1{
background-color: red;
}
.div2{
background-color: blue;
top: 20px;
left: 20px;
}
.div3{
background-color: #00FFFF;
top: 40px;
left: 40px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
添加z-index后
三、浮动
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。
浮动可用浮动元素：float
3.1 浮动三种情况
情况一：三个框都左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
div{
width: 100px;
height: 100px;
}
.div-outer{
width: 300px;
height: 400px;
border: 2px black solid;
}
.div1{
background-color: red;
float: left;
}
.div2{
background-color: blue;
float: left;
}
.div3{
background-color: #00FFFF;
float: left;
}
</style>
</head>
<body><div class="div-outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
情况二：父框宽度不够
将.div-outer中的width改为250px
情况三：框下浮动
将.div1中的height改为250px;
3.2 清除浮动
浮动会与其它元素发生重叠，但不会和文字、图片发生重叠。
清除浮动：
方法一：overflow:auto
方法二：clear:left/right/both
给3清除浮动：
四、溢出和剪切
在盒子模型中代表块元素的矩阵对象，可以通过css样式来定义内容区域的高度和宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display练习</title>
<style>
div{
width: 100px;
height: 100px;
}
.div1{
position: relative;
background-color: red;
overflow: hidden;
}
.div2{
position: absolute;
background-color: blue;
top: 50px;
left: 40px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
未使用overflow: hidden;时：
使用overflow: hidden;时：
注意：只有父元素设置为relative时，子元素设置为absolute时有用。
五、对象的隐藏和显示
对于块状对象可以设置显示或隐藏。
方法一：visibility属性
visibility:visible}hidden
visible:对象可见
hidden: 对象不可见，但隐藏的元素仍需占据与未隐藏之前一样的空间。也就是数，该元素虽然被隐藏了，但仍会影响布局。
方法二：display属性
display:none表示隐藏某个元素，并且元素不会占据原来的空间。
没有添加属性时：
添加visibility: hidden;后:
添加display:none后：
