CSS浮动， 定位，流体式布局简单了解

CSS的浮动

浮动分为左浮动（float: left; ）和右浮动（float: right;），浮动元素会脱离文档流

.box1{
	width: 200px;
	height: 200px;
	background: red;
	<!--元素浮动会脱离原来的文档流，后面不浮动的元素会占据这个位置-->
	float: left;		//左浮动
	flaot: right;		//右浮动
}
.box2{
	width: 250px;
	height: 200px;
	background: blue;
}

<div class="box1">box1</div>
<div class="box2">box2</div>

停止浮动元素：
1.碰到父级元素的边界会停下来，靠近边界停止
2.碰到前面的浮动元素会停止，紧跟在浮动元素之后排列
3.当上面没有浮动元素的时候不会再浮动

浮动的块元素会自动变成行内块元素，并在一行显示
.box1{
	<!--当box1网左浮动，碰到他的父级元素边界就会停下来-->
	width: 200px;
	height: 200px;
	backgroud: red;
	float: left;
}
当两个块元素都左浮动时，box2碰到前面的浮动元素box1时会停止，紧跟在box1后面排列
.box2{
	width: 200px;
	height: 200px;
	backgroud: blue;
	float: left;
}
当box4开始左浮动，碰到上面的box3它不是浮动元素，那么box4就不会再浮动
.box4{
	width: 200px;
	height: 200px;
	backgroud: pink;
	float: left;
}
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>

当父元素没有设置固定高度，子元素全部浮动的时候，脱离文档流，父级元素的高度就无法被撑开

当父元素没有设置高度，他会根据内部子元素的高度显示其高度，当子元素全部开始浮动的时候，他的高度就不再撑开
	解决方法是在父级元素内添加：overflow: hidden;
.box{
	width: 500px;
	border: 1px solid black;
	overflow: hidden;
}
.box1{
		width: 200px;
		height: 200px
		background: red;
		float: left;
}
<div class="box">
	<div class="box1"></div>
</div>

当父级元素的宽度不够显示的时候，浮动元素会换行显示

清除浮动。overflow: hidden; 也可以清除浮动
.box1{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
}
给box2使用clear: both; 清除左右两边的浮动，box2元素就不会在自动补在box1的下面，它会换行显示，之后的box3等还会紧跟在box2之后排列
.box2{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
	clear: both;
}
.box3{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
}


<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

---

定位

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

CSS的使用position属性来设置定位：

• position: relative; 相对定位：以元素本身当前位置为参考点进行偏移，不会脱离原本的文档流，占据文档流的位置

.box1{
	width: 200px;
	height: 200px;
	backgroud: red;
	position: relatice;
	<!--距离上方100px，左方100px进行偏移->
	left: 100px;
	top: 100px
}
<div calss="box1"></div1>

• position: absolute; 绝对定位。以有定位属性的父级元素为参考进行偏移，如果父级没有定位属性，那就一直向上找，直到某个祖先级有定位属性，那就以那个祖先为参考点。如果都没有，那就以body的位置为参考点进行偏移
• 会脱离文档流，不占据文档流的位置

.box1{
	width: 200px;
	height: 200px;
	backgroud: red;
	position: absolute;
	<!--以有定位属性的父级位置为参考，距离上方100px，左方100px进行偏移->
	left: 100px;
	top: 100px
}
<div calss="box1"></div1>

• position: fixed; 固定定位，以浏览器的窗口为参考进行定位，拖动滚动条也不会影响放置的位置。一般用于固定在窗口某个地方的东西

.box1{
	width: 100px;
	height: 50px;
	background: blue;
	position: fixed;
	bottom: 50px;
	right: 50px;
}

<div class="box1">返回顶部</div>

• 定位的层级关系：

定位可能会产生覆盖的情况，后面定位的元素会覆盖前面定位的元素，可以使用 z-index: xx; 来改变第一个定位元素的层级，让它显示在最上面
.box1{
	width: 200px;
	height 200px;
	background: red;
	position: relative;
	left: 100px;
	left: 100px
	z-index: 2;
}
这个时候box2元素会完全覆盖之前的box1，只显示box2元素的蓝色，可以在box1中设置z-index:2 来改变层级，让box1的红色显示在最上面
.box2{
	width: 200px;
	height 200px;
	background: blue;
	position: position;
	left: 100px;
	left: 100px
}
<div class="box1"></div>
<div class="box2></div>

简单的移动端布局了解一下

响应式布局：创建多个布局，分别对应多个屏幕分辨率的范围，当屏幕分辨率小于某个值的时候，可以使用另一套样式

特点：分别为多个屏幕分辨率定义布局，同时，在每个布局中，页面元素宽度随着窗口调整而自动匹配

响应式布局的代码：

div{
	height: 300px;
	width: 100%;
	background: red;
}
/*当浏览器窗口小于960的时候，div采用这个样式*/
@media (max-width: 960px){
	div{
		width: 50%;
		background: blue;
	}
}
/*当浏览器窗口小于480的时候，div采用这个样式*/
@media (max-width: 480px){
	div{
		width: 25%;
		background: blue;
	}
}
/*当浏览器窗口大于960px的时候，div采用此样式*/
@media (min-width: 960px){
	div{
		background: yellow;	
	}
}