CSS基础知识汇总{主要内容：定位及特点}

一、定位
定位的分类：
◆静态定位
◆绝对定位【重点】
◆相对定位【重点】
◆固定定位
静态定位：position: static;
如果我们希望使用静态定位改变元素位置，是实现不了的。【静态定位无法改变元素位置】，因为静态定位的元素和标准流的元素默认显示方式是一样的。【静态定位元素就是标准流的元素】
绝对定位：position:absolute;
特点：
绝对定位的元素也是脱标的元素（不占位置）
使用绝对定位可以改变元素位置
如果父元素是一个标准流的元素，那么如果该父元中的子元素设置了绝对定位，那么该子元素是相对body标签左上角进行位置移动的。
如果父元素是一个除静态定位以外的其他定位元素【绝对定位的元素| 相对定位的元素 | 固定定位的元素】，那么该绝对定位的子元素是参照父元素左上角进行位置改变。
绝对定位的元素也可以实现模式转换的效果【脱标】
相对定位[自恋型元素]：position: relative;
特点：
◆相对定位的元素与父元素是否设置了定位无关
◆相对定位的元素只会相对元素本身原来的位置
◆相对定位的元素没有脱标【占位置】

相对定位的使用：
◆一般情况子绝父相： 子元素设置绝对定位，父元素设置相对定位
固定定位： position: fixed;
特点：
◆固定定位的元素始终是以body左上角为参照设置位置。
◆固定定位的元素也是脱标的元素【不占位置】
◆可以实现模式转换的效果
二、定位层级关系
元素只有定位的元素才有层级关系。
通过z-index属性设置元素的层级。
注意： 只有定位的元素才能设置z-index属性。【只有绝对定位，相对定位，固定定位】
☞总结：
◆如果z-index值相同，那么最后的定位元素层级就会比前面定位元素的层级高。【后来居上】
◆如果z-index值不相同，那么z-index值越大，层级越高。
◆如果父元素也存在层级关系，那么我们只需要看父元素的层级即可，父元素z-index值越大，层级越高。
三、绝对定位居中
margin:0 auto; 只能让标准流的盒子居中显示
如何实现绝对定位的元素居中？

四、Logo内容移除
☞ 网页中的logo应该是a标签的背景图片
☞ 在设置网页logo的时候，最好设置文字
☞ 在网页logo中我们最好将设置的文字进行隐藏

五、css可见性（元素隐藏）
☞overflow:hidden;【将超出父元素的部分隐藏】
☞display: none; ----隐藏元素
display:block; —显示元素的
☞visibility:hidden; ---- 隐藏元素
✔区别：
display:none 隐藏元素后不占位置
visibility:hidden；隐藏元素后占位置

六、vertical-align属性
☞ 插入图片底部默认会有3px的空白
☞ 在移动图片的时候，文字也会随着图片上下移动
☞ 由于行内块元素,有默认的属性：vertical-align:baseline;
☞ 解决图片底部3像素空白方式：
vertical-align: top| middle| bottom|
☞ 注意：
vertical-align属性只能用在行内块元素中或者table标签中。