任务十-浮动和定位

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

答：文档流是文档在排列的时候所占据的位置，将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。脱离文档流即表示元素不在应该的那个位置了。采用浮动布局时候的float，以及定位中position:fixed/absolute;都可以使元素脱离文档流。

2.有几种定位方式，分别是如何实现定位的，使用场景如何？

3.absolute, relative, fixed偏移的参考点分别是什么？

答：position属性有以下四个较为常用的值，可以实现不同的定位方式：

• static-默认值 没有设置定位 元素会正常出现在文档流中。

• relative-相对定位，元素不会脱离文档流，相对自己原来的位置移动。

  
  
  

  relative

• absolute-绝对定位，元素会脱离文档流，相对于父容器进行移动（父元素没有定位的元素则逐级向上查找）。

  
  
  

  absolute

• fixed-绝对定位，根据浏览器视窗来定位。一般用于小聊天窗口，固定位置的广告等等。

  
  
  

  fixed

4.z-index 有什么作用? 如何使用?

答：z-index 是设置元素的层叠顺序，数值越大在上面。

z-index就是网页的z轴,当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。

z-index

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

答：把Margin的值设置为负数，当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,而对position:relative的元素设置top、left后元素还占据原来位置。元素不会脱离文档流。

6.如何让一个固定宽高的元素在页面上垂直水平居中?

答：

垂直居中一般利用绝对定位中的负边距实现，首先用absolute把元素设置为绝对定位，再将top和left为50%，再对元素设置其自身高度、长度一般的负边距，使元素中心移动到父元素中心，实现居中对齐。

Paste_Image.png

7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

答：浮动元素是脱离文档流的。如果碰到另一个浮动元素或者边框才会停止浮动。如果碰到文字文字会围绕在浮动元素周围并且下一个普通的元素会占据浮动元素之前的位置。

浮动

8.清除浮动指什么? 如何清除浮动?

答：一般来说如果我们不给父容器定义宽度，它会被包含的元素自动撑开。但如果元素变成浮动元素了，容器不会被撑开。所以这时候要清除浮动。

1、背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

使用以下语句清除浮动：
clear:right（右边不允许浮动）/left（左边不允许浮动）/both（两边都不允许浮动）

---

本文版权归本人和饥人谷所有，转载请注明来源。