CSS Positioning

系统的重新认识CSS的各个属性

1 - Box Model

Paste_Image.png
**ATTENTION: **: it only works when the elements is block-level
box-sizing属性 =>取值可能性有

1. content-box 默认值，width和height只包括content
2. border-box width和height的值包括了content, padding和border
3. 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块嘛？ 现在我们想要使他们的底边在一条水平线上，但顶边依然保持阶梯状。
![example-relativ](https://img.haomeiwen.com/i2662224/73aff03d66eb43c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
想法： 父元素用max-height定义，多余部分用overflow隐藏。
![service的结构](https://img.haomeiwen.com/i2662224/85dbc11f5287ef79.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.services{
max-height: 150px;
overflow: hidden;
}

结果：

![hidden-overflow services](https://img.haomeiwen.com/i2662224/e6d306c4a6bf866c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
* overflow 默认为visible，也就是什么都不做。




          ====== ====== ⚠️ 注意 ⚠️ ====== ====== 
无论是x，y还是z轴，只要有移动的操作（left, top, z-index），首先都要定义`position`属性 => 即，定义参照物！