任务10-浮动、定位

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

文档流:从左往右一次排列内联元素,块级元素一直从上往下排列。
脱离文档流方式:
绝对定位position:absolute;
固定定位:position:fixed;
浮动:float;

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

有4种定位方式:
(1)static:表示默认值
(2)relative:相对于元素自身的正常位置进行定位,定位后还占据其原始位置使后面的元素还是像以前的位置进行排列,所以不会脱离文档流。
(3)absolute:表示绝对定位,将元素从文档流中脱离出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性(relative、absolute、fixed)的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素。
(4)fixed:相对于窗口进行定位,表示固定在窗口的某一位置,它不会随浏览器窗口的滚动条滚动而变化,也不会受文档里影响。

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

absolute:static 定位以外的第一个父元素进行定位。
relative:相对于元素自身的正常位置进行定位。
fixed:相对于浏览器窗口进行定位。

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

z-index用来控制层叠元素显示的优先级,值越大,优先级就越高。

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

position:relative:是相对于自身静态位置进行定位,还占据着原有的位置,所以不会脱离文档流,也就没有影响其他元素。
负margin:通过负margin进行偏移,元素会放弃原有自身静态的位置,脱离了文档流,从而其他元素会被影响,所以其他元素的位置也发生了变化。

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

在元素上设置position: absolute;这样就是相对于父容器进行绝对定位,再给这个元素设置top和left值都是-50%,然后再设置margin值为宽高的一半。


垂直水平居中

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

特征:
(1)浮动元素会脱离文档流,从而不占据自身的原本位置,也导致了其他元素会受到影响。
(2)浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
(3)设置元素的浮动都会被显示为一个块级元素。

对其他浮动元素的影响:其他浮动元素会依次排列在浮动元素的左边或右边,如果父容器包裹不下会自动排列到下一行。
对普通元素的影响:浮动元素会脱离文档流,不在占据原有的位置,所以对普通元素来说会自动填满浮动元素的原有位置,而且浮动元素会浮在上面。
对文字的影响:文字受到浮动元素的影响,会留出浮动元素占据的空间,从而形成文字环绕效果。

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

清除浮动指的是清除浮动元素所带来的影响,比如由于浮动,父元素无法撑起高度,影响与父元素同级的元素;与浮动元素同级的非浮动元素会紧随其后;若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响布局。
通过使用clear:left / right / both / none;来清除浮动(清除浮动只对元素本身有效)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 4,758评论 0 3
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 4,170评论 0 0
  • 课程目标 掌握定位的几种方式 掌握浮动的原理及应用 理解文档流的概念 使用定位、浮动实现常见布局 学习建议 定位、...
    Timmmmmmm阅读 2,548评论 0 0
  • 1. 文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流(normal flow)元素由上到下、由左到右...
    mint9602阅读 1,930评论 0 0
  • 在几十年的光阴里,我们忽略的,往往就是那些最亲的人,我们淡忘的,也常常是离自己最近的情。 “对你的人生影响最大的是...
    lllv521阅读 2,778评论 0 2