10 position(定位)
1 static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

2 position: relative／absolute
relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute 绝对定位。
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

3 position:fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

4 仅使用margin属性布局绝对定位元素
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
　　图9中，使用margin属性布局相对定位元素。
　　层级关系为：
　　<div ——————————— position:relative;
　　<div—————————-没有设置为定位元素，不是参照物
　　<div———————-没有设置为定位元素，不是参照物
　　<div box1
　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
　　<div box3
　　效果图：

11 关于css的拾遗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: inline-block;
            background-color: #2459a2;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<a>111</a>
<a>222</a>
<a>333</a>

</body>
</html>

inline-block默认的空格符就是标签与标签之间的空隙造成的。

(1) 我们可以通过margin:-3px来解决，但是

1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了

2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！

(2)我们可以给几个标签加一个父级div，然后：

div{word-spacing: -5px;}　　

11.2 word-wrap & word-break:
word-wrap:

the word-wrap CSS property is used to specify whether or not the browser is allowd to
break lines within words in order to prevent overflow when an otherwise unbreakable
string is too long to fit.

The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.

word-break:

The word-break CSS property is used to specify how (or if) to break lines within words

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        .p1{
            width: 100px;
            background-color: #84a42b;
            word-wrap: break-word;
            word-break: break-all;
        }
        .p2{
            width: 100px;
            background-color: darkgoldenrod;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>


<p class="p1">hello yuan hello yuan hello yuan hello yuan hello yuan</p>

<p class="p2">helloyuanhelloyuanhelloyuanhelloyuanhelloyuanhelloyuan</p>


</body>
</html>

1.3
一旦给元素加上absolute或float就相当于给元素加上了display:block;。什么意思呢？比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。

1.4 快写

div   tab
a     tab
div.main>ul>li.c*4    tab

1.5 display:flex
1.6 响应式布局

 

用pycharm新建position.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 1500px;
            background-color: #cc3399;
        }
        .div2{
            height: 1500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

点击pycharm上面浏览器

修改position.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 1500px;
            background-color: #cc3399;
        }
        .div2{
            height: 1500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>

<a>返回顶部</a>
</body>
</html>

点击pycharm上面浏览器

修改position.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 1500px;
            background-color: #cc3399;
        }
        .div2{
            height: 1500px;
            background-color: aquamarine;
        }
        a{
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>

<a>返回顶部</a>
</body>
</html>

点击pycharm上面浏览器

修改position.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 1500px;
            background-color: #cc3399;
        }
        .div2{
            height: 1500px;
            background-color: aquamarine;
        }
        a{
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>


<div class="div1">
    <a>返回顶部</a>
</div>

<div class="div2"></div>


</body>
</html>

点击pycharm上面浏览器

用pycharm新建relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            /*position: absolute;*/
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="div2">222</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            /*position: absolute;*/
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        /*.box2{*/
            /*position: relative;*/
        /*}*/
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

 

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            /*position: absolute;*/
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            border: 3px solid green;
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            /*position: absolute;*/
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            border: 3px solid red;
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            border: 3px solid red;
            /*position: relative;*/
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            border: 3px solid red;
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            border: 3px solid red;
            position: absolute;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器

修改relative.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
        }
        .div2{
            background: green;
            width: 100px;
            height: 100px;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div3{
            background: yellow;
            width: 200px;
            height: 200px;
        }
        .box2{
            position: absolute;
        }
    </style>
</head>
<body>

<div class="div1">111</div>
<div class="box2">
    <div class="div2">222</div>
</div>
<div class="div3">333</div>

</body>
</html>

点击pycharm上面浏览器