blog-CSS之浮动布局、定位布局

文档流

在学习布局之间，需要对"文档流"这个名词有一定的认识。

1.文档流的概念

文档流是指网页的所有元素按照从左至右，从上至下的排列顺序进行排列，每个元素均有自己所占的位置，不会跨界占别的元素的位置。

2.文档流的特点

(1) 元素在页面显示的顺序与在代码中出现顺序一致
(2) 块级元素独占一行，宽度默认父级的100%，高度由内容决定
(3) 行内元素与其他元素共享一行，宽高由内容决定

3.图示理解脱离文档流

对于网页的显示，就如同一本书籍，默认文档流是书籍的最后一页，称之为底层，而书籍的首页称为顶层。当一个块元素设置相应布局使其脱离文档流之后，这个元素会脱离书籍的最后一页，在书籍的倒数第二页(也可为其他页)显示。
我们也可通过z-index这个属性设置块元素具体在哪一页中显示，如100,2，-1，值越大，元素所在层级越高(也就是书籍的前面几页)

布局

一.浮动布局(float)

【作用】 让块元素在一行中显示，或者让文字在图片周围显示。
【特点】脱离文档流
              块元素宽高默认由内容决定
              原先所在位置就会被其他块元素抢占
              浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
【float取值】
float:left 向左浮动
float:right 向右浮动
float:none 不浮动
float:inherit 浮动方式继承父元素

当只有两列布局时，可通过margin-left/margin-right设置列与列之间的间隔

【代码示例：行向列表】

<style type="text/css">
		.box{
			width: 400px;
			height: 200px;
			margin: 0 auto;
		}
		.box>ul{
			/*要li列表浮动要先去除列表样式*/
			list-style: none;
		}
		.box>ul>li{
			float: left; /*设置左浮动*/
			background: pink;
			line-height: 2em;
			text-align: center;
			/*margin-right: 5px;*/
		}
		.box>ul>li>a{
			text-decoration: none;
			color: black;
			padding: 10px;
		}
	</style>
	<div class="box">
		<ul>
			<li><a href="">首页</a></li>
			<li><a href="">博客</a></li>
			<li><a href="">学院</a></li>
			<li><a href="">下载</a></li>
			<li><a href="">论坛</a></li>
		</ul>
	</div>

【代码运行结果】

【当将margin-right: 5px;的注释去掉时代码运行结果】

二.定位布局(position)

【作用】 当一个元素悬挂在其他元素之上，优先考虑定位布局
常用在模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面等
              
【position取值】

position:static
静态定位，默认值，没有脱离文档流

position:relative
相对定位，不脱离文档流，位置为当前元素原本的位置
通过改变属性top、bottom、left、right改变最终位置

position:absolute
绝对定位，脱离文档流，显示在其他元素的上方，通常与relative相对定位一起使用
其位置相对当前元素最近的父相对定位元素(即参照离它最近的父元素且是相对定位的父元素)
当没有相对定位的父元素，那么则默认是相对html、浏览器视口

position:fixed
固定定位，元素脱离文档流，参照浏览器视口(html)
即当页面随着滚动条下滑时，固定定位元素会固定在浏览器页面，不会被隐藏

position:sticky
粘滞定位，不脱离文档流，是relative 和 fixed 的结合
即，若将其元素设置top:50px时，当当前元素距离浏览器视口顶端为50px的时候，体现fixed的特点

【代码示例1：relative相对定位】

<style>
		.outer {
			background-color: #ccc;
		}
		.outer > div {
			height: 100px;
		}
		.outer > div.one {
			background-color: lightblue;
		}
		.outer > div.two {
			background-color: pink;
			/*将第二个div设置为绝对定位，并改变其位置，固定与其他div上方*/
			position: relative;
			top: 50px;
			left: 50px;
			z-index: 1;
		}
		.outer > div.three {
			background-color: teal;
			position: relative;
		}
	</style>
	<div class="outer">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>

【代码示例1运行结果】

【代码示例2：absolute绝对定位】

<style>
		.outer {
			background-color: #ccc;
			width: 800px;
			margin: 100px auto;
		}
		.outer > div:nth-child(1), 
		.outer > div:nth-child(3) {
			height: 100px;
		}
		.outer > div.one {
			background-color: lightblue;
		}
		.outer > div.two {
			background-color: pink;
			/*设置为绝对定位元素*/
			position: absolute;
			width: 800px;
			height: 50px;
		}
		.outer > div.three {
			background-color: teal;
		}
	</style>
	<div class="outer">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>

【代码示例2运行结果】

【代码示例3:fixed固定定位】

<style>
		.wrapper {
			width: 1200px;
			margin: 0 auto;
		}
		.top_nav a{
			text-decoration: none;
			color: #333;
			font-weight: bold;
		}
		.top_nav ul.nav {
			background-color: teal;
			/*将列表设置为固定定位，不随着滚动条滑动*/
			position: fixed;
			list-style: none;
		}
		.top_nav ul.nav > li {
			float: left;
			width: 100px;
			text-align: center;
		}
	</style>
	<div class="container">
		
		<div class="top_nav">
			<div class="wrapper">
			<ul class="nav">
				<li>
					<a href="#">居家生活</a>
				</li>
				<li>
					<a href="#">服饰鞋包</a>
				</li>
				<li>
					<a href="#">美食酒水</a>
				</li>
				<li>
					<a href="#">运动旅行</a>
				</li>
			</ul>
			</div>
		</div>
		<div style="height: 200px;background-color: lightblue">
		</div>
	</div>

【代码示例3运行结果】

【代码示例4:sticky粘滞定位】

<style>
		div:nth-child(3){
			background-color: pink;
			/*设置为粘滞定位*/
			position: sticky;
			top: 20px;
			width: 200px;
			right: 0;
			float: left;
		}
	</style>

	<div>one</div>
	<div>two</div>
	<div>three</div>
	<div style="height: 1000px;background-color: #ccc"></div>

【代码示例4运行结果】

此文章为作者本人原创，仅限于作者本人的学习总结记录，若有错误之处请留言提出。