任务10-浮动、定位

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

  • 文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行,p标签 默认占用宽度也是一整行,因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域。

  • 浮动和定位可以让元素脱离文档流

  • 浮动通过设置float属性

  • 定位通过设置 position属性为 absolutefixed

Paste_Image.png

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

| 值 | 描述 | 使用场景|
| ------------- |:-------------|
| static|默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 | 默认不设置|
| absolute| 生成绝对定位的元素,相对于** static 定位以外第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。会脱离文档流。 | 根据需求需要定位在某个参考点的某个相对位置时 |
| fixed| 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 | 广告窗口或底部菜单,用于固定位置显示的地方 |
|relative | 生成相对定位的元素,相对于其正常位置进行定位。
占用空间,相当于原元素的位置移动,不会脱离文档流。** |其它元素定位时需要把它作为参考点 |

Paste_Image.png
Paste_Image.png
Paste_Image.png

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

absolute, relative, fixed都是postion属性的值。

  • absolute的参考点是离其最近的元素postion设置了fixed、relative的父级或祖先元素,如果父级元素没有,则一层一层往上找,最终到body元素。
  • relative的参考点是其原来自身的位置
  • fixed的参考点是浏览器的窗口

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

z-index的作用是当两个或n个元素重叠在一起的时候,其决定哪个元素显示在上层
z-index只有在使用了定位属性(positon且值为relative\absolute\fixed)上才可使用;有较高z-index值的元素比z-index值较低的元素离读者更近;z-index值是正负整数

Paste_Image.png
Paste_Image.png

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

  • position:relative使元素偏移时,其自身位置并未改变,处在文档流的原始位置
Paste_Image.png
  • 负margin使元素偏移时,自身位置改变并且会影响周边元素
Paste_Image.png

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

可以利用position定位的absolute值和负margin使宽高固定的元素在页面上水平居中

Paste_Image.png

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

  • 浮动元素的特征如下:

  • 元素浮动之后会从文档的正常流中删除

  • 元素设置浮动后,会尽可能地向左或向右浮动,直到碰到父元素边框或其余浮动元素

  • 元素浮动后会生成一个块级框,而不论这个元素是什么

  • 浮动元素不会互相重叠

  • 一个浮动元素的顶端不能比其父元素的内顶端更高

  • 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

  • 如果没有足够空间,浮动元素会被挤到新的一行

  • 对其它浮动元素的影响:

  • 浮动元素之间是紧跟的关系,碰到同级元素的边缘或者父元素的边缘才停止

  • 如果碰到文字文字会围绕在浮动元素周围,下一个普通的元素会占据浮动元素之前的位置,但是普通元素内的元素不会跟着普通元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 400px;
            border: solid 1px;
        }
        .container .box{
            width: 100px;
            height: 100px;
            border: solid 1px;
        }
        .container .box:nth-child(1){
            float: left;
            background: red;
        }
        .container .box:nth-child(2){
            background: #0000ff;
        }
        .container .box:nth-child(3){
            background: yellow;
        }
        .container .box:nth-child(4){
            background: pink;
        }
        .ct3{
            /*
            width: 400px;
            height: 400px;
            border: solid 1px;
            */
        }
        .ct3 .box{
            width: 100px;
            height: 100px;
            border: solid 1px;
        }
        .ct3 .box:nth-child(1){
            background: red;
        }
        .ct3 .box:nth-child(2){
            background: #0000ff;
        }
        .ct3 .box:nth-child(3){
            float: right;
            background: yellow;
        }
        .footer{
            clear: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
1
        </div>
        <div class="box">
1
        </div>
        <div class="box">
3
        </div>
    </div>
    <div class="container">
        <div class="box"></div>
        <p>
            生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
            绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
            生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
            绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
        </p>
    </div>
    <div class="ct3">
        <div class="box">
            1
        </div>
        <div class="box">
            1
        </div>
        <div class="box">
            3
        </div>
    </div>
   <div class="footer">
       生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
       绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。
       生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
       绝对定位使元素的位置与文档流无关,因此不占据空间。这
   </div>
</body>
</html>
Paste_Image.png

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

元素浮动之后会使元素脱离正常的文档流,对没有浮动的元素和父元素都会造成影响,也会对文字排版产生影响,所以要清除浮动以解除浮动带来的负面影响。

Paste_Image.png

** 本教程版权归作者和饥人谷所有,转载须说明来源! **

推荐阅读更多精彩内容

  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 211评论 0 0
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 461评论 0 3
  • 课程目标 掌握定位的几种方式 掌握浮动的原理及应用 理解文档流的概念 使用定位、浮动实现常见布局 学习建议 定位、...
    Timmmmmmm阅读 54评论 0 0
  • 问答 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:文字环绕浮动...
    liushaung阅读 129评论 0 3
  • 最近怀孕了,孕吐很严重,每次吐的自己快要崩溃了。所以,好希望,自己怀的是个男孩,希望他以后不受这些孕吐之类的苦。有...
    白浅浅阅读 162评论 0 0