# CSS 常用布局

# 文档流

块状元素独占一行
行内元素可以同一行显示，自左向右，如果不够会自动换行
自上而下的展示
脱离文档流：浮动和定位

# 浮动

浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

浮动使用 float 属性。
可选值：
- none：不浮动
- left：向左浮动
- right：向右浮动

# 浮动的表现形式

当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。
浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。
元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。
浮动元素默认会变为块元素，即使设置 display:inline 以后其依然是个块元素。
块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

# 浮动的影响

如果子类元素设置了浮动，而父类元素没有设置高度，或者高度比子类元素小，那么子类元素脱离了文档流，就无法把父类盒子撑开。那么整个文档的结构将受到破坏。

清除浮动的影响：
- 严格计算父类盒子高度
- 在浮动元素的最后面追加一个空的 div,设置 clear:both 即可清除浮动的影响。
- 给父类元素设置 overflow:hidden;
因为浮动会对文档流造成影响，所以能用流式布局就不要使用浮动。

补充：
1.display：inline-block 标签的换行符会被显示为空格。
2.float:right 会改变标签的前后顺序。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.header {
				width: 100%;
				height: 100px;
				background-color: green;
			}
			.content {
				width: 100%;
				/*height: 500px;*/
				background-color: pink;
			}
			/*同级要浮动，都浮动*/
			.content .aside {
				float: left;
				width: 200px;
				height: 300px;
				background-color: red;
			}
			.content .main {
				float: left;
				width: 800px;
				height: 900px;
				background-color: gray;
			}
			.footer {
				width: 100%;
				height: 100px;
				background-color: black;
			}
			/*不允许当前元素左右出现浮动元素  这样可以清除浮动的影响*/
			.clr {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="content">
			<div class="aside"></div>
			<div class="main"></div>
			<div class="clr"></div>
		</div>
		<div class="footer"></div>
	</body>
</html>

# 定位

通过 position 属性可以实现元素的定位。元素定位之后，需要通过设置 left/right 和 top/bottom 值对元素定位。

position 属性可以把一个元素放置到网页中的任何位置。
可选值：
- static（默认）
- relative
- absolute
- fixed
- sticky

# `relative` 相对定位

相对元素本身的位置定位。

每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
当开启了相对定位以后，可以使用 top、right、bottom、left 四个属性对元素进行定位。
如果不设置元素的偏移量，元素位置不会发生改变。
相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
相对定位不会改变元素原来的特性。
相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

.d1 {
	position: relative;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 200px;
	background-color: green;
}

# `absolute` 绝对定位

指使元素相对于离他最近的祖先定位元素或视口所在的 html 文档进行定位。

当开启了绝对定位以后，可以使用 top、right、bottom、left 四个属性对元素进行定位。
绝对定位会使元素完全脱离文本流。
绝对定位的块元素的宽度会被其内容撑开。
绝对定位会使行内元素变成块元素。
一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

.d1 {
	/*有绝对的事情吗？绝对的值必须有参照物*/ /*如何才能既保证父类有定位元素 而且父类不会再原来的位置偏移*/ /*子绝父相*/
	position: relative;
	left: 0;
	top: 0; /* left: 100px; top: 100px;*/
	margin-left: 100px;
	width: 400px;
	height: 400px;
	background-color: green;
}
.d11 {
	position: absolute;
	left: 100px;
	top: 100px;
	width: 150px;
	height: 150px;
	background-color: red;
}

/* 结构 */
/* <div class="d1">
	<div class="d11"></div>
</div> */

# fixed 固定定位

元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。 (相对于视口定位)

固定定位不占据原来的位置，会脱离文档流。
给元素设置固定定位之后，元素位置从浏览器左上角出发。 - 可以将行内元素转换块元素。

.zx {
	position: fixed;
	right: 100px;
	bottom: 200px;
	width: 200px;
	height: 200px;
	background-color: red;
}

/* <a class="zx" href="#">
	w shi a
</a> */

# sticky 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

#one {
	position: sticky;
	top: 10px;
}

在网页滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到网页回滚到阈值以下。

# z-index

当元素开启定位以后就可以设置 z-index 这个属性。默认是 0。
z-index 可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是 z-index 值较大的元素会显示在网页的最上层。

.box1 {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 200px;
	height: 200px;
	background-color: red;
	z-index: 9;
	/* 数值越大 层级越高 */
}

.box2 {
	position: absolute;
	left: 50px;
	top: 50px;
	width: 200px;
	height: 200px;
	background-color: orange;
	z-index: 2;
}

.box3 {
	position: absolute;
	left: 80px;
	top: 80px;
	width: 200px;
	height: 200px;
	background-color: black;
}

.inner-box {
	width: 50px;
	height: 50px;
	position: absolute;
	left: 20px;
	top: 20px;
	background-color: blue;
	z-index: 9999;
	/* 受限于父类盒子层级 */
}

/* 开启定位层级会得到提升
通过 z-index  属性 控制他们的层级 */
/* <div class="box1">

</div>
<div class="box2">
    <div class="inner-box">

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

</div> */

# 规避脱标流

经验：一般布局采用标准流，如果标准流布局实现不了用浮动。定位一般用于解决小范围的某个标签的位置。

能用标准流（没有脱标）解决就不用浮动
解决不了就考虑有浮动（页面布局类型，“不完全脱标”）
浮动解决不了用定位（小图标，完全脱标，不影响内容）

# 结束

html 和 css 基础内容基本概况完毕，当然只掌握这些内容是不够的。只要跟着老师的教程走，耐心学，三四个案例下来就可以完全掌握页面基础知识。期间对于类命名，组织规则及实现技巧，都会一一说到。

← CSS 盒子模型 JavaScript 初识 →