【CSS】QQ邮箱布局，词典四列布局，行内布局
❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：
文章目录
- 页面布局编写顺序(附带练习题)
- 行内布局
- 基本术语
- 基线
- 匿名文本
- em框
- 内容区
- 行间距
- 行内框
- 行框
- 行内格式化
- 行内非替换元素
- vertical-align属性
- line-height属性
- 基线和行高
- 增加框属性
- 行内替换元素
- 行内块元素(inline-block)
- 改变元素显示
- 行内块元素页面布局练习题
页面布局编写顺序(附带练习题)
- 八个字：从外向内，从上到下
<!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">
©
<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对文字的摆放不产生影响，唯一影响布局的就是字号和行高，也相当于只有行高影响，因为字号包含在行高里，只是content-box之间的依次排列
- 非替换元素的内边距，边框和外边距对行内元素或其生成的框没有垂直效果，他们不会影响元素行内框的高度。(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的值是继承的 ，包括匿名文本也继承
行内非替换元素
- 行内框(布局框)由行高决定
- 元素没有padding，border时的底色由字体，字号与normal行高决定，无法改变
- 为行内非替换元素设置宽，高无效，垂直方向的margin也无效，其它垂直属性可见但对布局无效。
- 行内元素的content-box，该高度是由默认行高度决定，而默认行高度取决于字体与字号，content-box就是由行高字体撑起来的。
- 当行内元素的行高设置为normal时候，其content-box即为它的行内框
- 行框的高度不一定是line-height 的值，行框的高度应该是大于等于该行所有元素的line-height的最大值，因为还有可能通过vertical-line改变行框的高度
vertical-align属性
- 基础值是baseline，基线对齐
- top：将元素行内框的顶端与包含该元素的行框的顶端对齐。
- bottom：将元素行内框的底端与包含该元素的行框的底端对齐
- text-top：将元素行内框的顶端与父元素内容区（该行匿名文本的字符框的顶端）的顶端对齐
- text-bottom：将元素行内框的底端与父元素内容区的底端对齐。
- middle：是匿名文本中字体的中间位置(比如匿名文本x的中点位置就是middle，并不是行框的中点)
- 百分比：相对于行高的百分比
line-height属性
- 这个属性注意一下继承方式，如果是百分比的话，是继承的父元素的行高的百分比，如果是数字，比如说line-height ： 2，这个不带单位不带百分号，就写数字，那么继承的元素如果font-size ： 30px，那么继承的元素的行高就是60px
基线和行高
- 各行框的具体高度取决于组成元素相互之间如何对齐，这种对齐很大程度上依赖于基线落在各个元素中的哪个位置，这个位置确定了行内框如何摆放。
- 基线在各em框中的位置对于不同的字体是不同的，这个信息内置在字体文件中。
增加框属性
- 内边距，外边距和边框都可以应用于行内非替换元素，行内元素的这些方面不会影响行框的高度。
- 行内元素的边框边界由font-size和字体而不是line-height控制。
- 注意改变内边距，外边距和边框并没有改变内容区的具体形状，还是那么大的框框。
行内替换元素
- 行内替换元素有固有的高度和宽度，布局框就是margin-box，基线就是margin-box的底部
- 这样的基线对齐会导致如果一行里只有图片的话，图片的最下面会有一小块空白，因为行内替换元素的margin-box是对准基线的
- 注意有固有高度的替换元素可能导致行框比正常要高，但是这不会改变行中任何元素的line-height值，只是图片把行高撑大了，不会改变line-height，虽然都叫做行高。
- vertical-align的百分数值要相对于元素的line-height来计算。
行内块元素(inline-block)
- 从外面看，它就是个行内元素；从里面看，或者说它里面的元素，会认为自己处于一个块级元素里，这样就可以实现添加宽度高度都是可以的
- 看其自身的位置时候，是行内元素，遵循行内元素的布局方式；看其内部元素的摆放位置时，内部元素就认为自己在块元素里；行内块元素触发了自身的BFC(但这个是不完全的BFC，因为会用最后一行的内容的基线作为自身的基线来对齐，所以会影响到外面。)
- inline-table/inline-flex/inline-grid/inline-block都同理
- 行内框由margin-box决定
- 基线由最后一行内容的基线确定，无内容时以margin-box底部确定，触发BFC时也以margin-box底部确定
- 用行内块元素布局时的空格可以通过给父元素设置0字号来实现， 然后将内部元素的font-size设置为normal
改变元素显示
- 通过display属性改变，值有none，inline，block，inline-block等
- inline-block是一个行内块元素
- 行内块元素的自动宽度为：最宽不会比自身的包含块宽，最窄要跟自身的最宽的单词一样宽(以保证单词不折断)
行内块元素页面布局练习题
<!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;
}
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>
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章