css课程讲解3(浮动/定位/居中问题)

一.浮动(float)

1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列，先写的先排列,后写的排在后面,每个盒子都占据自己的位置.
2.浮动的概念:所谓的浮动就是指元素脱离文档流,漂浮到文档流的上方,不会占据位置。
3.浮动的特性:
(1).浮动元素有左浮动(float:left)和右浮动(float:right)两种.
(2).浮动的元素会向左或向右浮动,碰到父元素边界,浮动元素,未浮动的元素才停下来.
(3).相邻浮动的块元素可以并在一行,超出父级宽度就换行.
(4).浮动让行内元素或块元素自动转化为行内块元素.
(5).浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果.
(6).父元素内整体浮动的元素无法撑开父元素,需要清除浮动.
(7).浮动元素之间没有垂直 margin 的合并.
4.清除浮动
(1).父级上增加属性 overflow：hidden
(2).在最后一个子元素的后面加一个空的 div,给它样式属性 clear:both（不推荐）
(3).伪对象选择器:
以下的属性content必须和after以及before使用,
父元素::after,父元素before{
content:’’;
display:table;//这是一种以css布局呈现的属性设置具备表格划分的特性以及表格属性//
}

二.定位(position)

1.定位: 设置元素在html文档流中的位置.
2.相对定位:relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移 .
3.绝对定位:absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的 位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位.
4.固定定位:fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位.
5.static 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性.
6. inherit 从父元素继承 position属性的值.
7. 定位元素特性 :绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素.
8. 定位元素层级 :定位元素是浮动的正常的文档流之上的,可以用 z-index 属性来设置元素的层级(absolute一起使用).

三.css中元素对齐的方式

1.一个div在另外一个div中的垂直居中
(1)

.wrap{
		width: 400px;
		height: 400px;
		background: pink;
		margin: 50px auto;
			//以下水平对齐方式和内联块元素一并使用//
		text-align: center;
		overflow: hidden;
		//padding-top: 100px;//
	 }
.con{
		//将子元素转换成内联块元素,目的是为了设置水平居中显示//
		display: inline-block;
		width: 200px;
		height: 200px;
		background: red;
		margin-top: 100px;
	}
...........
<div class="wrap">
	<div class="con"></div>
</div>

(2).大小一样的div

.wrap1{
		width: 200px;
		height: 200px;
		background: red;
		padding: 30px;(利用padding,前提大小一样)
	}
.con1{
		width: 200px;
		height: 200px;
		background: green;
	  }
...............
<div class="wrap1">
	<div class="con1"></div>
</div>

(3)

.wrap2{
				width: 200px;
				height: 200px;
				background: deeppink;
				margin: auto;
				position: relative;
			}
.con2 {
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				//第一种设置垂直居中方式//
				//left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;//
				//第二种设置垂直居中的方式//
				left: 50%;
				top: 50%;
				//margin-left: -50px;
				margin-top: -50px;//
				margin: -50px 0px 0px -50px;
         }
................
<div class="wrap2">
	<div class="con2"></div>
</div>

2.设置图片垂直居中方式
给图片添加 vertical-align: middle;同时给父元素添加text-align: center;和 line-height

.wrap3{
				width: 400px;
				height: 400px;
				background: pink;
				/*position: relative;*/
				text-align: center;
				line-height: 400px;
			}
		img{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*设置图片垂直居中方式*/
			vertical-align: middle;
		}
....................
<div class="wrap3">
	<img src="img/InLett-logo.png" />
</div>