浮动、定位

字数 1306阅读 37

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

网页按照HTML排序自上而下,自左到右的排列,块级元素横占一行,行级元素由左到右顺序排列就是文档流。
浮动、绝对定位和fixed可以脱离文档流。脱离文档流就是不会按照既定的顺序排列,会任由自己运动,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围,而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

浮动

position:absolute

position:fixed

有几种定位方式,分别是如何实现定位的,使用场景如何?

position:static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
position:relative:生成相对定位的元素,相对于自己正常位置进行定位。用于元素位置不合适需要微调的时候。

position:relative

position:absolute:绝对定位,相对于position:relative的父或祖先元素,如果没有会以body来定位元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。

position:absolute相对于其他元素的绝对定位

position:absolute相对于body的绝对定位

position:fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

absolute:以定位为relative的父或祖先元素为参考点,如果没有会以body作为参考点偏移。
relative:以自身正常位置为参考点偏移。
fixed:以浏览器窗口为参考点偏移。
参看上题图片。

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

因relative而重叠的元素,可以用z-index来决定优先级,数值大的在前面,覆盖后面的元素。上图为未设置z-index,下图为设置了z-index。

z-index

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

position:relative使元素发生偏移,虽然能够覆盖其他元素,但是只是位置发生了偏移,对于文档流没有影响,其他元素还会以为它还在那个位置。
负margin使元素位置发生偏移,也能够覆盖其他元素,但是其后的元素也会跟着它移动,会影响文档流。

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

把父元素设置成相对定位relative,子元素设置成绝对定位absolute,上偏移50%,左偏移50%,由于是点到点的偏移,所以元素会错过居中的位置,需要用上边距和左边距的负边距来回到剧中的位置,负边距的数值为被偏移元素宽高的一半。

垂直水平居中

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

浮动元素会脱离文档流,会在其他浮动后面继续浮动,由于有渲染的先后,所以有时浮动的顺序有所变化。
对于普通元素,浮动元素不会占据文档流的位置,所以普通元素会认为它不存在而继续文档流,但是块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
对于文字,文字会围绕浮动元素。

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

清除浮动是因为浮动会对正常文档流产生影响,比如文字会围绕浮动元素,为了消除这种影响,所以要清除浮动。
清除浮动方式:
clear:none:允许两边有浮动,默认值。
clear:left:不允许左面有浮动。
clear:right:不允许右面有浮动。
clear:both:两边都不允许有浮动,由于太过暴力,所以用的比较少。

****本文章版权属 饥人谷_张世钧和饥人谷 所有,如需转载请务必注明出处。****

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • 一、文档流的概念指什么?有哪些方式可以让元素脱离文档流? 文档里指元素在文档中的位置由元素在html里的位置决定,...
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
  • 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流也叫常规流,其实就是文档的读取和输出顺序,也就是我...