【CSS】QQ邮箱布局，词典四列布局，行内布局，CSS继承，vertical-align，white-space

本文链接：https://blog.csdn.net/partworld/article/details/127040297

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

页面布局编写顺序(附带练习题)

八个字：从外向内，从上到下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 20px;
    }

    header {
      background-color: red;
      min-width: 600px;
    }

    header p {
      width: 600px;
      margin: auto;
      xbackground-color: red;
    }
/*注意这个max-width*/
    main {
      box-sizing: border-box;
      max-width: 600px;
      border: 2px solid;
      margin: 10px auto;
      height: auto;
      padding: 10px;
    }

    main p {
      margin: 0;
      height: 4em;
      overflow: auto;
      xmargin: 10px;
    }

    article {
      margin-top: 10px;
      height: 50px;
      background-color: violet;
      margin-bottom: 10px;
    }

    article:hover {
      margin-left: -10px;
      margin-right: -10px;
    }

    footer {
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) yellow rgba(0, 0, 0, 0);
      margin: auto;
    }

  </style>
</head>

<body>
  <header>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium temporibus reiciendis maiores error
      veritatis mollitia laborum officiis voluptas perspiciatis corrupti nostrum quasi id provident, sed dignissimos
      facere harum ipsam nemo.</p>
  </header>

  <main>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere aliquam inventore cumque laboriosam iure
      nesciunt aspernatur dicta soluta illum rerum enim debitis quia quae excepturi tenetur reprehenderit, eligendi eum.
      Ipsum!</p>
    <article>

    </article>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis perferendis vitae dignissimos delectus et
      blanditiis aut commodi molestiae? Suscipit labore recusandae saepe voluptatum esse, iste aspernatur vitae vero
      porro quo!</p>
  </main>

  <footer>
  </footer>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }

    main {
      width: 600px;
      height: 500px;
      margin: auto;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    ul li {
      box-sizing: border-box;
      width: 180px;
      height: 40px;
      border: 3px solid;
      margin-bottom: 15px;
      background-color: pink;
    }

    ul li:nth-child(n+5) {
      margin-left: 210px;
    }

    ul li:nth-child(n+9) {
      margin-left: 420px;
    }

    ul li:nth-child(4n+5) {
      margin-top: -220px;
    }

    ol {
      list-style: none;
      padding: 0;
      overflow: hidden;
    }

    ol li {
      border-bottom: 1px dotted;
      margin-bottom: -1px;
    }

    .a {
      background-color: pink;
      text-align: center;
    }

    .b {
      margin: auto;
      width: 600px;
      background-color: black;
      color: aliceblue;
    }

    header {
      margin: auto;
      background-color: black;
    }

  </style>
</head>

<body>
  <header>
    <p class="b">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ut nemo fuga ratione neque corrupti.
      Ipsum
      porro et, a pariatur sequi repellendus quaerat, recusandae cumque enim error harum nam debitis.</p>
  </header>
  <main>
    <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
    <ol>
      <li>link</li>
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ol>
  </main>

  <p class="a">
    &copy;
    <br>
    本页所有布局均使用块元素
  </p>
</body>

</html>

QQ邮箱布局

方案1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  html {
    height: 100%;
  }

  body {
    margin: 0;
    height: 100%;
  }

  header {
    box-sizing: border-box;
    height: 80px;
    border-bottom: 1px solid;
  }

  /*注意calc的格式，外面不能有空格，里面符号左右有空格*/
  aside {
    width: 200px;
    height: calc(100% - 80px);
    overflow: auto;
  }

  /*注意这个margintop不能用正常的，要用vh单位，因为百分比是宽度的百分比*/
  main {
    height: calc(100% - 80px);
    overflow: auto;
    width: calc(100% - 200px);
    margin-left: 200px;
    margin-top: calc(-100vh + 80px);
  }

</style>

<body>
  <header></header>
  <aside>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores iste adipisci quidem repellendus nesciunt, omnis
    recusandae modi consequuntur. Commodi pariatur dolore reprehenderit! Atque, minus non. Architecto nemo neque in ea.
    Reiciendis, blanditiis. Eaque dolorem error, officiis molestiae, soluta necessitatibus laboriosam ducimus rem minus
    deserunt nam id ab ut molestias alias qui odio, maiores temporibus tenetur voluptates voluptas eos ullam voluptate?
    Rem optio repellat aperiam assumenda libero eaque, modi cumque nulla aut non maiores saepe odio, perferendis cum
    porro unde, dolore ea voluptas natus. Molestiae, esse expedita minima id deserunt in!
    Ducimus quisquam, voluptas corporis explicabo fugiat fugit dignissimos nulla recusandae enim architecto laudantium
    accusantium assumenda sequi error facere velit blanditiis atque hic ea at deserunt ut! Ipsum distinctio neque
    quisquam.
    Velit error ullam molestias earum asperiores quisquam eveniet necessitatibus odit, culpa minus expedita et ratione
    cumque nihil officia voluptas distinctio quia dolor pariatur mollitia consequuntur eum, officiis animi. Provident,
    placeat?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam neque nulla minima hic ipsam nihil consequatur
    doloribus, inventore assumenda omnis autem officiis, expedita odit voluptates numquam nam quaerat incidunt maiores.
  </aside>

  <main>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam assumenda sapiente quas reprehenderit ipsam autem
    labore placeat veritatis facilis dolore ut reiciendis sequi eligendi fugiat, suscipit dolorem recusandae doloribus
    iure!
  </main>
</body>

</html>

方案2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    header {
      height: 80px;
    }

    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
    }

    aside {
      width: 120px;
      height: 100%;
      overflow: auto;
    }

    main {
      height: 100%;
      margin-left: 120px;
      margin-top: calc(-100vh + 80px);
    }

    div {
      height: calc(100% - 80px)
    }

  </style>
</head>

<body>
  <header>
    aaa
  </header>
  <div>
    <aside>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae sapiente ea quod error sit veritatis, voluptatibus
      fuga quidem quos voluptates beatae iste odit veniam harum maxime neque in. Culpa, quod!
    </aside>
    <main>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto natus harum est qui quia vero sint
      aliquid distinctio voluptatibus quidem enim, omnis mollitia, repudiandae error eius, provident neque repellendus
      dolore.

    </main>
  </div>
</body>

</html>

词典四列布局
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
    }

    aside {
      width: 100px;
      height: 100%;
    }

    .a {
      background-color: pink;
    }

    .b {
      background-color: tan;
      margin-top: -100vh;
      margin-left: calc(100px + 100% - 300px);
    }

    .c {
      margin-right: 0;
      margin-left: auto;
      background-color: violet;
      margin-top: -100vh;
    }

    section {
      margin-left: 100px;
      margin-top: -100vh;
      background-color: yellow;
      height: 100%;
      width: calc(100% - 300px);
    }

    header {
      height: 100px;
    }

    main {
      height: calc(100% - 100px);
      overflow: auto;
    }

    .a h2 {
      margin: 0;
      height: 50px;
    }

    .a div {
      height: calc(100% - 50px);
      overflow: auto;
    }

  </style>
</head>

<body>
  <aside class="a">
    <h2>Oald
    </h2>
    <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum atque neque distinctio eligendi libero animi,
      quisquam iste quibusdam expedita, reiciendis maxime sed officia illum ut odio, assumenda unde incidunt dolore.
      Iusto fugit atque nam voluptates. Iusto consectetur nostrum maiores eligendi eveniet aspernatur numquam culpa
      ipsam adipisci hic quod blanditiis fugit sed delectus, odit mollitia repellendus sit, earum harum voluptatem!
      Magni?
      Error eum voluptatem sit fugiat corporis necessitatibus ipsum enim quis! Excepturi quasi quia cum error nam ab quo
      velit assumenda expedita sed laudantium optio non accusamus praesentium maxime, ipsum enim?
      Unde repudiandae voluptatem quisquam aliquid nihil a, eos asperiores minima, est libero fugiat veritatis at
      explicabo enim maxime blanditiis. Obcaecati ducimus explicabo ipsum, quasi tempore inventore eligendi odit
      dignissimos repudiandae.
      Tenetur quisquam aliquid, quo ipsum doloribus accusamus, sequi vel sunt nisi ratione iure. Hic aliquid, expedita
      vero deserunt distinctio, provident voluptates corrupti architecto, neque at aliquam repellat aut. Labore,
      ratione.
    </div>
  </aside>
  <section>
    <header></header>
    <main>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae cupiditate, praesentium ducimus,
      voluptatibus, quibusdam ipsum iste nesciunt quisquam a odit quia. Libero tempore consequuntur soluta nesciunt
      dolorem illo voluptate similique?
      Culpa at cumque quos corporis, obcaecati porro ratione necessitatibus, a perspiciatis iste reprehenderit maiores
      amet. Eos dignissimos architecto reiciendis quasi, quo quisquam numquam quidem consequuntur delectus earum
      laboriosam corrupti aliquid.
      Deserunt quas temporibus cum, voluptates architecto velit possimus voluptatum quibusdam porro iure. Fuga,
      necessitatibus eum? Veniam dignissimos sunt, optio illo non quis exercitationem tempore cumque repellendus vero
      ipsa ut placeat.
      Necessitatibus explicabo non laudantium consectetur id beatae distinctio voluptas nesciunt laborum omnis, earum
      velit sit cupiditate? Nam voluptates sequi commodi, aspernatur corporis perferendis maiores quidem eum corrupti
      quisquam sint accusantium.
    </main>
  </section>
  <aside class="b"></aside>
  <aside class="c"></aside>
</body>

</html>

行内布局

多行布局第一行的下边框在下一行的上边框的下面。
多行内元素的padding，margin对文字的摆放不产生影响，唯一影响布局的就是字号和行高（font-size/line-height），也相当于只有行高影响，因为字号包含在行高里
非替换元素的内边距，边框和外边距对行内元素或其生成的框没有垂直效果，他们不会影响元素行内框的高度。(只有line-height影响)，但是水平方向上是有效果的。
替换元素的外边距和边框确实会影响该元素行内框的高度(margin-box)
行高如果不设置，是跟字体相关的，不同的字体有着不同的默认行高。
行内框在行中通过vertical-align属性可以改变垂直方向的位置，从而改变行框大小。
覆盖准则：行内盖块级，后面盖前面

基本术语

基线

绿色是基线，匿名文本卡在x字母的最下面那条线
在绘制行框时，可以假想有一个匿名文本存在，以确定该行的基线，所以基线下方是有一点留白的。

匿名文本

匿名文本是指所有未包含在行内元素中的字符串。< p > i am < em > so < /em > happy! < /p >中，i am和happy！都是匿名文本，空格也是匿名文本的一部分。

em框

em框在字体中定义，也称为字符框。实际的字形可能比其em框更高或更矮，font-size的值确定了各个em框的高度。

内容区

内容区有两种，一种是若干个em框连起来就是内容区，一种是替换元素的内容区，在替换元素中，内容区就是元素的固有高度再加上可能有的外边距，边框或内边距。

行间距

行间距是line-height和font-size的值之差，然后这个差实际上要分为两半，分别应用到内容区的顶部和底部，这两部分分别为半间距，行间距只应用于非替换元素。

行内框

这个框就是行高框。对于非替换元素，元素行内框的高度刚好等于line-height。对于替换元素，行内框的高度等于内容区的高度 (margin-box)

行框

行框就是包含行内框的最高点和最低点的最小框

行内格式化

所有元素都有一个line-height和基线，这两个值会显著的影响行内元素如何显示。
其次需要注意line-height的这个值是给里面的字用的，而不是给元素用的，如果p元素中间没有字，那么这个值就没用。
line-height的值是继承的，包括匿名文本也继承

行内非替换元素

行内框(布局框)由行高决定
为行内非替换元素设置宽，高无效，垂直方向的margin也无效，其它垂直属性可见但对布局无效，虽然可以设置，但是不占据空间。下面是border的例子，padding类似
行内元素的content-box，该高度是由默认行高度决定，而默认行高度取决于字体与字号，content-box就是由行高字体撑起来的。
当行内元素的行高设置为normal时候，其content-box即为它的行内框
行框的高度不一定是line-height 的值，行框的高度应该是大于等于该行所有元素的line-height的最大值，因为还有可能通过vertical-line改变行框的高度

vertical-align属性

是作用控制行内块级元素在一个行盒中垂直方向的位置
默认值是baseline，基线对齐（字母x的下方）
top：将元素行内框的顶端与包含该元素的行框的顶端对齐。
bottom：将元素行内框的底端与包含该元素的行框的底端对齐
middle：是匿名文本中字体的中间位置(比如匿名文本x的中点位置就是middle，并不是行框的中点)
百分比：相对于行高的百分比

font-size属性

在chorme浏览器中，字体的默认大小是16px，最小是12px，但是最小字号和默认字号都是可以配置的

font-family

可以继承，给body设置一次就可以了，设置的是文字的字体名称

font-weight

常见的取值：100~900，normal（默认情况下是400），bold（等于700）

font-style

设置文本的常规样式
常见的取值：normal，italic(斜体，通常会有专门的字体)，oblique(倾斜，仅仅是让文字倾斜)

color

设置文字颜色

background-color

设置文字前景(包括下划线等)颜色

line-height属性

在这里插入图片描述

行高就是一行文本所占据的高度，方便文本的阅读
行高正常来说是比em框要高一些的，行高的严格定义：两行文字基线之间的距离（设置了两行文字基线的距离就相当于设置了行高）
最常用的用法就是垂直居中显示：height和line-height值是相等的
这个属性注意一下继承方式，如果是百分比的话，是继承的父元素的行高的百分比，如果是数字，比如说line-height ： 2，这个不带单位不带百分号，就写数字，那么继承的元素如果font-size ： 30px，那么继承的元素的行高就是60px

行内替换元素

行内替换元素有固有的高度和宽度，布局框就是margin-box，基线就是margin-box的底部
这样的基线对齐会导致如果一行里只有图片的话，图片的最下面会有一小块空白，因为行内替换元素的margin-box是对准基线的
注意有固有高度的替换元素可能导致行框比正常要高，但是这不会改变行中任何元素的line-height值，只是图片把行高撑大了，不会改变line-height，虽然都叫做行高。
vertical-align的百分数值要相对于元素的line-height来计算。

行内块元素(inline-block)

从外面看，它就是个行内元素；从里面看，或者说它里面的元素，会认为自己处于一个块级元素里，这样就可以实现添加宽度高度都是可以的
看其自身的位置时候，是行内元素，遵循行内元素的布局方式；看其内部元素的摆放位置时，内部元素就认为自己在块元素里
行内框由margin-box决定
基线由最后一行内容的基线确定，无内容时以margin-box底部确定，触发BFC时也以margin-box底部确定
用行内块元素布局时的空格可以通过给父元素设置0字号来实现，然后将内部元素的font-size设置为normal

改变元素显示

通过display属性改变，值有none，inline，block，inline-block等
inline-block是一个行内块元素
行内块元素的自动宽度为：最宽不会比自身的包含块宽，最窄要跟自身的最宽的单词一样宽(以保证单词不折断)

white-space

在这里插入图片描述

行内块元素页面布局练习题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      margin: auto;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 0px;
    }
/*中间有空隙，设置font-size为0*/
    ul li {
      font-size: 16px;
      display: inline-block;
      width: 180px;
      height: 40px;
      border: 3px solid;
      box-sizing: border-box;
      margin-right: 30px;
      margin-bottom: 15px;
    }

    ul li:nth-child(3n) {
      margin-right: 0;
    }

  </style>
</head>

<body>
  <div>
    <ul>
      <li>Lorem.</li>
      <li>Quisquam.</li>
      <li>Possimus.</li>
      <li>Quam!</li>
      <li>Obcaecati?</li>
      <li>Esse.</li>
      <li>Minus?</li>
      <li>Inventore.</li>
      <li>Odit!</li>
      <li>Officiis.</li>
      <li>Sed.</li>
      <li>Doloribus.</li>
    </ul>
  </div>
</body>

</html>

邮箱布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      font-size: initial;
    }

    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
      min-width: 600px;
    }

    header {
      box-sizing: border-box;
      border: 1px solid;
      height: 100px;
    }

    div {
      font-size: 0;
      box-sizing: border-box;
      border: 1px solid;
      height: calc(100% - 100px);
    }

    div>* {
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid;
      vertical-align: top;
      overflow: auto;
    }

    aside {
      width: 150px;
    }

    main {
      width: calc(100% - 150px);
    }

  </style>
</head>

<body>
  <header></header>
  <div>
    <aside>Lorem ipsum dolor sit amet consectetur adipisicing elit. A doloribus rem nesciunt provident quas, fugiat
      asperiores nobis corrupti accusamus! Nisi, necessitatibus praesentium veritatis odit repellendus ad rem harum
      dolorum ullam.
      Quam earum asperiores culpa error laborum rerum voluptatum odit iusto atque, excepturi iure repudiandae ab dolores
      aut obcaecati tempora nemo officiis quia natus deleniti aperiam architecto. Beatae repudiandae eius nam.
      Rem, illo amet reprehenderit deleniti, sint porro nisi eligendi officiis similique officia blanditiis fugit quod
      vel eveniet, natus corrupti. Unde esse repellendus fuga illo exercitationem laboriosam ratione rem vitae atque?
      Minus deserunt explicabo sapiente. Repudiandae est rem in deleniti beatae enim autem atque! Numquam a modi
      possimus, error doloribus maxime accusantium repellendus atque laboriosam corporis earum autem amet animi cum.
      Unde dicta aut veritatis itaque nobis? Enim earum iusto nemo sed, excepturi nulla nesciunt reiciendis labore vel
      repellendus tempore laboriosam laborum officia obcaecati dolor molestias temporibus, corporis nostrum. Inventore,
      velit.
      Consequatur tenetur facere ducimus laudantium dolorum officiis nam eligendi laborum adipisci perferendis. Quam
      minima optio ad omnis nesciunt vel, aut aspernatur culpa exercitationem quae accusantium impedit recusandae
      distinctio voluptas maxime.
      Explicabo, temporibus eos voluptate aliquid esse dignissimos quaerat ducimus, exercitationem repellendus magni
      cum! Autem excepturi odit ad architecto provident, fuga voluptate quo iste veniam quod exercitationem hic eum?
      Optio, ad.
      Debitis, est tempore aliquid officiis quos iusto perferendis, cum enim sunt laudantium quidem sint sit illo
      numquam veritatis dolorem deleniti laborum? Voluptatem modi, harum labore voluptatibus et dignissimos impedit
      reprehenderit!
      Accusantium dolorem molestiae architecto. Quibusdam vel, aliquam temporibus necessitatibus asperiores provident
      autem at voluptatum beatae, debitis alias eligendi reprehenderit earum eaque, ullam nesciunt officia ab! Qui
      adipisci vitae corrupti aliquam?
      Autem repudiandae tempore, iusto sunt culpa enim ipsum sit quidem laudantium a nihil! Quos praesentium laborum
      odit voluptates, vitae consequatur, est veritatis, architecto sapiente cum nostrum dolor molestias. Dolorum,
      molestias.</aside>
    <main>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi voluptatum, nesciunt quos obcaecati iure,
      ipsam incidunt aliquam praesentium ipsum ut fugit beatae id quidem veritatis. Odio inventore hic dolor molestias.
      Voluptas officia necessitatibus praesentium harum veniam reiciendis eius repellat voluptatem, dolorum dicta magnam
      qui aperiam. Magni expedita nesciunt molestiae obcaecati dicta quidem est maxime. Rerum autem alias ex eveniet
      necessitatibus.
      Officiis architecto, doloremque praesentium commodi dolor consequatur nihil nostrum voluptatum rerum, ullam
      voluptatem iure cupiditate. Voluptatum nemo accusantium delectus eum? Dolorum nam reprehenderit odio repellat
      nihil similique, fuga dicta saepe.
      Numquam facere corrupti vel ex officia illo, earum cupiditate eveniet ut ullam fugit quos doloribus rem. Aut
      quibusdam at quisquam dolores, culpa nostrum, id suscipit accusantium magnam repudiandae eum sunt.
      Aspernatur quisquam hic iure perspiciatis earum. Cum assumenda aspernatur doloribus voluptate porro. Ipsam
      mollitia cumque officiis recusandae odit. Aliquid totam officia architecto, quaerat laborum iure porro rem
      obcaecati dolorum voluptate?
      Est ipsam esse voluptatibus reiciendis corporis iure eaque consequatur numquam culpa nisi quaerat maxime sit saepe
      deserunt cumque dolorem consectetur quam voluptas officiis, explicabo veritatis fugiat blanditiis ad error. Odit.
      Sapiente delectus laborum sed nostrum eius fuga, totam perspiciatis, omnis expedita inventore laboriosam natus
      mollitia ratione nisi distinctio et maiores vero fugiat aperiam corporis quisquam nulla magnam! Dignissimos, hic
      numquam?
      Quam maxime, illum veniam similique quos exercitationem voluptatem laborum ex incidunt, facere quasi impedit vitae
      enim! Facere dolores sint facilis quibusdam quo ex temporibus corporis dicta sed ut, incidunt commodi.
      Vero nisi quod, ratione pariatur totam excepturi libero inventore! Quis id nobis minus blanditiis dolor,
      laudantium quia earum impedit fuga ut, laborum harum et veniam ex non totam mollitia modi?
      Voluptatibus architecto dolore repudiandae quos animi ipsa sint quod esse quisquam sunt quia, voluptatem soluta
      perspiciatis saepe facilis minima facere accusantium, iste mollitia doloremque eveniet rem! Eos est ipsa facilis!
    </main>
  </div>
</body>

</html>

词典四列布局
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      font-size: initial;
    }

    html,
    body,
    section {
      height: 100%;
      margin: 0;
    }

    section {
      font-size: 0;
    }

    section>* {
      display: inline-block;
    }

    div {
      width: calc(100% - 450px);
      height: 100%;
    }

    header {
      height: 100px;
      overflow: auto;
    }

    main {
      height: calc(100% - 100px);
      overflow: auto;
    }

    aside {
      width: 150px;
      height: 100%;
      overflow: auto;
      background-color: pink;
      border: 3px solid;
      box-sizing: border-box;
    }

  </style>
</head>

<body>
  <section>
    <aside>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id culpa sed maxime totam mollitia, at enim
      obcaecati blanditiis vero ea consequatur perspiciatis iste vitae aspernatur quidem laborum neque rerum quas!
      Voluptates animi soluta dolor. Omnis ipsa perferendis voluptatum quia at natus recusandae ipsam aliquid
      repudiandae! Suscipit repellendus qui fugiat sint vitae illo sed enim, distinctio officiis sit, asperiores
      reprehenderit commodi!
      Non consectetur quod dignissimos dicta reiciendis odio voluptatem rem esse quam molestias necessitatibus expedita
      numquam quisquam repudiandae id earum qui, totam illo atque et vitae tempora facere accusamus. Eum, architecto.
      Aperiam nisi obcaecati non, veniam aspernatur illo aut expedita consequatur debitis dicta, quos tenetur inventore
      voluptas molestiae, quod odio eos magnam. At eum consequatur quod officiis modi provident molestias sed?
      Modi sunt dolor dignissimos laudantium, facilis nulla nemo autem unde cumque, architecto illum voluptas sapiente.
      Nemo, fugiat. Ducimus reiciendis exercitationem, nam similique, minima eaque facere, dolores officia libero itaque
      amet!
    </aside>
    <div>
      <header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi eaque mollitia assumenda illo sed
        repudiandae exercitationem ipsum ullam impedit consequuntur repellat corrupti qui deleniti doloribus, velit
        tempore enim tenetur asperiores.
        Doloribus voluptatibus aliquam mollitia magni quia culpa fuga, quod enim quisquam beatae excepturi sequi
        pariatur quam obcaecati quas explicabo, reiciendis inventore cupiditate aperiam eius dolor odit ut vel? Maxime,
        culpa!
      </header>
      <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque accusantium animi voluptas in tempora facere,
        nemo, et iste voluptate, sapiente obcaecati cumque. Eum sit, maxime laborum quas quisquam reprehenderit animi.
        Porro praesentium impedit beatae tenetur quisquam consequuntur voluptate omnis, nam ipsum eligendi amet, maiores
        deleniti quam eum, incidunt magnam aperiam quas. Tempora eius, esse cum debitis eveniet fugit quam eum.
        Officiis, reiciendis ipsum enim recusandae, ad fugiat commodi, cupiditate voluptatem quas est doloremque.
        Voluptatibus corporis quo sint tempora maxime at enim, aliquid libero quam voluptas, odit itaque. Soluta, eum
        reprehenderit!
        Laborum, iure? Placeat veritatis et sapiente eius maiores veniam praesentium quasi quibusdam quae impedit
        delectus adipisci in eligendi hic nostrum perferendis atque odit voluptatibus ratione, perspiciatis nobis fuga.
        Fugit, at.
        In itaque veritatis commodi libero, iusto, eveniet iure porro totam ratione odit sed ipsam quos similique
        doloremque harum debitis, eos consectetur? Quaerat ea vel quia hic placeat cupiditate beatae soluta.
        Sapiente hic incidunt magnam maiores, architecto vitae eveniet quos itaque provident similique saepe dolor
        praesentium soluta debitis id sunt minima, ex modi dolores perferendis veniam! Debitis saepe voluptatum maiores
        sit.
      </main>
    </div>
    <aside></aside>
    <aside></aside>
  </section>
</body>

</html>

CSS继承

如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性，和字体相关的属性都会继承
继承的是计算值，而不是设置值(设置值是2em，而计算值是32px，所以继承的是32px，而不是2em)
如果一个属性没有继承性，但是就想继承父元素的属性值，可以把子元素的属性值设置为inherit，例：border:inherit
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章