布局知识点梳理

使行内元素变成块级元素的三种方式:

  1. display: block;

    1. <div class="code-container code1">
    2. <div class="box">
    3. <span class="span1">这是一个添加 display: block; 的 span 元素</span>
    4. </div>
    5. </div>

    上图是一个设置 display: block; 的 span 元素

  2. position: absolute;

    设置绝对定位的元素未设置宽度情况下宽度以内容撑起为准,以包含块为边界

    设置绝对定位之后,如果未设置 left right top bottom,则定位元素的初始原点在文档流正常位置

    1. <div class="code-container code1">
    2. <div class="box">
    3. 文档流正常内容
    4. <span class="span2">这是一个添加 position: absolute; 的 span 元素这是一个添加 position: absolute; 的 span 元素</span>
    5. 后面的内容
    6. </div>
    7. </div>
    8. <div class="code-container code1">
    9. <div class="box">
    10. 文档流正常内容
    11. <span class="span3">这是一个添加 position: absolute; 的 span 元素 并且设置了位置 left: 0; top: 0;</span>
    12. 后面的内容
    13. </div>
    14. </div>

    图中绿色半圆即为蓝色 span 元素文档流的正常位置,因为没有设置定位位置关系所有该 span 以绿色位置为原点。同时该 span 未设置宽度则边界以包含块为边界。

    图中红色框区域可以明显看出设置 left: 0; top: 0; 后 span 盖在文档流上方。

  3. float: left;
    设置浮动之后转化成的块级元素宽度默认值等于未设置浮动前的值

    浮动之后会影响紧邻浮动元素的特性,正常块级元素都会从新的一行开始展示内容,但是前面的元素要是具有浮动特性则不从新的一行开始

    1. <div class="code-container code1">
    2. <div class="box">
    3. 文档流正常内容
    4. <span class="span6">这是一个添加 float: left; 的 span 元素</span>
    5. <div class="clear-r"></div>
    6. </div>
    7. </div>
    8. <div class="code-container code1">
    9. <div class="box">
    10. <span class="span6">这是一个添加 float: left; 的 span 元素</span>
    11. <p>这是一个紧邻浮动元素的块级元素</p>
    12. <p>这是一个块级元素</p>
    13. </div>
    14. </div>

    图中红色框即为浮动之后的 span 元素宽度

    图中绿色框内为一个 p 标签,正常应该从新的一行开始显示,因为前面 span 元素具有左浮动顾 p 标签不从新的一行开始显示。

如何进行清浮动

  1. 为受到浮动影响的元素设置(浮动元素之后的元素) clear 属性

    float: left; 受影响元素需要添加 clear: left; 或者 clear: both;

    float: right: 受影响元素需要添加 clear: right; 或者 clear: both;

    1. <div class="code-container code1">
    2. <div class="box1">
    3. <span class="span6">这是一个添加 float: left; 的 span 元素</span>
    4. </div>
    5. <p class="clear-l">浮动元素的父元素后面的内容 clear: left;</p>
    6. </div>
    7. <div class="code-container code1">
    8. <div class="box1">
    9. <span class="span6">这是一个添加 float: left; 的 span 元素</span>
    10. <p class="clear-l">浮动元素后面的内容 clear: left;</p>
    11. </div>
    12. </div>
    13. <div class="code-container code1">
    14. <div class="box1">
    15. <span class="span5">这是一个添加 float: right; 的 span 元素</span>
    16. <p class="clear-r">浮动元素后面的内容 clear: right;</p>
    17. </div>
    18. </div>
    19. <div class="code-container code1">
    20. <div class="box1">
    21. <span class="span5">这是一个添加 float: right; 的 span 元素</span>
    22. <p class="clear-l">浮动元素后面的内容 clear: left;</p>
    23. </div>
    24. </div>

    图中第一个红框区域 span 元素的父元素 box1 由于子元素 span 向左浮动后 box1 的高度为0;box1之后 p 元素具有 clear: left; 所以最外层的 code1 元素高度正常。

    图中绿色框部分能明显看出 float: right; 需要使用 clear: right;

  2. 【不推荐】为受到浮动影响的元素设置 width:100%; overflow: hidden;

    1. <div class="code-container code1">
    2. <div class="box2">
    3. <span class="span5" style="height:50px;">这是一个添加 float: right; height: 50px; 的 span 元素</span>
    4. </div>
    5. </div>

    上图中的灰色即为 span 的父元素,可以看出高度正常展示。

常见问题整理

  1. img后的高度多了几个像素

    原因:因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线对齐,而不是紧贴容器下边缘。

    解决方案:

    1. 给 img 添加属性改成块级元素 display: block;
    2. 为 img 设置行内元素垂直对齐方式 vertical-align 可选值: sub\top\text-top\middle\bottom\text-bottom

      1. <div class="code-container code2">
      2. <p class="p1">
      3. <img src="images/200X30.jpg" alt="">
      4. </p>
      5. </div>

      可以看出上图红色图片底部距离父元素还有一定的间距这就是多出来的那几个像素

  2. 能用其他方式解决的尽量不要使元素脱离文档流

    1. <div class="code-container code2">
    2. <p class="p2">
    3. 使用 margin-left: auto; 使元素居右
    4. </p>
    5. </div>

  3. 元素 margin-top 和 margin-bottom 的特殊性

    1. 垂直 margin 可能在一些盒模型中被折叠
      通用方案:统一使用 margin-top 或者 margin-bottom

      1. <div class="code-container code2">
      2. <p class="p3">
      3. margin-bottom: 10px;
      4. </p>
      5. <p class="p4">
      6. margin-top: 10px;
      7. </p>
      8. </div>

      图中灰色部分的高度值为10像素,说明 margin-bottom 和 margin-top 重叠了。

    2. 子元素垂直 margin 影响父元素或者子元素 margin 不起作用
      给父容器加 overflow:hidden; 属性。
      父容器加 border 除 none 以外的属性。
      用父容器的 padding-top 代替 margin-top。

      1. <div class="code-container code2">
      2. <p class="p5">
      3. margin: 0;
      4. </p>
      5. <div class="p6">
      6. <p class="p7">
      7. margin-top: 20px;
      8. </p>
      9. </div>
      10. </div>


      代码中 p6 的 margin-top: 10px; 而 p7 margin-top: 20px; 最终灰色部分的值为20像素。

  4. 布局中 margin 负值的理解 CSS布局奇淫巧计之-强大的负边距

    1. 在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的边界向里收,文档流认的只是这个边界,不会管你实际的尺寸是多少。

      1. <div class="code-container code2">
      2. <p class="p8">
      3. 正常文档流内容<span class="span1">margin-right: -20px; </span>正常文档流内容
      4. </p>
      5. </div>
      6. <div class="code-container div3">
      7. margin-top: -10px;
      8. </div>
      9. <div class="code-container div4">
      10. margin-bottom: -10px;
      11. </div>
      12. <div class="code-container div5">
      13. margin-left: 50px;
      14. </div>


      图中因为蓝色 span 元素设置了 margin-right: -20px; 使元素边界向里收缩20像素,所有可以看见红色框区域内容重叠了。
      图中绿色框因为设置了 margin-top: -10px; div3 元素边界向内收缩10像素,code2的下边距与 div3 收缩值相同所有看不出两个元素垂直间距了。
      图中黄色框区域因为 div4 设置 margin-bottom: -10px; 使的 div5 向上移动10像素,可以看出内容重叠

    2. 左右负边距对块级元素宽度的影响,前提是该元素没有设定 width 属性(或者 width: auto;)则负边距将使元素宽度增加

      1. <div class="code-container div1">
      2. <div class="div2 cf">
      3. <p>父元素宽度为460px margin-right: -20px;</p>
      4. <span class="span2">width: 220px; margin-right: 20px;</span>
      5. <span class="span2">width: 220px; margin-right: 20px;</span>
      6. </div>
      7. </div>


      两个子元素的宽度为 (220+20)*2 = 480 等于父元素 460 + 20负边距

    3. 负边距对绝对定位元素的影响

      1. <div class="code-container code2">
      2. <div class="div6">
      3. <div class="div7">
      4. position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -100px;
      5. </div>
      6. </div>
      7. </div>


      前提是居中元素的尺寸必须是固定值

      4.补充:通过绝对定位和 margin: auto; 实现居中

      1. <div class="code-container code2">
      2. <div class="div8">
      3. <div class="div9">
      4. position: absolute; width: 200px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
      5. </div>
      6. </div>
      7. </div>