10.浮动、定位

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

1、文档流指的是元素在排列布局中所占用的位置,具体的说是将窗体自上而下分为一行行,并在每行中按从左到右的顺序排放元素。
每个非浮动的块级元素都独占一行,若设置了浮动,它就会按照设置的规则浮动在行的一端,如果当前行放置不下,则另起新行再浮动。内联元素不会独占一行。
2、有三种方法可以让元素脱离文档流,分别是浮动:float,绝对定位:position:absolute,固定定位:position:fixed。
3、拓展:文档流和文本流的区别
①文档流是相对于盒模型的概念,而文本流是相对于段落文字的概念。
②元素浮动之后,会脱离文档流,它后面的块级元素感知不到浮动元素的存在,就会无视它原来占据的区域,直接在它上面布局。
但是文字却会认同浮动元素所占据的区域,围绕它布局,所以浮动元素没有脱离文本流。
③如果使用绝对定位之后,元素既会脱离文档流,也会脱离文本流。那么后面元素的文本就不会在认同它占据的区域,会直接在它上面布局,就不会环绕。
例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .box1{
        height: 100px;
        width: 100px;
        background:red;
        float: left;
    }
    .ct{
        height: 200px;
        width:200px;
        background:#ccc;
        margin-top: 40px
    }
    .box2{
        height: 100px;
        width: 100px;
        background:blue;
        position: absolute;
    }
    .footer{
        position: fixed;
        bottom: 10px;
        left: 10px;
        height: 100px;
        width: 200px;
        background:yellow;
    }
</style>
</head>
<body>
    <div class="ct">
        <div class="box1"></div>
        <p>
            比如网页的div标签它默认占用的宽度位置是一整行
            ,p标签默认占用宽度也是一整行,因为div标签和p标
            签是块状对象。 网页中大部分对象默认是占用文档流,
            也有一些对象是不占文档流的,
        </p>
    </div>

    <div class="ct">
        <div class="box2"></div>
        <p>
            比如网页的div标签它默认占用的宽度位置是一整行
            ,p标签默认占用宽度也是一整行,
            因为div标签和p标签是块状对象。 网页中大部分对象默
            认是占用文档流,也有一些对象是不占文档流的,
        </p>
    </div>

    <div class="footer">jirengu</div>
</body>
</html>
Paste_Image.png

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

答:有四种定位方式。分别是:静态定位、相对定位、绝对定位和固定定位。对应position属性有四个值:static、relative、absolute、fixed,默认值为static。
除了static以外,其他的定位方式都可以设定“top、right、bottom、left”属性,指明元素相对于另一个元素所移动的位置

1.在静态定位的情况下,每个元素处在常规文档流中。块级元素会在页面中自上而下地堆叠起来,行内元素会相互并列,直到空间不足以并列的情况下才会折到下一行显示。
2.相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定。
3.绝对定位会把元素彻底从文档流中拿出来,不占据它原本该占据的位置。它需要参考它的定位上下文来移动位置。绝对定位元素的任何祖先元素都可以成为它的定位上下文,只需要把相应祖先元素的position设为relative即可。 如果没有相对定位的祖先元素可以参考,则以默认的定位上下文body作为参照,相对于它进行定位。
4.固定定位也是完全移出文档流,但它的定位上下文是视口(浏览器窗口或手持设备的屏幕),它的特点是不会随页面滚动而滚动。最常见的情况是用它创建不随页面滚动而移动的导航元素。(乍一看很像绝对定位,但它不随着页面滚动而移动,绝对定位会移动)
示意图可以参考 CSS中的绝对定位与相对定位

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

  • absolute偏移参考点是static定位以外最近的一个祖先(父)元素,如果没有则相对于原始的容器body。
  • relative偏移参考点是自己在文档流中原来的位置。
  • fixed偏移参考点是浏览器窗口。
    参考:关于CSS定位中的位置

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

1、z-index的作用:页面显示的是一个二维平面,用x轴和y轴来表示位置属性。为了表示三维立体的概念比如显示元素的上下层的叠加顺序,所以引入了z-index属性来表示z轴的区别。比如说页面的x轴向右,y轴向下那么z轴就是垂直于xy平面里。
表示一个元素在叠加顺序上的上下立体关系。
2、使用:z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。
参考z-index

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        height: 127px;
        width: 300px;
        background:#ccc;
        position: relative;
    }
    .container .box{
        height: 100px;
        width: 100px;
        background:red;
        position: inherit;
    }
    .container .box:nth-child(1){
        background:red;
        z-index: 1;
    }
    .container .box:nth-child(2){
        background:yellow;
        z-index: -1;
    }
</style>
</head>
<body>
    <div class="container">3
        <div class="box">1</div>
        <div class="box">2</div>
    </div>
</body>
</html>
Paste_Image.png

使用z-index要注意下面几点:
1、只对定位元素有效。
z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的元素),用来确定定位元素在垂直于页面方向(称为Z轴)上的层叠顺序,也就是说如果元素没有设置定位,对其设置的z-index是无效的。
2、相同z-index谁上谁下
①如果两个元素都没有定位或者两个都是定位元素且z-index相同发生位置重合现象,那么按文档流顺序,后面的覆盖前面的。
②如果两个元素都没有设置z-index(使用默认值,默认不设置z-index时值是0),一个定位一个没有定位,那么定位元素覆盖未定位元素。
3、父子关系处理
①如果定位父元素z-index设置值除了默认值外,那么定位子元素无论是否设置z-index或设置多少值,z-index都会不起作用,定位子元素都会在定位父元素上面。
②如果父元素z-index未定位或者使用默认值,那么定位子元素设置z-index会起作用,子元素可以在父元素的下面或下面。
4、兄弟之间子元素
①如果定位兄弟元素的z-index生效,那么它们的子元素覆盖关系由父元素层级决定,不管它们子元素z-index的各自大小。
参考:z-index应用总结

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

  • 用position:relative使元素偏移时,它自身位置并未改变,仍然处在文档流的原始位置,偏移的元素不会对下面元素位置产生影响,只是该元素自己相对于原来位置偏移。
  • 设负margin的时候,偏移的元素自身位置改变,不再占据初始空间,还会对其他元素位置产生影响。
  • 设置margin的时候是相邻元素之间的偏移,相对于相邻元素的border,否则设置的margin将无效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    body{
        margin:0px;
        padding: 0px;
    }
    .container{
        display: inline-block;
        height: 300px;
        width: 200px;
        border: 1px solid;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container .box:nth-child(1){
        background:red;
    }
    .container .box:nth-child(2){
        background:blue;
    }
    .container .box:nth-child(3){
        background:yellow;
    }
    .margin{
        margin-top: -30px;
        margin-left:30px; 
    }
    .relative{
        position: relative;
        left: 30px;
        top: -30px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box normal">这是正常的box</div>
        <div class="box">2</div>
    </div>

     <div class="container">
        <div class="box">1</div>
        <div class="box margin">这是负margin的box</div>
        <div class="box">2</div>
    </div>

     <div class="container">
        <div class="box">1</div>
        <div class="box relative">这是relative的box</div>
        <div class="box">2</div>
    </div>
</body>
</html>

Paste_Image.png

可以看出,设置负margin时,元素的原来的空间被1占据,元素好像没有偏移,而container整体向下偏移,而且container内部的底部出现了空白。
这里还有些模糊,搞不清楚?

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

1、可以使用absolute和负margin实现。
首先在父元素上设置定位,提供一个坐标的参考点,然后对元素设置position:absolute;top:50%;left:50%;,此时元素的左上角在正中心的位置,再设置负margin偏移该元素宽高的一半margin-left:-a;(a为该元素宽高的一半)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    body{
        margin:0px;
        padding: 0px;
    }
    .container{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background:#ccc;
    }
    /*这样设置容器等于body,相对于页面*/
    .box{
        position: absolute;
        top: 50%;  
        left: 50%;
        /*box左上角的位置偏移到父元素宽度和高度的一半,也就是父元素的正中心*/
        margin-left: -50px;
        margin-top: -50px;
        /*box偏移本身宽高的一半,也就是整个都在页面正中心*/
        height: 100px;
        width: 100px;
        background:red;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>
Paste_Image.png

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

1、浮动元素的特征:
①浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离了文档流,所以文档流中的块框表现得就像浮动框不存在一样。
②浮动元素如果没有设置宽高,会自动“收缩”,那它的宽高就是自身的内容。
③无论什么元素设置浮动后都会变成块级元素。
④浮动元素对于其他浮动元素,先浮动的元素不会被后浮动的元素超过,浮动元素不会彼此重叠。
⑤浮动元素对于文字,则是“可见”的,会把文字给“顶开”,形成文字包围浮动元素。
⑥当行框没有足够空间,浮动元素会被挤到新的一行
⑦浮动重叠规则:
行内框与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容不在浮动元素之下显示。参考:浮动元素

2、对其他浮动元素、普通元素、文字的影响
①对其它浮动元素的影响:后面的浮动元素会会跟随其浮动,直到遇到前面浮动元素的边框。如果父容器放不下,它会自动下移到新的一行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        width:250px;
        height:300px;
        border:1px solid;
    }
    .box{
        height:100px;
        width:100px;
        border:1px solid;
    }
    .container .box:nth-child(1){
        background:red;
        float:right;
    }
    .container .box:nth-child(2){
        background:blue;
        float:right;
    }
    .container .box:nth-child(3){
        background:green;
        float:right;
    }
    .container .box:nth-child(4){
        background:yellow;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>
Paste_Image.png

②对普通元素的影响:同级关系的普通块级元素会忽略浮动元素的存在,占据它的位置;父子级关系的子元素浮动的话,父容器的高度会塌陷。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container{
        border: 1px solid red;
        width: 300px;
    }
    .box1{
        background:red;
        float: left;
    }
    .box2{
        background:blue;
        width: 200px;
    }
    .container .box:nth-child(1){
        background:gray;
        /*float: left;*/
    }
    .container .box:nth-child(2){
        background:yellow;
        float: left;
    }
</style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="container">
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
</body>
</html>

Paste_Image.png

说明:父容器塌陷的原因是子元素浮动后就是脱离文档流,然后不占据原来空间,所以父容器的高度会收缩。

** ③对文字的影响**:浮动元素脱离了文档流,块级元素感知不到浮动元素的存在,但浮动元素对块级元素里的文字产生影响,文字会环绕着浮动元素布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        height: 300px;
        width: 300px;
        border: 1px solid;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
        background:blue;
        float: left;
    }
    p{
        border: 1px solid red;
    }
</style>
</head>
<body>
  <div class="container">
        <div class="box"></div>
        <p>这样会得到我们希望的效果。不幸的是,
下一个元素会受到这个浮动元素的影响。
为了解决这个问题,有些人选择对布局中的所有东西进行浮动
,然后使用适当的有意义的元素(常常是站点的页脚)
对这些浮动进行清理。这有助于减少或消除不必要的标记。
        </p>
    </div>
</body>
</html>
Paste_Image.png

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

1、清除浮动是指清除浮动带来的影响。主要有对上级元素和同级元素的影响。对上级元素的影响比如浮动元素不会撑起父元素的高度,影响与父元素的同级元素。对同级元素的影响比如同级元素会占据浮动元素原来的空间,而我们需要这个空间不被占用。
2、另外的说法,在非IE浏览器下,当容器的高度为auto,且容器的内容中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
3、注意:清除浮动是针对元素本身的,只能对自己有效果,不能够影响到别的元素

4、 清除浮动常用的方法:
①使用clear属性
clear 属性规定元素的哪一侧不允许其他浮动元素

Paste_Image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .container{
        border: 1px solid;
        width: 400px;
    }
    .box{
        height: 100px;
        width: 100px;
        border: 1px solid;
    }
    .container .box:nth-child(1){
        background:red;
        float: left;
    }
    .container .box:nth-child(2){
        background:blue;
        clear:left;
    }
    .ct{
        border: 1px solid;
        width: 400px;
    }
    .ct .box:nth-child(1){
        background:yellow;
        float:right;
    }
    .ct .box:nth-child(2){
        background:gray;
        float: right;
        clear: right;
    }
    .clearfix{
        clear: both;
    }
</style>
</head>
<body>
   <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
    </div> 
    <div class="ct">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="clearfix"></div>
    </div> 
</body>
</html>

Paste_Image.png

②使用伪元素(其实本质上就是用clear)
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动.
Paste_Image.png

③父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。
overflow:hidden 的意思是超出的部分要裁切隐藏掉,那么如果 float 的元素不占普通流位置,普通流的包含块要根据内容高度裁切隐藏,如果高度是默认值auto,那么不计算其内浮动元素高度就裁切,就有可能会裁掉float,这是违反布局常识的。
所以如果没有明确设定容器高情况下,它要计算内容全部高度才能确定在什么位置hidden,浮动的高度就要被计算进去,顺带达成了清理浮动的目标。
Paste_Image.png

参考:
清除浮动
BFC
深入理解BFC和Margin Collapse


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 1,050评论 0 3
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 设置浮动,可以让元素脱离普通流,使...
    upup_dayday阅读 264评论 0 0
  • 问答 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征:文字环绕浮动...
    liushaung阅读 371评论 0 3
  • 课程目标 掌握定位的几种方式 掌握浮动的原理及应用 理解文档流的概念 使用定位、浮动实现常见布局 学习建议 定位、...
    Timmmmmmm阅读 303评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?一个元素应沿其容器的左侧或右侧放置,允许...
    _小黑阅读 225评论 0 0