一.Html和Css基础
1.1 Css显示Display
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
总结一下：也就是设置display:none后不占文档流的空间
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>
1.2 Css Position(定位)
position 属性指定了元素的定位类型
positionde 属性的五个值
static：html元素的默认定位，遵循正常的文档流对象
relative:相对定位元素的定位是相对其正常位置。
fixed: 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
sticky: 基于用户的滚动位置来定位
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
实例
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
1.3 Css Pverflow
Css 中overflow使用来控制一处元素框时内容的显示方式
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
1.4 Css Float(浮动)
CSS中的浮动float，回事元素向左或向右移动，其周围的元素也会被重新排列，Float往往是用于图像，但是在布局时一样非常有用
img
{
float:right;
}
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响
如果图像是右浮动，文本流将环绕在它左边
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
实例
.text_line
{
clear:both;
}
1.5 Css 组合选择器
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
div p
{
background-color:yellow;
}
div>p
{
background-color:yellow;
}
div+p
{
background-color:yellow;
}
div~p
{
background-color:yellow;
}