CSS 显示、定位、布局、浮动
一、CSS 显示：
CSS display属性设置元素应如何显示；CSS visibility属性指定元素应可见还是隐藏。隐藏元素可以通过display属性设置为“none”，也可以通过visibility属性设置为“hidden”。两者的区别：visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，即该元素虽然被隐藏，但仍然会影响布局；display：none可以隐藏某个元素，且隐藏的元素不占用任何空间。
CSS display-块和内联元素：块元素是一个元素，占用全部宽度，在前后都是换行符；内联元素只需必要的宽度，不强制换行。示例：
<style>
p {display:inline;}
</style>
<style>
span
{
display:block;
}
</style>
<style>
table, th, td {
border: 1px solid black;
}
tr.collapse {
visibility: collapse;
}
</style>
二、CSS 定位：
CSS position（定位）属性指定元素的定位类型。position竖向的五个值：static、relative、fixed、absolute、sticky。元素可以使用顶部、底部、左侧、右侧属性定位，但需先设定position属性。
1）、static定位：
HTML元素的默认值是没有定位，遵循正常的文档流对象。静态定位的元素不会受到top、bottom、left、right影响。示例：
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
2）、fixed定位：
Fixed定位：元素的位置相对于浏览器窗口是固定位置，即窗口是滚动的，元素是不会移动的。示例：
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
3）、relative定位：
relative定位元素的定位是相对其正常的位置。移动相对定位元素，但他原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。示例：
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
4）、absolute定位：
absolute定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那它的位置相对于<html>。示例：
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
absolute定位使元素的位置与文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。
5）、sticky定位：
sticky定位未粘性定位，基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。示例：
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
所有CSS定位属性：
| 属性 | 说明 | 值 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto |
| clip | 剪辑一个绝对定位的元素 | shape |
| cursor | 显示光标移动到指定的类型 | url |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 | auto |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 | auto |
| position | 指定元素的定位类型 | absolute |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto |
| z-index | 设置元素的堆叠顺序 | number |
三、CSS 布局：
CSS布局（overflow）属性用于控制内容溢出元素框时显示的方式。CSS overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性只工作于指定高度的块元素上。overflow属性有以下值：
四、CSS 浮动：
CSS 的float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动）往往用于图像。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边边缘碰到包含框或者另一个浮动框的边框为止。
如果把几个浮动的元素放在一起，如果有空间的话，他们将彼此相邻，示例：
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。Clear属性指定元素两侧不能出现浮动元素。
CSS中所有的浮动属性：
