溢出 元素显示
上一部分重点讲述了盒子模型，并了解了一些相关的性质，相信读者目前已经能够做出一些初级的网页了。
溢出属性
溢出
本部分首先需要了解的，是一个叫 溢出属性 的玩意，这东西的存在意义是当你的内容过多了，盒子放不下了的时候，提供一个美观的解决方法，我们用属性 overflow 来进行控制。
overflow: visible / hidden / scroll / auto / inherit;
<!-- 表示正常显示（接在盒子后面） / 隐藏溢出内容 / -->
<!-- 增加滚动条（即使没有溢出也会有） / 自动（只有超出边界才会出现滚动条） / 继承父元素的设置-->当然，如果我们只想要某一方向单独设置滚动条，那可以这样做：
overflow-x: auto;
overflow-y: hidden;
<!-- 只在x方向上自动生成滚动条，y方向上超出部分直接隐藏 -->空余空间
与上面的属性相似，这个属性是用于设置如何处理元素内的空白的，即 white-space 。
white-space: normal / nowrap / pre / pre-wrap / pre-line;
默认值(浏览器直接忽略空白地区) / 不折行，占满空白(忽视本身盒子的限制) /
预格式化文本 / 预格式化+可折行 / 预格式化+不显示空格可以提一嘴的是，pre这个玩意同时也是个标签，可以保留你在编辑器中文本的格式。
之所以要讲这个空余空间，是为了进一步实现让浏览器自动省略溢出内容的效果（即在后方加…）
我们可以这样设置：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;最后这个玩意， text-overflow 是专门应对文本溢出的属性：
text-overflow: clip / ellipsis;
表示裁切 / 省略以上，我们就达成了使浏览器自动处理溢出的文本的目的。
元素显示类型
有的读者看到这标题可能挺疑惑的，为啥还要接着讲元素的显示？
事实上，如果读者尝试的次数比较多，尝试的元素类别也比较多的话，可以发现有些玩意加属性的时候，是成功不了的，比如给一个 span标签加宽高 ，这就涉及到了我们接下来要聊一聊的元素显示相关的问题。
css中将元素分为了三类：
- 块元素
- 行内（内联）元素
- 行内块元素
咱还是，一类一类来：
块元素
所谓块元素，就是通常而言以 矩形 的形式展示在HTML中的元素，它们是可以定义自己的宽高的，同时会按照书写顺序自上而下排列。
也正因为这种元素比较规矩，所以它们一般会作为其他元素的容器。
比较典型的块元素有：
- div
- p
- ul-li
- ol-li
- dt-dd
- h(标题)
当然，我们想要辨别一个网页里面什么是块元素也比较简单，我们可以通过浏览器的 检查 功能，选中该元素，而后在它的Style属性中查看到它的所有样式，其中应该会有这么一条:
display: block;
<!-- 额外说一嘴，在ul的li中，会显示 display: list-item; -->这里还有一点要提，p标签（段落标签）中，只能放文本以及行内元素， 不能在里面嵌套块元素 。这里不进行理由的详述，读者可以自行尝试以下在p中嵌套一个块状元素会发生什么。
行内元素（内联元素）
内联元素与块元素不同，它们可以不经过浮动设置就呈现在浏览器的同一行，因为它们本身是没有自己的形状的，也正因如此，无法定义它们的宽高，它们的宽高是被内容撑起来的，包括内外边距也无法设置。
典型的行内元素有：
- a
- b
- em
- i
- span
- strong
(里面可能有些玩意读者忘了，可移步至本部分Part.1进行再次复习)
跟上边那块元素一样，这玩意在扔到浏览器里面也会默认自动加一行属性：
display: inline;行内块元素
这种玩意比较特殊，它具有行内元素和块元素两者的部分特点，它们可以设置宽高，但还是会优先在同一行内显示。
典型的行内块元素有：
- img
- input
这位，就跟之前那两位不是很一样。在img这个标签里，如果你不设置，它的element-style中啥都不写，而input（表单）标签会在它的样式里加一个：
display: inline-block;元素类型转换
这玩意如果有一定编程基础应该挺好理解的，就很类似强转嘛
有想法的读者估计又要说了，既然元素的类型是通过style设置的，我们是不是可以手动设置它的类型？
答案是肯定的。
我们可以通过在任何一个元素的style中加display属性，来实现它们元素类型的强制转化。
<!-- 再写一遍 -->
display: block / inline / inline-block这玩意有啥用呢？
我们假设一种情况，我们要做一个上边栏，里面插几个超链接，那我们如果不进行强转，直接就摁堆上去，会是种什么效果？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
height: 20px;
font-size: 18px;
background-color: aqua;
}
</style>
</head>
<body>
<a href="https://baidu.com">首页</a>
<a href="https://baidu.com">分区</a>
<a href="https://baidu.com">类别</a>
<a href="https://baidu.com">状况</a>
<a href="https://baidu.com">实际</a>
</body>
</html>咱们会发现它们挤在一个小疙瘩里面，非常的不美观。
那我们学了盒子模型了，我们就寻思要不然给他加个外边距，内边距之类的，肯定能更好看一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
height: 20px;
font-size: 18px;
display: inline-block;
padding: 5px;
background-color: aqua;
}
</style>
</head>
<body>
<a href="https://baidu.com">首页</a>
<a href="https://baidu.com">分区</a>
<a href="https://baidu.com">类别</a>
<a href="https://baidu.com">状况</a>
<a href="https://baidu.com">实际</a>
</body>
</html>读者把上面这俩都运行一下，会发现下面这个明显要好看一些。
当然，可以在对a的hover之类的属性进行编辑，在外边再套一个div之类的，这里就不细讲了。此处仅仅是为了说明元素类型强制转化的作用。
元素的隐藏
既然咱提到了display，咱就再聊一聊这东西还能干啥。
我们在有些网页里面经常看到一种效果，你把鼠标移上去的时候，它会在一侧弹出一个菜单，或者二级分类，这种效果我们其实现在能够简易的实现一下（因为咱们还没说JS，动画搞不了）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
display: none;
}
div:hover ul{
display: block;
}
</style>
</head>
<body>
<div>这是个类别
<ul>
<li>二级菜单-类别1</li>
<li>二级菜单-类别2</li>
<li>二级菜单-类别3</li>
</ul>
</div>
</body>
</html>通过 display: none; 这个属性，可以使得原本写在页面上的元素先不显示出来，而我们在对其从属的盒子加一个鼠标移动上去的效果，即 hover ，就可以简单的达成我们的目的。
二级菜单
好嘞，咱说到了 display: none; 这玩意，那我们继续扩展一下子，用这个属性搞点切实有用的菜单出来呗。
咱首先定下一个大框架：菜单的样式是横着排列的，当鼠标移上去，需要产生相应的颜色变更，此外，还需要在其下侧产生相应的二级选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
.box .item{
width: 148px;
background-color: #00f2ffa2;
border: 1px solid #00f2ffa2;
float: left;
text-align: center;
}
ul{
list-style: none;
}
.item ul{
display: none;
background-color: aliceblue;
color: black;
}
.item:hover{
background-color: #24c1caa2;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: #24c1caa2;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">Category-1
<ul>
<li class>Study Notes</li>
<li>Review</li>
<li>Blog</li>
</ul>
</li>
<li class="item">Category-2
<ul>
<li>tag1</li>
<li>tag2</li>
<li>tag3</li>
</ul>
</li>
</ul>
</body>
</html>这里其实没啥好讲的，因为用的都是之前说过的玩意，读者有遗忘的话可以善用本博客的搜索功能 （笑） 。
定位
咱继续往深了延申，我们目前已经实现了对于一个页面的二级菜单实现，但是很明显，我们搞出来的那玩意十分的不美观，它会很严重的挤压掉原先的内容（表现为直接使原先内容进行平移），这是令我们很不爽的事情。
我们当然首先想到的是将一个盒子直接摁死在页面的一个位置，在此前的内容中，我们会尝试着使用外边距 / 内边距等属性进行实现，但其实css中对于这类情况单独给定了一个属性，即 position 。
静态定位 & 相对定位
其实静态定位就是咱们之前不进行定位时达成的效果，其原则在于最大化的利用浏览器窗口空间，让一个个元素以其元素类型进行相应的位置放置。
position: static;而相对定位也比较简单，其效果为 使当前元素在相对于自己原先位置的基础上进行移动 ，其标志物是自身原先的位置。
position: relative;
<!-- 表示相对定位，常常会跟top，left等元素一并使用 -->这两种定位方式的共同点在于，它们都 不会脱离文档流 。
啥意思呢？就是虽然你的这个元素可能看上去没有显示在原先的位置，但这个位置实际上被它占据着，后方的元素不会挤占这个元素最初始的位置。
绝对定位
所谓绝对定位，就是被设置这个属性的元素，会在 父盒子有定位的基础上 在相对于其父元素的绝对位置进行显示 （如果没有父元素则为浏览器窗口的 第一屏）。
position: absolute;
<!-- 代表绝对定位 -->
top: 100px;
left: 100px;
<!-- 相对于父元素下偏100px，右偏100px -->一般而言，我们如果想要实现一个子盒子在相对于父盒子的某一个位置显示，则可以 将父盒子设置为相对定位，再将子盒子设置为绝对定位，即 “子绝父相” 。
需要明确的是，绝对定位会使得当前元素脱离文档流，即其它的元素会直接占据它原本的位置。
固定定位
固定定位，目的在于实现一个无论什么时候都显示在浏览器一个固定位置的元素。
有的人要问了，这玩意应该能用之前的绝对定位轻而易举地实现啊？
答案是否定的，我们再度会看此前绝对定位的说法：
如果没有父元素则为浏览器窗口的 第一屏
读者应该理解我在说什么了，即绝对定位只能使得我们在浏览器不进行滚动时看到固定在那个位置的元素，而当我们浏览器中内容过多，一屏放不下，需要进行滚动下滑时，原先利用绝对定位固定的元素也会跟着一块划走。这是不符合我们所需要的效果的。
因此，产生了固定定位这个玩意：
position: fixed;
<!-- 代表固定定位，后续也需要相应的位置说明，这里不再详述 -->同样的，固定定位也会使得当前元素脱离文档流。
粘性定位
粘性定位是相对而言比较新的一个玩意，这东西能使得一个元素在 滑动过它之后一直黏在窗口的某一个位置上 。
要举例的话，比如本博客的导航栏，它会在你下滑过后一直黏在上面，不随着页面滚动而消失。
position: sticky;
<!-- 代表粘性定位，后面也需要相应的位置说明 -->当然，其实吧，这种顶部粘性导航栏其实用JavaScript来做更好。 （那当然了，一个傻大框子一直摁在上面确实比较难看哈）
到这，读者可能就意识到一个关于HTML中层级显示的问题。即各种什么浮动，什么粘性显示、定位之类的玩意到底怎么判断显示方法。我们搁到下一篇博文说。
至此，我个人认为这篇博文差不多了。
这篇写的比较杂，没什么章法，烦请读者见谅。
这篇博文就到这里~
