css浮动与三大定位

浮动：

一：定义：所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置。

二：浮动七大特性:
(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.
(2).浮动的元素会向左或向右浮动,碰到父元素边界,浮动元素,未浮动的元素才停下来.
(3).相邻浮动的块元素可以并在一行,超出父级宽度就换行.
(4).浮动让行内元素或块元素自动转化为行内块元素.
(5).浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果.
(6).父元素内整体浮动的元素无法撑开父元素,需要清除浮动.
(7).浮动元素之间没有垂直 margin 的合并.

三：清除浮动：
1.父级上增加属性 overflow：hidden
2.在最后一个子元素的后面加一个空的元素,给它样式属性 clear:both
3.伪对象选择器：

定位：

定位: 设置元素在html文档流中的位置.
相对定位:relative；元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移 .

绝对定位:absolute；生成绝对定位元素,元素脱离文档流,不占据文档流的 位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body进行定位.

固定定位:fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位.

static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性.

inherit 从父元素继承 position属性的值.

定位元素特性 :绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素.

定位元素层级 :定位元素是浮动的正常的文档流之上的,可以用 z-index 属性来设置元素的层级(absolute一起使用).

css中元素垂直居中

div套div，设置子div 的垂直居中

2.文字垂直居中

3.图片垂直居中
通配符

光标显示类型