Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 列间隙的两种设置方法和等高列实现
Blogger Information
Blog 13
fans 0
comment 7
visits 17260
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
列间隙的两种设置方法和等高列实现
ccc9112020
Original
3368 people have browsed it

  1. 列间隙的两种设置方案
    两列或者是多列加上边距后累计宽度如果超过父容器宽度会导致换行，从而使得布局不符合预期。列间隙设置方法包括计算边距设置和通过修改box-sizing属性设置。两种方法都可以实现设置边距的目标。计算边距可以是百分比也可以是具体em值，因为css的calc(x - y)可以计算属性值，注意加减号两侧必须加空格否则无效。计算边距可以用margin或者是padding.box-sizing设置省去了加减边距，但是边距只能够是padding,因为margin不算在width中。
    下面分别演示两种设置方法。
    html代码：

    1.      <header>PHP中文网</header>
    2.      <div class="container">
    3.        <aside class="left">菜单选项</aside>
    4.        <main>栏目分类</main>
    5.        <aside class="right">热门课程</aside>
    6.      </div>
    7.      <footer><p>底部</p></footer>

    • 百分比设置列间隙css代码

      1. /** 
      2. 列间隙设置不当会导致元素分行显示，破坏页面结构.
      3. 通过margin=100%-left_element.width-right_element.width实现.
      4. width可以在css中用总体百分比或者是用calc(element.width - margin)计算.
      5. calc中减号两侧必须有空格，否则无效.
      6. **/
      8.  * {
      9.   margin: 0;
      10.   padding: 0;
      11.   /* outline: 1px dashed lightcoral; */
      12.   /* w3c标准默认盒模型是content-box,无需显式声明,width不包括border和padding */
      13.   box-sizing: content-box;
      14. }
      15. /* css中尽可能避免用标签选择器，以实现样式复用，但是也不是不可以用 */
      16. header {
      17.   width: 100%;
      18.   height: 5em;
      19.   background-color: lightblue;
      20.   text-align: center;
      21.   /* border-box的width和height包括border和padding,在设计垂直居中的时候可以直接根据元素宽高设置 */
      22.   box-sizing: border-box;
      23.   padding-top: 1.5em;
      24. }
      25. .container {
      26.   /* 父元素只设置了min-height，没有设置height，所以百分比没有效果 */
      27.   min-height: 80vh;
      28.   outline: 1px dashed red;
      29.   /* 子元素的height过大会导致溢出。而overflow(overflow-x,overflow-y)可以设置溢出的处理方式，包括visible,hidden，auto(溢出时自动出现滚动条)，scroll多种 */
      30.   overflow: auto;
      31.   /* 垂直居中设置方法之一：父元素position设置为非static,子元素设置绝对定位可以实现垂直居中，但是float后的子元素不可以？ */
      32.   /* position: relative; */
      33. }
      34. .container > .left {
      35.   width: 19%;
      36.   height: 100%;
      37.   height: 50%;
      38.   margin-right: 1%;
      39.   /* aside和main都是html5语义化标签，默认块元素，可以用float改成行内块元素,或者是用flex设置为行内块元素 */
      40.   float: left;
      41.   background-color: lightgoldenrodyellow;
      42.   /* text-align文字水平居中 */
      43.   text-align: center;
      44. }
      45. .container > main {
      46.   width: 60%;
      47.   /* height设置过大，可以通过父元素的overflow予以处理，包括显示，隐藏，滚动条，自动各种选项 */
      48.   height: 50em;
      49.   /* float:left把块元素声明为行内块元素，可以在一行并排显示 */
      50.   float: left;
      51.   background-color: lightcoral;
      52.   text-align: center;
      53.   /* float后不能够通过绝对定位来实现垂直居中？，但是已知宽高，实现垂直居中是很简单的 */
      54.   /* position: absolute;
      55.   top: 0;
      56.   bottom: 0;
      57.   left: 0;
      58.   right: 0;
      59.   margin: auto; */
      60.   /* 用border-box确定上下padding,实现垂直居中 */
      61.   box-sizing: border-box;
      62.   padding-top: calc((50em - 1em) / 2);
      63. }
      64. .container > .right {
      65.   width: calc(19% - 1em);
      66.   height: 70vh;
      67.   /* em设置margin可以使得在不同大小的窗口中margin保持一致，随元素字号大小而改变 */
      68.   margin-left: 1em;
      69.   float: left;
      70.   background-color: lightgoldenrodyellow;
      72.   display: flex;
      73.   /* flex下text-align不生效？我几次都不成功。我看到很多例子是可以的。目前还不了解具体原因，因为我的学习还没有到flex,虽然讲课已经过了。用align-items加justify-content可以 */
      74.   /* text-align: center; */
      75.   align-items: center;
      76.   justify-content: center;
      77. }
      78. footer {
      79.   position: fixed;
      80.   width: 100%;
      81.   height: calc(20vh - 5em);
      82.   background-color: #0752b5;
      83.   color: white;
      84. }
      85. footer > p {
      86.   /* 绝对定位实现垂直居中，父元素body的position不可以是static，但是无法实现p里面的文字居中 */
      87.   width: 50px;
      88.   height: 50px;
      89.   position: absolute;
      90.   top: 0;
      91.   right: 0;
      92.   bottom: 0;
      93.   left: 0;
      94.   margin: auto;
      95. }
      96. /* line-height等于父元素高度，加上vertical-align:center，可以实现垂直居中 */
      97. /* text-align:center实现水平居中 */
      98. footer > p {
      99.   line-height: 50px;
      100.   vertical-align: middle;
      101.   text-align: center;
      102. }

      效果图：
      width计算设置列间隙

    • box-sizing设置列间隙

      1. /* content-box(W3C盒子)的width=内容宽度，不论是padding,margin，还是border都不在width里面，在设置间隙的时候不能够控制布局 */
      2. /* border-box又称怪异盒子/IE盒子，width=内容宽度+padding+border,这样可以利用padding设置列间隙，布局不会受影响 */
      3. /* margin在任何情况下都不计入盒子高度和宽度 */
      4. :root {
      5.   box-sizing: border-box;
      6. }
      7. * {
      8.   margin: 0;
      9.   padding: 0;
      10.   /* 把所有元素设为border-box，padding和border都在width内，在利用padding设置列间隙 */
      11.   box-sizing: inherit;
      12. }
      13. header,
      14. footer {
      15.   /* line-height和height设置一样，再通过 vertical-align 可以设置垂直居中，text-align 设置水平居中 */
      16.   width: 100%;
      17.   height: 10vh;
      18.   background-color: lightblue;
      19.   line-height: 10vh;
      20.   text-align: center;
      21.   vertical-align: middle;
      22. }
      23. .container {
      24.   width: 100%;
      25.   height: 80vh;
      26.   outline: 1px dashed red;
      27. }
      28. .container > .left {
      29.   float: left;
      30.   width: 20%;
      31.   height: 100%;
      32.   background-color: blanchedalmond;
      33.   padding-right: 1%;
      34.   /* padding默认填充内容的background,通过background-clip:content-box可以设置无背景 */
      35.   background-clip: content-box;
      36.   border: 1px solid seagreen;
      37. }
      38. .container > main {
      39.   float: left;
      40.   width: 60%;
      41.   height: 100%;
      42.   background-color: burlywood;
      43.   border: 1px blue solid;
      44. }
      45. .container > .right {
      46.   float: left;
      47.   width: 20%;
      48.   height: 100%;
      49.   padding-left: 1em;
      50.   background-clip: content-box;
      51.   background-color: cadetblue;
      52.   border: 1px black solid;
      53. }

      效果图：
      box-sizing计算列间隙

  1. 等高列的表格实现
    等高列可以用flex和表格实现，还可以用grid实现，还可以用min-height实现。
    因为时间关系，我拉下的课程和作业比较多，所以本来想做一个比较完整的页面，比较一下各大门户（其实其他论坛也类似）的不同风格和国外主流门户的风格，但是最后放弃。只能够简单做一个效果。期待后续跟上课程。
    虽然只是简单页面，做起来也很吃力。时间太多了。所以说一个项目不能够奢求太大而全，而且一个项目需要和小伙伴们合作才可以。

    1.   <header>
    2.    <h1>四大门户热点新闻</h1>
    3.  </header>
    4.  <!-- wrapper用于包裹表格实现负margin -->
    5.  <div class="wrapper">
    6.    <div class="container">
    7.      <div class="locality">
    8.        <h2>国内四大门户</h2>
    9.        <p>
    10.          <b style="color: red">NOTE:</b><br />
    11.          <span
    12.            >内容和链接全部来自于新浪首页新闻，并不是真实各大网站(因为时间有限，计划严重缩水)，特此声明</span
    13.          >
    14.        </p>
    15.      </div>
    17.      <!-- 下面展示单个网站内容 -->
    18.      <!-- 新浪 -->
    19.      <div class="website-container">
    20.        <div class="brand">
    21.          <a class="sina"></a>
    22.        </div>
    23.        <div class="website-hots">
    24.          <a
    25.            href="https://news.sina.com.cn/gov/2020-10-30/doc-iiznezxr8879299.shtml"
    26.            >中部崛起势头强劲再上新台阶</a
    27.          >
    28.          <a
    29.            href="https://news.sina.com.cn/o/2020-10-30/doc-iiznezxr8999512.shtml"
    30.            >钟南山带来好消息！</a
    31.          ><a
    32.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8602807.shtml"
    33.            >精彩了！美国大媒体猛撕“毒媒”《苹果日报》</a
    34.          ><a
    35.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042791.shtml"
    36.            >美大使抹黑中国5G不成，跟网友打起嘴仗……</a
    37.          >
    38.          <a
    39.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042801.shtml"
    40.            >马英九：无耻、无耻、无耻，蔡英文一言不发……</a
    41.          >
    42.          <a
    43.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8615055.shtml"
    44.            >傅高义警告蔡英文：两岸问题不会留到下一代解决！</a
    45.          >
    46.          <a
    47.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9043090.shtml"
    48.            >日媒:防备台海冲突 日本酝酿举行35年来最大规模演习</a
    49.          >
    50.          <a
    51.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr8984997.shtml"
    52.            >改变对美国巴西大豆依赖 中国又有新动作</a
    53.          >
    54.          <a
    55.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8566589.shtml"
    56.            >澳前驻华大使：都怪中国，把我们“好名声”搞臭了</a
    57.          ><a
    58.            href="https://news.sina.com.cn/w/2020-10-30/doc-iiznezxr9018883.shtml"
    59.            >美国已经盯上了:这颗小行星估价为世界经济总量1万倍</a
    60.          >
    61.          <a
    62.            href="https://finance.sina.com.cn/roll/2020-10-31/doc-iiznctkc8640320.shtml"
    63.            >网信办集中整治手机浏览器 “华米OV”声明自查整改</a
    64.          >
    65.        </div>
    66.      </div>
    68.      <!-- 下面展示单个网站内容 -->
    69.      <!-- 搜狐 -->
    70.      <div class="website-container">
    71.        <div class="brand">
    72.          <a class="sohu"></a>
    73.        </div>
    74.        <div class="website-hots">
    75.          <a
    76.            href="https://news.sina.com.cn/gov/2020-10-30/doc-iiznezxr8879299.shtml"
    77.            >中部崛起势头强劲再上新台阶</a
    78.          >
    79.          <a
    80.            href="https://news.sina.com.cn/o/2020-10-30/doc-iiznezxr8999512.shtml"
    81.            >钟南山带来好消息！</a
    82.          ><a
    83.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8602807.shtml"
    84.            >精彩了！美国大媒体猛撕“毒媒”《苹果日报》</a
    85.          ><a
    86.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042791.shtml"
    87.            >美大使抹黑中国5G不成，跟网友打起嘴仗……</a
    88.          >
    89.          <a
    90.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042801.shtml"
    91.            >马英九：无耻、无耻、无耻，蔡英文一言不发……</a
    92.          >
    93.          <a
    94.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8615055.shtml"
    95.            >傅高义警告蔡英文：两岸问题不会留到下一代解决！</a
    96.          >
    97.          <a
    98.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9043090.shtml"
    99.            >日媒:防备台海冲突 日本酝酿举行35年来最大规模演习</a
    100.          >
    101.          <a
    102.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr8984997.shtml"
    103.            >改变对美国巴西大豆依赖 中国又有新动作</a
    104.          >
    105.          <a
    106.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8566589.shtml"
    107.            >澳前驻华大使：都怪中国，把我们“好名声”搞臭了</a
    108.          ><a
    109.            href="https://news.sina.com.cn/w/2020-10-30/doc-iiznezxr9018883.shtml"
    110.            >美国已经盯上了:这颗小行星估价为世界经济总量1万倍</a
    111.          >
    112.          <a
    113.            href="https://finance.sina.com.cn/roll/2020-10-31/doc-iiznctkc8640320.shtml"
    114.            >网信办集中整治手机浏览器 “华米OV”声明自查整改</a
    115.          >
    116.        </div>
    117.      </div>
    119.      <!-- 下面展示单个网站内容 -->
    120.      <!-- 网易 -->
    121.      <div class="website-container">
    122.        <div class="brand">
    123.          <a class="netease"></a>
    124.        </div>
    125.        <div class="website-hots">
    126.          <a
    127.            href="https://news.sina.com.cn/gov/2020-10-30/doc-iiznezxr8879299.shtml"
    128.            >中部崛起势头强劲再上新台阶</a
    129.          >
    130.          <a
    131.            href="https://news.sina.com.cn/o/2020-10-30/doc-iiznezxr8999512.shtml"
    132.            >钟南山带来好消息！</a
    133.          ><a
    134.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8602807.shtml"
    135.            >精彩了！美国大媒体猛撕“毒媒”《苹果日报》</a
    136.          ><a
    137.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042791.shtml"
    138.            >美大使抹黑中国5G不成，跟网友打起嘴仗……</a
    139.          >
    140.          <a
    141.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042801.shtml"
    142.            >马英九：无耻、无耻、无耻，蔡英文一言不发……</a
    143.          >
    144.          <a
    145.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8615055.shtml"
    146.            >傅高义警告蔡英文：两岸问题不会留到下一代解决！</a
    147.          >
    148.          <a
    149.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9043090.shtml"
    150.            >日媒:防备台海冲突 日本酝酿举行35年来最大规模演习</a
    151.          >
    152.          <a
    153.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr8984997.shtml"
    154.            >改变对美国巴西大豆依赖 中国又有新动作</a
    155.          >
    156.          <a
    157.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8566589.shtml"
    158.            >澳前驻华大使：都怪中国，把我们“好名声”搞臭了</a
    159.          ><a
    160.            href="https://news.sina.com.cn/w/2020-10-30/doc-iiznezxr9018883.shtml"
    161.            >美国已经盯上了:这颗小行星估价为世界经济总量1万倍</a
    162.          >
    163.          <a
    164.            href="https://finance.sina.com.cn/roll/2020-10-31/doc-iiznctkc8640320.shtml"
    165.            >网信办集中整治手机浏览器 “华米OV”声明自查整改</a
    166.          >
    167.        </div>
    168.      </div>
    170.      <!-- 下面展示单个网站内容 -->
    171.      <!-- 腾讯 -->
    172.      <div class="website-container">
    173.        <div class="brand">
    174.          <a class="tencent"></a>
    175.        </div>
    176.        <div class="website-hots">
    177.          <a
    178.            href="https://news.sina.com.cn/gov/2020-10-30/doc-iiznezxr8879299.shtml"
    179.            >中部崛起势头强劲再上新台阶</a
    180.          >
    181.          <a
    182.            href="https://news.sina.com.cn/o/2020-10-30/doc-iiznezxr8999512.shtml"
    183.            >钟南山带来好消息！</a
    184.          ><a
    185.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8602807.shtml"
    186.            >精彩了！美国大媒体猛撕“毒媒”《苹果日报》</a
    187.          ><a
    188.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042791.shtml"
    189.            >美大使抹黑中国5G不成，跟网友打起嘴仗……</a
    190.          >
    191.          <a
    192.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9042801.shtml"
    193.            >马英九：无耻、无耻、无耻，蔡英文一言不发……</a
    194.          >
    195.          <a
    196.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8615055.shtml"
    197.            >傅高义警告蔡英文：两岸问题不会留到下一代解决！</a
    198.          >
    199.          <a
    200.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr9043090.shtml"
    201.            >日媒:防备台海冲突 日本酝酿举行35年来最大规模演习</a
    202.          >
    203.          <a
    204.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznezxr8984997.shtml"
    205.            >改变对美国巴西大豆依赖 中国又有新动作</a
    206.          >
    207.          <a
    208.            href="https://news.sina.com.cn/c/2020-10-30/doc-iiznctkc8566589.shtml"
    209.            >澳前驻华大使：都怪中国，把我们“好名声”搞臭了</a
    210.          ><a
    211.            href="https://news.sina.com.cn/w/2020-10-30/doc-iiznezxr9018883.shtml"
    212.            >美国已经盯上了:这颗小行星估价为世界经济总量1万倍</a
    213.          >
    214.          <a
    215.            href="https://finance.sina.com.cn/roll/2020-10-31/doc-iiznctkc8640320.shtml"
    216.            >网信办集中整治手机浏览器 “华米OV”声明自查整改</a
    217.          >
    218.        </div>
    219.      </div>
    221.      <div class="score">评分<br />250</div>
    222.    </div>
    223.  </div>
    1.    :root {
    2.      font-size: 0.625em;
    3.      box-sizing: border-box;
    4.    }
    5.    * {
    6.      margin: 0;
    7.      padding: 0;
    8.      box-sizing: inherit;
    9.    }
    10.    body {
    11.      font-size: 1.6rem;
    12.    }
    13.    header {
    14.      height: 5em;
    15.      text-align: center;
    16.      line-height: 5em;
    17.      background-color: khaki;
    18.      font-family: "宋体";
    19.      font-size: 1.6rem;
    20.      color: lightcoral;
    21.    }
    23.    /* 以下实现国内四大门户内容展示的表格布局 */
    24.    .container {
    25.      display: table;
    26.      width: 100%;
    27.      /* 第一个是水平间距，第二个是垂直间距 */
    28.      border-spacing: 2em 0;
    29.    }
    31.    .container > .locality,
    32.    .container > .website-container,
    33.    .container > .score {
    34.      display: table-cell;
    35.    }
    37.    .container > .locality {
    38.      width: 10%;
    39.      padding: 1em;
    40.      text-align: center;
    41.      vertical-align: middle;
    42.    }
    44.    .container > .website-container {
    45.      width: 20%;
    46.    }
    48.    .container > .score {
    49.      width: 10%;
    50.      text-align: center;
    51.      vertical-align: middle;
    52.      color: blue;
    53.      padding: 1em;
    54.    }
    56.    /* 设置负外边距消除外部 */
    57.    .wrapper {
    58.      margin: 0 -2em;
    59.    }
    61.    /* 以下实现门户网站内容展示css */
    63.    .container > .website-container > .brand {
    64.      width: 100%;
    65.      height: 6em;
    66.    }
    67.    .container > .website-container > .brand > a {
    68.      display: block;
    69.      position: relative;
    70.      width: 15em;
    71.      height: 5em;
    72.    }
    74.    .container > .website-container > .brand > .sina {
    75.      background: url(http://i2.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png)
    76.        no-repeat center center;
    77.      /* 背景图按宽高比例缩放 */
    78.      background-size: contain;
    79.    }
    81.    .container > .website-container > .brand > .sohu {
    82.      background: url(data:image/png;base64,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)
    83.        no-repeat center center;
    85.      /* 背景图按宽高比例缩放 */
    86.      /* background-size: contain; */
    87.    }
    89.    /* 精灵图，我还不会处理，打字代替 */
    90.    .container > .website-container > .brand > .netease::after {
    91.      content: "网易";
    92.      color: blue;
    93.      font-size: 3em;
    94.      font-style: italic;
    95.      font-weight: bold;
    96.      font-family: "楷体";
    97.      letter-spacing: 0.3em;
    98.      text-align: center;
    99.      vertical-align: middle;
    101.      position: absolute;
    102.      top: 0.5em;
    103.      left: 1em;
    104.      background-color: lightblue;
    105.    }
    107.    .container > .website-container > .brand > .tencent {
    108.      background: url(https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png)
    109.        no-repeat center center;
    110.      /* 背景图按宽高比例缩放 */
    111.      background-size: 80%;
    112.    }
    114.    .container > .website-container > .website-hots {
    115.      width: 100%;
    116.      padding: 1em;
    117.      border-radius: 0.5em;
    118.      border: 2px solid coral;
    119.    }
    121.    /* a标签四个伪类：:link,:visited,:hover,:active，次序不可以颠倒，否则效果有可能不展示(相同的优先级) */
    122.    /* 但是只有:link和:visit两者不需要固定顺序 */
    123.    /* :link和a的样式可能冲突，冲突以代码后者为准 */
    124.    .wrapper .website-hots > a:link {
    125.      display: block;
    126.      font-size: 1.6rem;
    127.      text-decoration: none;
    128.      color: #333;
    129.    }
    130.    .wrapper .website-hots > a:visited {
    131.      color: #999;
    132.    }
    133.    .wrapper .website-hots > a:hover {
    134.      color: red;
    135.    }
    136.    .wrapper .website-hots > a:active {
    137.      color: coral;
    138.    }

    效果图：
    四大门户热点新闻

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这些都是最基础的知识点, 可能以后的班级不再教学了,你们是赚到了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post