css

1. 浮动(float)  七大特点

(1) 浮动概念：所谓的浮动就是指元素脱离文档流，漂浮到文档流的上方，不会占据位置。

(2) 分类：

Float：left   表示左浮动

Float：right  表示右浮动

(3)浮动特性

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

(4) 清除浮动的方式::

1. 给父元素添加overflow：hidden；
2. 给浮动元素的后面添加一个空的子元素，设置这个空的元素的clear：both
3. 通过伪对象的方式进行清除浮动：：after  ：：before  注：和content一并使用；
4. 2.定位(position)

定位: 设置元素在html文档流中的位置

设置元素的定位方式之后, 要想进行位置偏移,那么就必须设置属性left,top,right,bottom

 

(1)可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：

 relative --------------生成相对定位元素，元素所占据的文档流的位置不变， 元素本身相对文档流的位置进行偏移

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

     

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

static 默认值，没有定位，元素出现在正常的文档流中，相当于 取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值

(2)定位元素特性

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

 (3)定位元素层级

定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置 元素的层级.

1. css中元素对齐的方式
2. 一个div(父元素)中嵌套了另一个div(子元素),在子元素中设置垂直居中
3. 设置文字的垂直居中
4. 设置图片的垂直居中

1. 清除浮动:

1. 给父元素添加overflow:hidden;
2. 给子元素(浮动元素)的后面加一个空的元素,并给他设置clear:both;
3. 通过伪对象的方式:after; :before和content一并使用

<style type=”text/css”>

<wrap::after,.wrap::before{

content:””;

display:table;

}

</style>