CSS Positioning
1 - Box Model
Paste_Image.png
**ATTENTION: **: it only works when the elements is block-level
box-sizing属性 =>取值可能性有
-
content-box默认值，width和height只包括content -
border-boxwidth和height的值包括了content, padding和border -
inherit继承父元素
-> Block-level 自动占据父元素宽度的100%
-> Inline-level 只占据内容所需的宽度，从左到右
可通过display属性来改变元素的level
2 - Normal Document Flow
普通文件流。即元素在没有任何CSS样式的情况下。
3 - Float Flow
Let the position of the element go very left or very right of his parent.
float: left; 将元素从“普通文件流”中取出来，（不再占位！）浮动到最左边。
float: right; ...右边
我的理解：float-flow和normal-flow的关系就像是ps中俩个不同的涂层，float-flow在normal-flow之上
4 - Clearing floats
The float element, has no-height, because it has been taken away from the normal-flow.
在一个网页中，假设网页的某一段div是float的，接下来的div我们想要恢复到普通流，我们需要 清除float
**方法一：添加空的div元素（不推荐） **
在float的元素之后加上 <div style="clear:both;"></div>或者（bootstrap中）<div class="clearfix"></div>
clear: both; // 清除所有
clear: left; // 清除float-left
clear: right; // 清除float-right
**方法二：父级div定义 overflow: auto; **
**方法三：使用CSS伪选择器:after **
假设float的元素为<div class="service">...</div>，在CSS文件中添加代码如下：
.servie:after{
content:"";
display:block;
clear:both;
}
**小结： ** 两者原理可以理解为是相同的，但更加推荐第二个，因为第一个在html文档中添加了无用的<div>
5 - Creating content columns WITH Floats
假设每个列的内容都放在一个section中，则：
section{
float: left;
width:46%;
padding:1%;
margin:1%;
}
6 - Creating content columns WIHTOUT Floats
该方法实现类似杂志中一段文字分成多列的排版：
section{
column-count: 3;
-webkit-column-count: 3;
column-gap: 50px;
-webkit-column-gap: 50px;
column-rule: 1px solid #ccc;
-webkit-column-rule: 1px solid #ccc;
text-align: justify;
}
----- ----- ----- 以上提到的float和normal-flow有用，但不适合整个网页的使用。==> position
该属性有以下这些值：static, relative, absolute,fixed,inherit ----- ----- -----
7 - position: relativ
relative相对normal-flow时自己的位置移动 ==> 建议：只用于小范围的调整（tweak），比如：
example-relativ
8 - position: absolute
position the element absolutely relative to his parent which has a position-attribute relative attached. 属性为absolute的元素相对于 离自己最近的relativ元素 进行定位。
注意：当元素被定位成absolute的时候，他在normal-flow中不再占位
举例：我们要把<h2>放到图片上面去：
添加css样式之前：
before
添加css样式：
#banner{
max-height: 300px;
overflow: hidden; // 隐藏重叠的部分
margin: 1%;
position: relative; // 为了使h2可以相对banner定位
}
#banner h2{
position: absolute; // 绝对定位
top: 30px; // 相对于banner30px
margin: 0px; // 去除h2本身的样式
width: 100%; // 占据一整行，以便于文字居中
text-align: center; // 文字居中
color: #fff;
}
9 - position: fixed
The element position is relative to the browser.
相对于浏览器窗口进行定位。
<nav> // html定义一个由ul列表组成的nav
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
ATTENTION：上面的<nav>元素一般写在html文件的最后面。 因为代码的执行顺序与html元素在网页上的前后有关（z轴方向，与z-index有关）
nav{
background: #fff;
position: fixed; // 将nav定义为fixed
top: 0px; // 相对于browser
left: 0px; // 相对于browser
width: 100%; // 占满一行
}
nav li{
list-style:none;
margin: 0 10px;
color: #fff;
float: right; // nav中的text放在本行的最右边
}
// li的属性为浮动， 这里要在li的父元素中把浮动清除掉
nav ul{
content: "";
display: block;
clear: both;
}```
###10 - z-index & Stacking order
我们在9中说过，上面的<nav>元素一般写在html文件的最后面。 因为代码的执行顺序与html元素在网页上的前后有关（z轴方向，与z-index有关）
1) 元素默认的`z-index`为`0`
2) Keep every simple, just don't give everything a "z-index" in you page
3) z-index 只被用于同级元素之间的比较，即要在同一个 Stack content中（父元素与子元素之间无法比较；不属于同一个父元素的子元素们无法比较 ...）
###11 - Clipping Context
还记得之前那个用到了relativ的三个service块嘛？ 现在我们想要使他们的底边在一条水平线上，但顶边依然保持阶梯状。
想法： 父元素用max-height定义，多余部分用overflow隐藏。
.services{
max-height: 150px;
overflow: hidden;
}
结果：
* overflow 默认为visible，也就是什么都不做。
====== ====== ⚠️ 注意 ⚠️ ====== ======
无论是x，y还是z轴，只要有移动的操作（left, top, z-index），首先都要定义`position`属性 => 即，定义参照物！
