CSS简单小结（二）

CSS内容有点多，一个还总结不完哈哈哈
接着来！

绝对定位：
属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了
也就是排版上该元素会出现在特定的位置，并且把原有的位置让个下一个元素。
另外，一个元素如果绝对定位了，那么他的绝对位置是相对于其父容器而言的。
如果定位后的元素与其他元素重叠了,可以设置z-index=1或-1，该属性值越大就放在顶层。
相对定位
属性：position
值：relative
相对定位则不会让出位置，而是在原元素的基础上移动距离。
浮动
属性：float
值： left,right
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
1.文字向右浮动
浮动后，原来的“坑”就让出来了
并且是在原来的高度的基础上，向右浮动
2.文字向左浮动
首先，向左浮动后，会把“坑”让出来，这个时候"正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
3.图片浮动
设置图片左浮动效果可以呈现文字环绕图片效果
4.禁止浮动效果
属性:clear
值: left right both none
通过给图片属性赋值可以实现禁止浮动效果
5.通过给div标签内赋予浮动效果可以让其实现水平排列功能并且会自动换行
6.通过设置相邻元素中前一个元素的左浮动可以使两个元素并排排列，如果设置了宽度并且给后一个元素设置属性：overflow:hidden（即为溢出部分自动隐藏）的话就会实现左边固定宽度，右边元素自动填满的效果。

元素的显示：
1.display:none; 使得被选择的元素隐藏，并且不占用原来的位置
2.display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
3.display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
4.内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 display:inline-block（我全都要）
5.还有一些其他的显示方式对应属性：
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格

居中：
内容居中：直接在标签中设置属性 align=“center”/设置style="text-align:center"实现居中
元素居中：div的居中可以设置宽度然后设置margin:0 auto 来实现居中
span是内联元素，无法设置宽度，但可以让在div中然后设置div的 style="text-align:center"来实现居中
如果只有一行文本又想设置其单独垂直居中，可用line-height属性设置。
图片居中：把图片放入div中，设置div属性display:table-cell（使该div显示为一个单元格，再利用单元格垂直居中属性：vertical-align:middle来实现图片居中）
左右固定中间自适应的布局：通过设置左右两边固定宽度及左右浮动，再设置第三个元素的margin或者设置overflow:hidden以实现效果
元素贴在下方：设置两个div，父div设置相对定位（设置相对定位该div就占住了这个位置），子div设置绝对定位并设置bottom:0从而实现子div一直贴在父div下方的效果

span元素之间存在空格可以通过设置style中的float属性左浮动来实现消除空格的效果。但span元素结束后要加上一个
div style=“clear:both” 来清除这个浮动效果。

img的裁剪图片属性：
clip:rect(xxpx xxpx xxpx xxpx)
再将图片移动从而实现裁剪效果
其中属性参数clip:rect(上，右，下，左)；
上：从上往下截，去掉上截图。
右：从左往右截，去掉右截图
下：从上往下截，去掉下截图
左：从左往右截，去掉左截图
(所有的都是去掉对应方位的截图。
上、下都是从上往下截，
左、右都是从左往右截)