小白自学前端第五天——CSS

绝对定位 属性：position 值： absolute
通过指定left,top绝对定位一个元素

绝对定位是基于最近的一个定位了的父容器

如果没有定位了的父容器，它的”最近的一个定位了的父容器” 即body
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

相对定位 属性：position 值： relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离
文字向右浮动
浮动后，原来的“坑”就让出来了
并且是在原来的高度的基础上，向右浮动

当图片不浮动时，文字就会换行出现在下面
当图片浮动时，文字围绕着图片
和步骤2一样，当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果发现，尼玛，图片没走，那就只好围绕图片摆放了
当图片不浮动时，文字就会换行出现在下面
当图片浮动时，文字围绕着图片
和步骤2一样，当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果那就只好围绕图片摆放了

不允许出现浮动元素 属性:clear 值: left right both none
如果p左边出现了浮动的元素，对文字设置clear:left 即达到不允许浮动元素出现在左边的效果
水平排列div
默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
元素的display显示方式有多种，隐藏、块级、内联、内联-块级
display:none; 使得被选择的元素隐藏，并且不占用原来的位置

display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)

display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定

内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行
有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到内联-块级 inline-block

其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了
内容居中

元素居中

左侧固定，右边自动占满

line-height方式

内边距方式
借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上

table方式
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。

左右固定，中间自适应的布局

一个div始终贴在下方
首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面

块之间有空格
开发代码的时候，一般span之间有回车换行会导致之间出现空格
使用float来解决。
float使用完毕之后，记得在下面加上

用于使得后续的元素，不会和这些span重复在一起