任务10

2016-08-02 本文已影响0人墨灯

文档流的概念指什么？有哪种方式可以让元素脱离文档流?

文档流：将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。
浮动和绝对定位可以让元素脱离文档流，区别如下:
元素浮动之后，会跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，相当于没有脱离文本流（文档流是相对于盒子模型讲的，文本流是相对于文章段落讲的）。more
但是绝对定位后，元素不仅会脱离文档流，文字也会出文本流，后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会再环绕。

<style type="text/css">
    .big{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }
    .small{
        width: 50px;
        height: 50px;   
    }
    .one{
        float: right;
        border: 5px solid red;
    }
    .two{
        position: absolute;
        border: 5px solid blue;
    }
    </style>
</head>
<body>
    <div class="big">
        <div class="small one"></div>
        <div class="small two"></div>
        <p class=" ">
            充满鲜花.....最耀眼的瞬间。
        </p>
    </div>
</body>

效果对比图

有几种定位方式，分别是如何实现定位的，使用场景如何？偏移的参考点分别是什么？
- relative不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域，移动后它覆盖其它框。参考点为本身原来所处的位置进行偏移。
- absolute脱离文档流的布局，遗留下来的空间由后面的元素填充，参考点为距离最近的祖先元素，如果都没有那么相对于body。

<style type="text/css">
    .grandfather{
        width: 300px;
        height: 300px;
        border: 1px solid;
        position: relative;
        top: 50px;
        left: 100px;
}
    .father{
        width: 200px;
        height: 200px;
        border: 1px solid;
        /*position: relative;*/
        top: 50px;
        left: 100px;
    }
    .son1{
        width: 50px;
        height: 50px;
        position: relative;
        top: 30px;
        left: 50px;
        background-color: green;
    }
    .son2{
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        position: absolute;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son1"></div>
            <div class="son2"></div>
        </div>
    </div>
</body>```
![红色框现在参考点为grandfather](https://img.haomeiwen.com/i2150964/7cc866a7ecd53ba3.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   * `fixed`可通过 "left"、"top"、"right" 以及"bottom" 属性来规定元素的位置。参考点为浏览器窗口，不论窗口滚动与否，元素都会留在那个位置。
应用场景：登陆框；页面弹窗广告，底部导航，回到顶部等。

3. z-index 有什么作用? 如何使用?
![z-index](https://img.haomeiwen.com/i2150964/d0ac07ddbaf554ef.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果

.one{z-index: 2;}
. two{z-index: 0;}
.three{z-index: 1;}```
![加入z-index](https://img.haomeiwen.com/i2150964/6ae04274c7fe2bbf.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. `position:relative`和负margin都可以使元素位置发生偏移，二者有什么区别？
  * `position:relative`只改变了位置，所占空间位置和大小没有改变，因此不会影响它结构下的元素。好比灵魂出窍，肉身还在，且还活着。
  * 而负margin通过改变本身占据空间的大小来改变位置，会影响位于它结构下的元素。这是一种自杀式的，偏移后真身直接被高效处理了，看到的不是灵魂是鬼魂。

偏移前

偏移代码

.one{top: -20px;}
.two{margin-top: -20px; }```
![偏移后](https://img.haomeiwen.com/i2150964/0325829e265590b1.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5. 如何让一个固定宽高的元素在页面上垂直水平居中?
父元素设置`position: relative`，目标元素为`position: absolute`。设置`top:50%;left: 50%;`、再设置`margin-top、margin-left `为负值，绝对值得大小是本身高度和宽度值的一半。

.outer{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid;
position: relative;
}
.one{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
background-color: red;
}```

垂直水平居中

浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
元素浮动后，会脱离文档流，不再占据空间。浮动的元素会覆盖普通元素，但是文字会环绕它存在。

.big{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}   
.one{
    width: 100px;
    height: 130px;
    background-color: red;
    float: left;
}
.two{
    width: 200px;
    height: 120px;
    background-color: blue;
}
.three{
    width: 300px;
    height: 110px;
    background-color: green;
}

浮动元素覆盖普通元素（只有红色浮动）
如果之前有浮动，它会浮动到上一个左或右，空间不足会向下浮动。

不足时向下浮动（三个都浮动空间）

清除浮动指什么? 如何清除浮动?
清除浮动是指清除浮动元素带来的影响。比如，

    .outer{
        width: 500px;
        margin: 0 auto;
        border: 1px solid;
    }   
    .one{
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
    }
    .two{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
    .three{
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>```
![父元素没有被撑开](https://img.haomeiwen.com/i2150964/34f430a66722750e.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   - 方法1：在父元素中加入一个新元素清除浮动。
```<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <br class="c"/>    /*设置.c{clear: both}*/
    </div>
</body>```
   - 方法2：给父元素设置`overflow: hidden`或者`overflow: auto`
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
    overflow: auto; }/*或者设为hidden*/```
>  使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区据说在于一个对seo比较友好，而hidden对seo不是太友好。
   - 方法3：把父元素本身也浮动。
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
        float: left;}```
##代码
[两栏布局](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)
[三角](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)  ——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)

任务10

猜你喜欢

热点阅读