文章目录
@规则
at-rule：@规则、@语句、css语句、 css指令
- import
@import “路径”
表示导入另外一个css文件
可以直接将reset.css使用@指令导入到index.css里面，例如：
html里面：
<!DOCTYPE html>
<html lang="en">
<!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>
<link rel="stylesheet" href="./index.css">
</head>
<body>
</body>
</html>
css中：（注意：通常要放在第一行）
@import "reset.css";
- charset
@charset “utf-8”;
告诉浏览器该css文件，使用的字符编码集是utf-8，（注意：必须要写在第一行。）
web字体和图标
web字体
解决用户电脑上没有安装相应字体的问题。强制让用户下载该字体。
使用@font-face指令制作一个新字体。
用法：
<style>
/* 制作一个新字体，名字叫做晚安体 */
@font-face {
font-family: "good night";
src: url("./font/晚安体.ttf");
}
</style>
字体图标
www.iconfont.cn(阿里巴巴矢量图标库)
块级格式化上下文（BFC）
全称：Block Formatting Context 简称：BFC
他是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
- 常规流块盒
- 常规流块盒，在水平方向上，必须撑满包含块。
- 常规流块盒，在包含块的垂直方向上依次摆放。
- 常规流块盒，若外边距无缝相邻，则进行外边距合并。
- 常规流块盒，的自动高度和摆放位置，无视浮动元素。
- 渲染区域
- BFC渲染区域
这个区域是由某个HTML元素创建，以下元素会在其内部创建BFC区域： - 根元素 意味着，<HTML>元素创建的BFC区域，覆盖了网页中所有的元素。
- 浮动和绝对定位元素
- overflow不等于visible的块盒
- display：属性的元素
- 独立的渲染区域
- 不同的BFC区域，他们进行渲染时互不干扰。
- 创建BFC的元素，隔绝了它内部和外部的的联系，内部的渲染不会影响到外部。
具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素。
创建BFC的元素，它的边框盒不会与浮动元素重叠。
创建BFC的元素，不会和它的子元素进行外边距合并。
布局
多栏布局
两栏布局
<!DOCTYPE html>
<html lang="en">
<!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>
<link rel="stylesheet" href="./index.css">
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
background-color: lightblue;
width: 70%;
margin: 0 auto;
}
.left {
float: left;
width: 300px;
background-color: lightseagreen;
margin-right: 30px;
}
.main {
background-color: magenta;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, aliquid cumque? Maxime nisi dolores animi minima hic nulla repellendus, autem explicabo repellat impedit. Soluta natus aut odio dignissimos molestias deleniti nostrum reprehenderit aliquid
neque quasi necessitatibus impedit eveniet aspernatur odit earum, fuga a ea placeat ex est fugiat numquam dicta ipsum. Dolorem at libero dignissimos rerum porro animi architecto id sunt odio nam voluptatum pariatur inventore praesentium, unde
quidem voluptas eveniet nesciunt quasi nulla voluptates obcaecati magnam assumenda minus. Alias culpa nisi labore tenetur neque. Blanditiis debitis iusto ab, nisi atque distinctio suscipit nihil voluptas nobis quod voluptatem temporibus pariatur,
ex harum qui quidem, adipisci rem? Totam dolores quis libero debitis nobis dicta tenetur est, minus adipisci sapiente neque culpa eum obcaecati, aliquam deserunt, deleniti cumque ducimus! Dignissimos, excepturi libero et optio error provident
fugiat? Quis ducimus accusamus laudantium qui, totam quidem ratione dicta quia, debitis exercitationem, eaque dolorem mollitia quod praesentium molestias impedit libero nemo aliquid. Architecto vitae iusto velit et doloremque itaque vel harum
adipisci neque cum! Aliquid mollitia dignissimos esse, distinctio at maiores quia, temporibus corporis optio velit, totam adipisci quisquam. Modi iste nobis recusandae, nulla maxime autem fuga assumenda pariatur fugit saepe repudiandae quia
molestiae accusamus, rem in consequuntur et minima culpa nam illum animi voluptatum sed dignissimos? Qui, aliquam. Eligendi nesciunt consequuntur vero ut autem, blanditiis alias quia impedit tempora maxime. Laboriosam harum similique repellendus,
quisquam, dolorem, minima eligendi optio voluptates magnam ipsa sint adipisci unde. Soluta non fugiat nulla eum animi ut, sit debitis nemo voluptatum in sunt nam sed, quisquam illum at atque ipsa modi. Illum, officiis consectetur consequuntur
quis maiores hic, numquam officia exercitationem consequatur eos perferendis quibusdam commodi debitis labore animi aspernatur laboriosam accusamus ipsam, sunt eum rerum error. Minus voluptatibus voluptas, aspernatur molestias, praesentium
eos recusandae nam, ipsum fugit consequuntur unde. Sunt repudiandae maiores debitis corrupti blanditiis dolores repellendus hic facilis in eveniet aut, vel nemo, vitae doloribus fugiat saepe minima, pariatur reiciendis aspernatur numquam fugit.
Unde possimus quidem sequi quos alias, necessitatibus pariatur ratione ipsa et ipsum. Odio dolore adipisci pariatur. Recusandae qui quos ad error, sit nobis harum esse accusamus asperiores! Accusantium molestias unde, eveniet, eaque molestiae
sunt magni at ad nesciunt voluptatem suscipit dignissimos nobis quas recusandae. Dolorum dolores iure itaque possimus officia magnam nesciunt vero asperiores libero? Ut omnis sit architecto temporibus, obcaecati inventore velit accusamus sunt
possimus tenetur tempore voluptates aut. Ducimus, quisquam, in aspernatur ut, fugiat deleniti corrupti quas perspiciatis explicabo blanditiis nisi laudantium. In, debitis error aspernatur quia doloremque consequatur obcaecati numquam vel,
laboriosam, minus quo itaque esse eos. Tenetur doloribus tempore in eveniet aperiam? Odio vitae expedita nemo eligendi velit distinctio incidunt aspernatur fugit doloribus labore? Velit modi in placeat eos, nesciunt explicabo iusto quidem
exercitationem qui itaque voluptatem quasi consequatur ut ad adipisci architecto deserunt magni cumque quam optio asperiores ipsa nam. Ex facere animi ut quae repudiandae maiores eius sint eaque eum dolor! Sit praesentium, officia porro omnis
soluta deserunt provident pariatur et ut eum facilis dolorem, dolore laborum quam iste. Sint, laboriosam debitis. Exercitationem ipsum officia mollitia temporibus. Velit provident ut quod illum culpa voluptas, quia earum dolorum deserunt corporis
itaque! Deleniti consequuntur assumenda et at facere similique provident nostrum labore culpa ab corrupti voluptas exercitationem illum doloribus quisquam, blanditiis quas cum sed! Similique velit error id harum voluptatem tenetur hic voluptatum
perferendis, ea facilis mollitia nesciunt veritatis laborum corrupti voluptatibus maiores quod soluta excepturi aliquid officiis, omnis repudiandae esse labore. Saepe corporis cupiditate est magnam minima necessitatibus non exercitationem
vel et tempore totam animi in reprehenderit molestias itaque, quasi adipisci placeat consequatur ipsum. Modi magni illo velit expedita perspiciatis beatae laudantium suscipit quam fugiat nemo quasi ad iure dolore voluptate, dicta, ipsa enim
odio quos natus fugit praesentium? Harum, nisi officia molestiae provident optio quibusdam aperiam cupiditate officiis numquam saepe voluptatibus reiciendis quidem libero accusamus! Nam, saepe maiores, facilis perferendis facere sint et consequuntur
itaque alias magnam natus nesciunt ipsum libero odit rerum ipsam a iusto quos labore at pariatur, dolorem cum ab hic! Totam sequi excepturi eligendi beatae qui impedit! Aperiam pariatur laboriosam, provident repellendus reprehenderit harum
modi, vel totam quaerat labore necessitatibus nulla molestiae nisi, optio rem explicabo exercitationem. Quod beatae magnam sint delectus accusamus quas facilis odio illum repellendus, soluta nihil ullam aliquid reiciendis, unde voluptatem
optio. Id officia odit obcaecati consectetur sapiente? Animi quos cupiditate, ipsa reprehenderit deleniti laborum corrupti reiciendis minus. Quasi unde reiciendis consectetur incidunt perspiciatis voluptates, suscipit consequuntur vel provident
iste fugit ad amet quibusdam, nostrum perferendis, repudiandae voluptate mollitia? A praesentium nesciunt repellendus ex. Dignissimos, aut eos nostrum numquam voluptas voluptatibus nam rem deserunt excepturi quidem sapiente culpa totam. Tempore
quas nostrum ullam distinctio assumenda dolor repudiandae, harum laborum similique explicabo labore nisi ut sapiente ad saepe magni maxime laudantium quis nobis necessitatibus eum fuga impedit, numquam culpa! Veritatis dolore recusandae nostrum
eius sed aperiam cumque perferendis! Iste dolorum deleniti, animi, nostrum exercitationem quos perspiciatis alias libero rerum aut similique, asperiores consequuntur eveniet voluptatum itaque modi error in ut neque optio provident ullam! Modi
qui porro minus nobis velit itaque. Animi velit ullam saepe dolorem laborum, ad et explicabo accusantium possimus aliquam placeat similique reiciendis. Laborum officia modi necessitatibus qui est atque dolor corrupti, dolore fugiat, molestias
eligendi aspernatur tempora quod ipsa unde culpa minus similique facilis consequuntur repudiandae, nostrum quisquam. Optio enim omnis laborum, esse excepturi porro non, pariatur tempora facilis nam mollitia, illum iusto. Sapiente, architecto
magni pariatur ullam laboriosam ducimus minima eaque sit cum accusamus beatae harum nostrum ea earum commodi ratione blanditiis. Fugiat culpa in ipsa quis quos provident nam est, ducimus earum non modi totam nesciunt soluta dolorum dolores
eum. Delectus nihil, doloribus similique recusandae neque placeat eius iusto ex commodi accusantium enim cupiditate numquam deserunt! Accusantium voluptate voluptates odio facilis ad temporibus doloribus sunt minima ex, itaque debitis, cupiditate
delectus cum doloremque! Dolor odio officiis officia laboriosam quibusdam vel ad! Perferendis eaque alias odit doloribus pariatur, vel vitae ex odio recusandae laboriosam commodi voluptatem eos placeat ad maxime, labore nesciunt optio. Iste,
quisquam in!
</div>
<div class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ipsa sed necessitatibus reprehenderit amet, officiis quo minima facere officia accusamus labore repudiandae eveniet quisquam mollitia esse impedit a ab sequi voluptates saepe deserunt.
Vel nisi quam aliquid itaque distinctio possimus reiciendis inventore suscipit nemo ut. Accusamus eum ipsa quisquam quidem aperiam quibusdam debitis sequi maxime culpa cum deserunt fugiat consequatur deleniti rem animi, saepe atque harum nisi
sapiente asperiores soluta, eveniet, provident quasi. Velit vel cupiditate beatae deleniti eos quisquam ipsum iure, hic amet libero eligendi qui? Atque, iure sunt, voluptatum suscipit assumenda, necessitatibus iste ducimus esse debitis tempora
fugit incidunt? Obcaecati eos harum error quibusdam, quaerat minus, nulla aperiam aliquam ducimus voluptate accusantium neque temporibus, maiores quam tenetur exercitationem eius voluptatum eveniet consequatur aliquid vitae rerum. Nostrum
non nisi, asperiores perferendis aperiam tenetur vero. Veritatis fugiat quae optio deleniti facilis, labore nemo, harum similique expedita laborum sequi enim magni impedit consectetur explicabo ad aperiam facere, unde saepe maxime nam obcaecati
consequuntur nihil! Eaque quia maxime sequi omnis, atque laudantium quasi dolores velit nisi rerum doloremque eum, eveniet aliquam totam distinctio, neque voluptatibus. In asperiores excepturi voluptatum deserunt nesciunt eos beatae eligendi
et quisquam ut quidem eius quia amet omnis quae alias debitis perspiciatis itaque, ratione nobis nostrum enim voluptate. Necessitatibus tempore quia sapiente odit blanditiis minima fuga. Vero nam voluptatibus autem incidunt magni magnam, debitis
deserunt, nulla explicabo sit quibusdam quis. Beatae, soluta totam! Eum harum, nihil voluptas incidunt adipisci nobis dolores illum? Harum maxime labore distinctio molestiae corrupti inventore dolorem dignissimos voluptates praesentium omnis
debitis possimus voluptas animi quo voluptatum asperiores autem, earum, itaque atque eligendi quidem optio tempore dolore. Soluta ut quas nemo voluptatibus nihil architecto delectus vitae earum. Eius fugit corrupti voluptatum vitae, debitis
vel laudantium, voluptates aspernatur dicta assumenda facere. Consequuntur quisquam sequi ratione earum fugit magni totam dicta nihil minus delectus quae natus harum maiores, hic eligendi ab voluptatibus. Architecto eveniet non totam exercitationem
assumenda, recusandae voluptas impedit saepe beatae quo laudantium dolores! Pariatur quo voluptas reprehenderit repellat alias, ratione cum quos sunt, delectus consectetur ab ipsam veniam atque molestias harum repudiandae magni neque iste
animi nobis, quasi sint suscipit. Autem laudantium corrupti architecto iste quidem nemo officia corporis eius illo pariatur eum incidunt, blanditiis fugit eligendi inventore! Quod alias minima voluptatem cumque neque aspernatur eligendi voluptatibus
nobis obcaecati placeat libero numquam architecto accusamus rerum magni, dicta iusto! Illo nisi eum vitae earum velit placeat cumque saepe reprehenderit doloribus deleniti obcaecati a, qui, ipsum provident dolorum libero quam maxime magni
reiciendis possimus esse dolore. Non minima iure deserunt dignissimos dolores at nam atque asperiores dicta, accusamus nobis. Nesciunt voluptatum nostrum nisi perferendis? Doloribus quidem excepturi facere amet neque quam repellat ut nostrum
aspernatur? Nobis sit dolores expedita ea molestiae, in molestias, labore aliquid debitis eum eveniet mollitia repellat dolorem officiis quos neque voluptatem iure odio atque, praesentium nesciunt laboriosam distinctio. Aperiam sint ducimus
eius vero cupiditate animi fugit odit corrupti laborum minima facilis, laudantium laboriosam doloremque, ipsum magnam voluptatem incidunt. Adipisci dolor autem ratione asperiores sit veniam itaque harum mollitia illo iste laboriosam, aut,
similique pariatur obcaecati exercitationem rerum incidunt accusantium ipsum dolore. Quasi, suscipit vel deserunt voluptate facilis iste nam dignissimos saepe, labore aut ullam modi doloribus accusamus laboriosam. Placeat sint aut repellendus,
sapiente mollitia iusto dolorum minima itaque dolorem eius eaque delectus quasi nesciunt libero natus dolor enim sunt ab explicabo autem. Labore neque rem nostrum eaque fugit impedit corporis, obcaecati possimus voluptatem nobis assumenda
officia molestias illo a laborum. Consequatur quis perspiciatis molestiae recusandae ratione quaerat ab quam, quisquam voluptatum veniam culpa odit maxime quod labore placeat. Ipsa eum incidunt vitae porro doloremque quis excepturi, nam asperiores,
impedit temporibus eligendi exercitationem architecto placeat veritatis repudiandae mollitia laudantium illum consequatur. Qui corrupti fugit nam iste officiis ratione, animi voluptatibus autem doloremque, temporibus soluta quaerat. Officia,
doloremque deserunt! Temporibus consectetur fuga deleniti eum quaerat iusto similique dignissimos tenetur cumque, illo cupiditate odit consequatur, perferendis dolores minima obcaecati impedit, ex nemo commodi! Aut quisquam nesciunt molestias
tempore sit officia, et ex ad labore quia voluptatibus libero ea similique sequi laborum corporis nam iure mollitia cum ipsam aliquam! Laboriosam incidunt sequi aperiam autem ad. Vel omnis vero maxime neque debitis aliquid odit aperiam ullam,
totam ab facilis suscipit, quas officiis. Doloremque quos molestiae delectus facilis voluptate, ullam aliquam! Tenetur maiores at in dicta repellendus doloribus commodi quidem nemo magni, earum sit dolor voluptas beatae inventore rem dolorem
repellat. Nobis provident odit quisquam eaque ea voluptatem alias possimus dolores excepturi pariatur deserunt cum ducimus debitis eligendi repudiandae laborum, omnis iste ad sequi modi earum, molestiae vitae beatae delectus? Illum rerum corporis
sapiente nihil ex tempore repellat architecto, pariatur perspiciatis! Praesentium earum tempora reprehenderit odit, dolorem magnam repellat, illo maiores neque, quo ipsum odio quisquam esse delectus? Dolores explicabo, aut maiores nostrum
blanditiis reprehenderit cumque doloribus dolor corporis voluptates voluptatum aperiam? Laborum ab quidem nostrum maxime repudiandae deleniti, voluptate, eveniet suscipit quod explicabo, obcaecati optio sunt? Sit maiores fugit reiciendis quas
quibusdam? Similique debitis maiores neque soluta veniam dolor sed voluptas, autem vel incidunt veritatis in, quam magni praesentium, voluptate tempore quos quas sapiente aliquam eos ex optio. Illum minus assumenda dolore adipisci corporis,
exercitationem mollitia modi enim velit error eaque recusandae cumque laboriosam quod alias, voluptatum, harum amet libero! Debitis quis fugiat quasi? Possimus facilis eos, pariatur officia repudiandae, voluptatem odio expedita, eaque incidunt
delectus molestias alias tempore veritatis commodi minima recusandae? Eaque recusandae ab dicta repellat voluptas repudiandae id corrupti cumque ullam quisquam soluta natus qui vitae a perferendis temporibus, fugiat eius praesentium sequi
cupiditate tenetur esse. Nisi harum eligendi officiis qui suscipit quaerat, fuga quas quia consequuntur voluptates facilis delectus, ipsum saepe quod adipisci sit repellat quos voluptate earum in inventore, provident alias ut. Consectetur
odit repellendus consequuntur similique officiis alias blanditiis culpa earum aspernatur dicta ad dolor quibusdam repudiandae dolores maxime ea beatae, fugiat cum distinctio harum explicabo adipisci tempora error quia. Ipsam officia quasi
molestiae delectus dolorum consequuntur quae perspiciatis recusandae, odio perferendis minima optio cum quod blanditiis pariatur quia expedita deserunt.</div>
</div>
</body>
</html>
三栏布局
<!DOCTYPE html>
<html lang="en">
<!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>
<link rel="stylesheet" href="./index.css">
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
background-color: lightblue;
width: 70%;
margin: 0 auto;
padding: 30px;
min-width: 800px;
}
.left {
float: left;
width: 300px;
background-color: lightseagreen;
margin-right: 30px;
}
.right {
float: right;
background-color: gainsboro;
width: 300px;
margin-left: 30px;
}
.main {
background-color: magenta;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, aliquid cumque? Maxime nisi dolores animi minima hic nulla repellendus, autem explicabo repellat impedit. Soluta natus aut odio dignissimos molestias deleniti nostrum reprehenderit aliquid
neque quasi necessitatibus impedit eveniet aspernatur odit earum, fuga a ea placeat ex est fugiat numquam dicta ipsum. Dolorem at libero dignissimos rerum porro animi architecto id sunt odio nam voluptatum pariatur inventore praesentium, unde
quidem voluptas eveniet nesciunt quasi nulla voluptates obcaecati magnam assumenda minus. Alias culpa nisi labore tenetur neque. Blanditiis debitis iusto ab, nisi atque distinctio suscipit nihil voluptas nobis quod voluptatem temporibus pariatur,
ex harum qui quidem, adipisci rem? Totam dolores quis libero debitis nobis dicta tenetur est, minus adipisci sapiente neque culpa eum obcaecati, aliquam deserunt, deleniti cumque ducimus! Dignissimos, excepturi libero et optio error provident
fugiat? Quis ducimus accusamus laudantium qui, totam quidem ratione dicta quia, debitis exercitationem, eaque dolorem mollitia quod praesentium molestias impedit libero nemo aliquid. Architecto vitae iusto velit et doloremque itaque vel harum
adipisci neque cum! Aliquid mollitia dignissimos esse, distinctio at maiores quia, temporibus corporis optio velit, totam adipisci quisquam. Modi iste nobis recusandae, nulla maxime autem fuga assumenda pariatur fugit saepe repudiandae quia
molestiae accusamus, rem in consequuntur et minima culpa nam illum animi voluptatum sed dignissimos? Qui, aliquam. Eligendi nesciunt consequuntur vero ut autem, blanditiis alias quia impedit tempora maxime. Laboriosam harum similique repellendus,
quisquam, dolorem, minima eligendi optio voluptates magnam ipsa sint adipisci unde. Soluta non fugiat nulla eum animi ut, sit debitis nemo voluptatum in sunt nam sed, quisquam illum at atque ipsa modi. Illum, officiis consectetur consequuntur
quis maiores hic, numquam officia exercitationem consequatur eos perferendis quibusdam commodi debitis labore animi aspernatur laboriosam accusamus ipsam, sunt eum rerum error. Minus voluptatibus voluptas, aspernatur molestias, praesentium
eos recusandae nam, ipsum fugit consequuntur unde. Sunt repudiandae maiores debitis corrupti blanditiis dolores repellendus hic facilis in eveniet aut, vel nemo, vitae doloribus fugiat saepe minima, pariatur reiciendis aspernatur numquam fugit.
Unde possimus quidem sequi quos alias, necessitatibus pariatur ratione ipsa et ipsum. Odio dolore adipisci pariatur. Recusandae qui quos ad error, sit nobis harum esse accusamus asperiores! Accusantium molestias unde, eveniet, eaque molestiae
sunt magni at ad nesciunt voluptatem suscipit dignissimos nobis quas recusandae. Dolorum dolores iure itaque possimus officia magnam nesciunt vero asperiores libero? Ut omnis sit architecto temporibus, obcaecati inventore velit accusamus sunt
possimus tenetur tempore voluptates aut. Ducimus, quisquam, in aspernatur ut, fugiat deleniti corrupti quas perspiciatis explicabo blanditiis nisi laudantium. In, debitis error aspernatur quia doloremque consequatur obcaecati numquam vel,
laboriosam, minus quo itaque esse eos. Tenetur doloribus tempore in eveniet aperiam? Odio vitae expedita nemo eligendi velit distinctio incidunt aspernatur fugit doloribus labore? Velit modi in placeat eos, nesciunt explicabo iusto quidem
exercitationem qui itaque voluptatem quasi consequatur ut ad adipisci architecto deserunt magni cumque quam optio asperiores ipsa nam. Ex facere animi ut quae repudiandae maiores eius sint eaque eum dolor! Sit praesentium, officia porro omnis
soluta deserunt provident pariatur et ut eum facilis dolorem, dolore laborum quam iste. Sint, laboriosam debitis. Exercitationem ipsum officia mollitia temporibus. Velit provident ut quod illum culpa voluptas, quia earum dolorum deserunt corporis
itaque! Deleniti consequuntur assumenda et at facere similique provident nostrum labore culpa ab corrupti voluptas exercitationem illum doloribus quisquam, blanditiis quas cum sed! Similique velit error id harum voluptatem tenetur hic voluptatum
perferendis, ea facilis mollitia nesciunt veritatis laborum corrupti voluptatibus maiores quod soluta excepturi aliquid officiis, omnis repudiandae esse labore. Saepe corporis cupiditate est magnam minima necessitatibus non exercitationem
vel et tempore totam animi in reprehenderit molestias itaque, quasi adipisci placeat consequatur ipsum. Modi magni illo velit expedita perspiciatis beatae laudantium suscipit quam fugiat nemo quasi ad iure dolore voluptate, dicta, ipsa enim
odio quos natus fugit praesentium? Harum, nisi officia molestiae provident optio quibusdam aperiam cupiditate officiis numquam saepe voluptatibus reiciendis quidem libero accusamus! Nam, saepe maiores, facilis perferendis facere sint et consequuntur
itaque alias magnam natus nesciunt ipsum libero odit rerum ipsam a iusto quos labore at pariatur, dolorem cum ab hic! Totam sequi excepturi eligendi beatae qui impedit! Aperiam pariatur laboriosam, provident repellendus reprehenderit harum
modi, vel totam quaerat labore necessitatibus nulla molestiae nisi, optio rem explicabo exercitationem. Quod beatae magnam sint delectus accusamus quas facilis odio illum repellendus, soluta nihil ullam aliquid reiciendis, unde voluptatem
optio. Id officia odit obcaecati consectetur sapiente? Animi quos cupiditate, ipsa reprehenderit deleniti laborum corrupti reiciendis minus. Quasi unde reiciendis consectetur incidunt perspiciatis voluptates, suscipit consequuntur vel provident
iste fugit ad amet quibusdam, nostrum perferendis, repudiandae voluptate mollitia? A praesentium nesciunt repellendus ex. Dignissimos, aut eos nostrum numquam voluptas voluptatibus nam rem deserunt excepturi quidem sapiente culpa totam. Tempore
quas nostrum ullam distinctio assumenda dolor repudiandae, harum laborum similique explicabo labore nisi ut sapiente ad saepe magni maxime laudantium quis nobis necessitatibus eum fuga impedit, numquam culpa! Veritatis dolore recusandae nostrum
eius sed aperiam cumque perferendis! Iste dolorum deleniti, animi, nostrum exercitationem quos perspiciatis alias libero rerum aut similique, asperiores consequuntur eveniet voluptatum itaque modi error in ut neque optio provident ullam! Modi
qui porro minus nobis velit itaque. Animi velit ullam saepe dolorem laborum, ad et explicabo accusantium possimus aliquam placeat similique reiciendis. Laborum officia modi necessitatibus qui est atque dolor corrupti, dolore fugiat, molestias
eligendi aspernatur tempora quod ipsa unde culpa minus similique facilis consequuntur repudiandae, nostrum quisquam. Optio enim omnis laborum, esse excepturi porro non, pariatur tempora facilis nam mollitia, illum iusto. Sapiente, architecto
magni pariatur ullam laboriosam ducimus minima eaque sit cum accusamus beatae harum nostrum ea earum commodi ratione blanditiis. Fugiat culpa in ipsa quis quos provident nam est, ducimus earum non modi totam nesciunt soluta dolorum dolores
eum. Delectus nihil, doloribus similique recusandae neque placeat eius iusto ex commodi accusantium enim cupiditate numquam deserunt! Accusantium voluptate voluptates odio facilis ad temporibus doloribus sunt minima ex, itaque debitis, cupiditate
delectus cum doloremque! Dolor odio officiis officia laboriosam quibusdam vel ad! Perferendis eaque alias odit doloribus pariatur, vel vitae ex odio recusandae laboriosam commodi voluptatem eos placeat ad maxime, labore nesciunt optio. Iste,
quisquam in!
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi
veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis
eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente
exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore
unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error
tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea
aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat
perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe
nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus.
Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos,
provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis
deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi
aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat
molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore
nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis
dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi
veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis
eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente
exercitationem in corrupti iure sunt.
</div>
<div class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ipsa sed necessitatibus reprehenderit amet, officiis quo minima facere officia accusamus labore repudiandae eveniet quisquam mollitia esse impedit a ab sequi voluptates saepe deserunt.
Vel nisi quam aliquid itaque distinctio possimus reiciendis inventore suscipit nemo ut. Accusamus eum ipsa quisquam quidem aperiam quibusdam debitis sequi maxime culpa cum deserunt fugiat consequatur deleniti rem animi, saepe atque harum nisi
sapiente asperiores soluta, eveniet, provident quasi. Velit vel cupiditate beatae deleniti eos quisquam ipsum iure, hic amet libero eligendi qui? Atque, iure sunt, voluptatum suscipit assumenda, necessitatibus iste ducimus esse debitis tempora
fugit incidunt? Obcaecati eos harum error quibusdam, quaerat minus, nulla aperiam aliquam ducimus voluptate accusantium neque temporibus, maiores quam tenetur exercitationem eius voluptatum eveniet consequatur aliquid vitae rerum. Nostrum
non nisi, asperiores perferendis aperiam tenetur vero. Veritatis fugiat quae optio deleniti facilis, labore nemo, harum similique expedita laborum sequi enim magni impedit consectetur explicabo ad aperiam facere, unde saepe maxime nam obcaecati
consequuntur nihil! Eaque quia maxime sequi omnis, atque laudantium quasi dolores velit nisi rerum doloremque eum, eveniet aliquam totam distinctio, neque voluptatibus. In asperiores excepturi voluptatum deserunt nesciunt eos beatae eligendi
et quisquam ut quidem eius quia amet omnis quae alias debitis perspiciatis itaque, ratione nobis nostrum enim voluptate. Necessitatibus tempore quia sapiente odit blanditiis minima fuga. Vero nam voluptatibus autem incidunt magni magnam, debitis
deserunt, nulla explicabo sit quibusdam quis. Beatae, soluta totam! Eum harum, nihil voluptas incidunt adipisci nobis dolores illum? Harum maxime labore distinctio molestiae corrupti inventore dolorem dignissimos voluptates praesentium omnis
debitis possimus voluptas animi quo voluptatum asperiores autem, earum, itaque atque eligendi quidem optio tempore dolore. Soluta ut quas nemo voluptatibus nihil architecto delectus vitae earum. Eius fugit corrupti voluptatum vitae, debitis
vel laudantium, voluptates aspernatur dicta assumenda facere. Consequuntur quisquam sequi ratione earum fugit magni totam dicta nihil minus delectus quae natus harum maiores, hic eligendi ab voluptatibus. Architecto eveniet non totam exercitationem
assumenda, recusandae voluptas impedit saepe beatae quo laudantium dolores! Pariatur quo voluptas reprehenderit repellat alias, ratione cum quos sunt, delectus consectetur ab ipsam veniam atque molestias harum repudiandae magni neque iste
animi nobis, quasi sint suscipit. Autem laudantium corrupti architecto iste quidem nemo officia corporis eius illo pariatur eum incidunt, blanditiis fugit eligendi inventore! Quod alias minima voluptatem cumque neque aspernatur eligendi voluptatibus
nobis obcaecati placeat libero numquam architecto accusamus rerum magni, dicta iusto! Illo nisi eum vitae earum velit placeat cumque saepe reprehenderit doloribus deleniti obcaecati a, qui, ipsum provident dolorum libero quam maxime magni
reiciendis possimus esse dolore. Non minima iure deserunt dignissimos dolores at nam atque asperiores dicta, accusamus nobis. Nesciunt voluptatum nostrum nisi perferendis? Doloribus quidem excepturi facere amet neque quam repellat ut nostrum
aspernatur? Nobis sit dolores expedita ea molestiae, in molestias, labore aliquid debitis eum eveniet mollitia repellat dolorem officiis quos neque voluptatem iure odio atque, praesentium nesciunt laboriosam distinctio. Aperiam sint ducimus
eius vero cupiditate animi fugit odit corrupti laborum minima facilis, laudantium laboriosam doloremque, ipsum magnam voluptatem incidunt. Adipisci dolor autem ratione asperiores sit veniam itaque harum mollitia illo iste laboriosam, aut,
similique pariatur obcaecati exercitationem rerum incidunt accusantium ipsum dolore. Quasi, suscipit vel deserunt voluptate facilis iste nam dignissimos saepe, labore aut ullam modi doloribus accusamus laboriosam. Placeat sint aut repellendus,
sapiente mollitia iusto dolorum minima itaque dolorem eius eaque delectus quasi nesciunt libero natus dolor enim sunt ab explicabo autem. Labore neque rem nostrum eaque fugit impedit corporis, obcaecati possimus voluptatem nobis assumenda
officia molestias illo a laborum. Consequatur quis perspiciatis molestiae recusandae ratione quaerat ab quam, quisquam voluptatum veniam culpa odit maxime quod labore placeat. Ipsa eum incidunt vitae porro doloremque quis excepturi, nam asperiores,
impedit temporibus eligendi exercitationem architecto placeat veritatis repudiandae mollitia laudantium illum consequatur. Qui corrupti fugit nam iste officiis ratione, animi voluptatibus autem doloremque, temporibus soluta quaerat. Officia,
doloremque deserunt! Temporibus consectetur fuga deleniti eum quaerat iusto similique dignissimos tenetur cumque, illo cupiditate odit consequatur, perferendis dolores minima obcaecati impedit, ex nemo commodi! Aut quisquam nesciunt molestias
tempore sit officia, et ex ad labore quia voluptatibus libero ea similique sequi laborum corporis nam iure mollitia cum ipsam aliquam! Laboriosam incidunt sequi aperiam autem ad. Vel omnis vero maxime neque debitis aliquid odit aperiam ullam,
totam ab facilis suscipit, quas officiis. Doloremque quos molestiae delectus facilis voluptate, ullam aliquam! Tenetur maiores at in dicta repellendus doloribus commodi quidem nemo magni, earum sit dolor voluptas beatae inventore rem dolorem
repellat. Nobis provident odit quisquam eaque ea voluptatem alias possimus dolores excepturi pariatur deserunt cum ducimus debitis eligendi repudiandae laborum, omnis iste ad sequi modi earum, molestiae vitae beatae delectus? Illum rerum corporis
sapiente nihil ex tempore repellat architecto, pariatur perspiciatis! Praesentium earum tempora reprehenderit odit, dolorem magnam repellat, illo maiores neque, quo ipsum odio quisquam esse delectus? Dolores explicabo, aut maiores nostrum
blanditiis reprehenderit cumque doloribus dolor corporis voluptates voluptatum aperiam? Laborum ab quidem nostrum maxime repudiandae deleniti, voluptate, eveniet suscipit quod explicabo, obcaecati optio sunt? Sit maiores fugit reiciendis quas
quibusdam? Similique debitis maiores neque soluta veniam dolor sed voluptas, autem vel incidunt veritatis in, quam magni praesentium, voluptate tempore quos quas sapiente aliquam eos ex optio. Illum minus assumenda dolore adipisci corporis,
exercitationem mollitia modi enim velit error eaque recusandae cumque laboriosam quod alias, voluptatum, harum amet libero! Debitis quis fugiat quasi? Possimus facilis eos, pariatur officia repudiandae, voluptatem odio expedita, eaque incidunt
delectus molestias alias tempore veritatis commodi minima recusandae? Eaque recusandae ab dicta repellat voluptas repudiandae id corrupti cumque ullam quisquam soluta natus qui vitae a perferendis temporibus, fugiat eius praesentium sequi
cupiditate tenetur esse. Nisi harum eligendi officiis qui suscipit quaerat, fuga quas quia consequuntur voluptates facilis delectus, ipsum saepe quod adipisci sit repellat quos voluptate earum in inventore, provident alias ut. Consectetur
odit repellendus consequuntur similique officiis alias blanditiis culpa earum aspernatur dicta ad dolor quibusdam repudiandae dolores maxime ea beatae, fugiat cum distinctio harum explicabo adipisci tempora error quia. Ipsam officia quasi
molestiae delectus dolorum consequuntur quae perspiciatis recusandae, odio perferendis minima optio cum quod blanditiis pariatur quia expedita deserunt.</div>
</div>
</body>
</html>
等高
- css3弹性盒
- js控制
- 伪等高
这里使用一种方法：伪等高。
<!DOCTYPE html>
<html lang="en">
<!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>
<link rel="stylesheet" href="./index.css">
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
background-color: lightblue;
width: 70%;
margin: 0 auto;
padding-top: 30px;
min-width: 800px;
overflow: hidden;
}
.left {
float: left;
width: 300px;
background-color: lightseagreen;
margin-right: 30px;
height: 10000px;
margin-bottom: -9990px;
padding-bottom: 30px;
}
.right {
float: right;
background-color: gainsboro;
width: 300px;
margin-left: 30px;
height: 10000px;
margin-bottom: -9990px;
}
.main {
background-color: magenta;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, aliquid cumque? Maxime nisi dolores animi minima hic nulla repellendus, autem explicabo repellat impedit. Soluta natus aut odio dignissimos molestias deleniti nostrum reprehenderit aliquid
neque quasi necessitatibus impedit eveniet aspernatur odit earum, fuga a ea placeat ex est fugiat numquam dicta ipsum. Dolorem at libero dignissimos rerum porro animi architecto id sunt odio nam voluptatum pariatur inventore praesentium, unde
quidem voluptas eveniet nesciunt quasi nulla voluptates obcaecati magnam assumenda minus. Alias culpa nisi labore tenetur neque. Blanditiis debitis iusto ab, nisi atque distinctio suscipit nihil voluptas nobis quod voluptatem temporibus pariatur,
ex harum qui quidem, adipisci rem? Totam dolores quis libero debitis nobis dicta tenetur est, minus adipisci sapiente neque culpa eum obcaecati, aliquam deserunt, deleniti cumque ducimus! Dignissimos, excepturi libero et optio error provident
fugiat? Quis ducimus accusamus laudantium qui, totam quidem ratione dicta quia, debitis exercitationem, eaque dolorem mollitia quod praesentium molestias impedit libero nemo aliquid. Architecto vitae iusto velit et doloremque itaque vel harum
adipisci neque cum! Aliquid mollitia dignissimos esse, distinctio at maiores quia, temporibus corporis optio velit, totam adipisci quisquam. Modi iste nobis recusandae, nulla maxime autem fuga assumenda pariatur fugit saepe repudiandae quia
molestiae accusamus, rem in consequuntur et minima culpa nam illum animi voluptatum sed dignissimos? Qui, aliquam. Eligendi nesciunt consequuntur vero ut autem, blanditiis alias quia impedit tempora maxime. Laboriosam harum similique repellendus,
quisquam, dolorem, minima eligendi optio voluptates magnam ipsa sint adipisci unde. Soluta non fugiat nulla eum animi ut, sit debitis nemo voluptatum in sunt nam sed, quisquam illum at atque ipsa modi. Illum, officiis consectetur consequuntur
quis maiores hic, numquam officia exercitationem consequatur eos perferendis quibusdam commodi debitis labore animi aspernatur laboriosam accusamus ipsam, sunt eum rerum error. Minus voluptatibus voluptas, aspernatur molestias, praesentium
eos recusandae nam, ipsum fugit consequuntur unde. Sunt repudiandae maiores debitis corrupti blanditiis dolores repellendus hic facilis in eveniet aut, vel nemo, vitae doloribus fugiat saepe minima, pariatur reiciendis aspernatur numquam fugit.
Unde possimus quidem sequi quos alias, necessitatibus pariatur ratione ipsa et ipsum. Odio dolore adipisci pariatur. Recusandae qui quos ad error, sit nobis harum esse accusamus asperiores! Accusantium molestias unde, eveniet, eaque molestiae
sunt magni at ad nesciunt voluptatem suscipit dignissimos nobis quas recusandae. Dolorum dolores iure itaque possimus officia magnam nesciunt vero asperiores libero? Ut omnis sit architecto temporibus, obcaecati inventore velit accusamus sunt
possimus tenetur tempore voluptates aut. Ducimus, quisquam, in aspernatur ut, fugiat deleniti corrupti quas perspiciatis explicabo blanditiis nisi laudantium. In, debitis error aspernatur quia doloremque consequatur obcaecati numquam vel,
laboriosam, minus quo itaque esse eos. Tenetur doloribus tempore in eveniet aperiam? Odio vitae expedita nemo eligendi velit distinctio incidunt aspernatur fugit doloribus labore? Velit modi in placeat eos, nesciunt explicabo iusto quidem
exercitationem qui itaque voluptatem quasi consequatur ut ad adipisci architecto deserunt magni cumque quam optio asperiores ipsa nam. Ex facere animi ut quae repudiandae maiores eius sint eaque eum dolor! Sit praesentium, officia porro omnis
soluta deserunt provident pariatur et ut eum facilis dolorem, dolore laborum quam iste. Sint, laboriosam debitis. Exercitationem ipsum officia mollitia temporibus. Velit provident ut quod illum culpa voluptas, quia earum dolorum deserunt corporis
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi
veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis
eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente
exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore
unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error
tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea
aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat
perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe
nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus.
Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente exercitationem in corrupti iure sunt.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos,
</div>
<div class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ipsa sed necessitatibus reprehenderit amet, officiis quo minima facere officia accusamus labore repudiandae eveniet quisquam mollitia esse impedit a ab sequi voluptates saepe deserunt.
Vel nisi quam aliquid itaque distinctio possimus reiciendis inventore suscipit nemo ut. Accusamus eum ipsa quisquam quidem aperiam quibusdam debitis sequi maxime culpa cum deserunt fugiat consequatur deleniti rem animi, saepe atque harum nisi
sapiente asperiores soluta, eveniet, provident quasi. Velit vel cupiditate beatae deleniti eos quisquam ipsum iure, hic amet libero eligendi qui? Atque, iure sunt, voluptatum suscipit assumenda, necessitatibus iste ducimus esse debitis tempora
fugit incidunt? Obcaecati eos harum error quibusdam, quaerat minus, nulla aperiam aliquam ducimus voluptate accusantium neque temporibus, maiores quam tenetur exercitationem eius voluptatum eveniet consequatur aliquid vitae rerum. Nostrum
non nisi, asperiores perferendis aperiam tenetur vero. Veritatis fugiat quae optio deleniti facilis, labore nemo, harum similique expedita laborum sequi enim magni impedit consectetur explicabo ad aperiam facere, unde saepe maxime nam obcaecati
consequuntur nihil! Eaque quia maxime sequi omnis, atque laudantium quasi dolores velit nisi rerum doloremque eum, eveniet aliquam totam distinctio, neque voluptatibus. In asperiores excepturi voluptatum deserunt nesciunt eos beatae eligendi
et quisquam ut quidem eius quia amet omnis quae alias debitis perspiciatis itaque, ratione nobis nostrum enim voluptate. Necessitatibus tempore quia sapiente odit blanditiis minima fuga. Vero nam voluptatibus autem incidunt magni magnam, debitis
deserunt, nulla explicabo sit quibusdam quis. Beatae, soluta totam! Eum harum, nihil voluptas incidunt adipisci nobis dolores illum? Harum maxime labore distinctio molestiae corrupti inventore dolorem dignissimos voluptates praesentium omnis
debitis possimus voluptas animi quo voluptatum asperiores autem, earum, itaque atque eligendi quidem optio tempore dolore. Soluta ut quas nemo voluptatibus nihil architecto delectus vitae earum. Eius fugit corrupti voluptatum vitae, debitis
vel laudantium, voluptates aspernatur dicta assumenda facere. Consequuntur quisquam sequi ratione earum fugit magni totam dicta nihil minus delectus quae natus harum maiores, hic eligendi ab voluptatibus. Architecto eveniet non totam exercitationem
assumenda, recusandae voluptas impedit saepe beatae quo laudantium dolores! Pariatur quo voluptas reprehenderit repellat alias, ratione cum quos sunt, delectus consectetur ab ipsam veniam atque molestias harum repudiandae magni neque iste
animi nobis, quasi sint suscipit. Autem laudantium corrupti architecto iste quidem nemo officia corporis eius illo pariatur eum incidunt, blanditiis fugit eligendi inventore! Quod alias minima voluptatem cumque neque aspernatur eligendi voluptatibus
nobis obcaecati placeat libero numquam architecto accusamus rerum magni, dicta iusto! Illo nisi eum vitae earum velit placeat cumque saepe reprehenderit doloribus deleniti obcaecati a, qui, ipsum provident dolorum libero quam maxime magni
reiciendis possimus esse dolore. Non minima iure deserunt dignissimos dolores at nam atque asperiores dicta, accusamus nobis. Nesciunt voluptatum nostrum nisi perferendis? Doloribus quidem excepturi facere amet neque quam repellat ut nostrum
aspernatur? Nobis sit dolores expedita ea molestiae, in molestias, labore aliquid debitis eum eveniet mollitia repellat dolorem officiis quos neque voluptatem iure odio atque, praesentium nesciunt laboriosam distinctio. Aperiam sint ducimus
eius vero cupiditate animi fugit odit corrupti laborum minima facilis, laudantium laboriosam doloremque, ipsum magnam voluptatem incidunt. Adipisci dolor autem ratione asperiores sit veniam itaque harum mollitia illo iste laboriosam, aut,
similique pariatur obcaecati exercitationem rerum incidunt accusantium ipsum dolore. Quasi, suscipit vel deserunt voluptate facilis iste nam dignissimos saepe, labore aut ullam modi doloribus accusamus laboriosam. Placeat sint aut repellendus,
sapiente mollitia iusto dolorum minima itaque dolorem eius eaque delectus quasi nesciunt libero natus dolor enim sunt ab explicabo autem. Labore neque rem nostrum eaque fugit impedit corporis, obcaecati possimus voluptatem nobis assumenda
officia molestias illo a laborum. Consequatur quis perspiciatis molestiae recusandae ratione quaerat ab quam, quisquam voluptatum veniam culpa odit maxime quod labore placeat. Ipsa eum incidunt vitae porro doloremque quis excepturi, nam asperiores,
impedit temporibus eligendi exercitationem architecto placeat veritatis repudiandae mollitia laudantium illum consequatur. Qui corrupti fugit nam iste officiis ratione, animi voluptatibus autem doloremque, temporibus soluta quaerat. Officia,
doloremque deserunt! Temporibus consectetur fuga deleniti eum quaerat iusto similique dignissimos tenetur cumque, illo cupiditate odit consequatur, perferendis dolores minima obcaecati impedit, ex nemo commodi! Aut quisquam nesciunt molestias
tempore sit officia, et ex ad labore quia voluptatibus libero ea similique sequi laborum corporis nam iure mollitia cum ipsam aliquam! Laboriosam incidunt sequi aperiam autem ad. Vel omnis vero maxime neque debitis aliquid odit aperiam ullam,
totam ab facilis suscipit, quas officiis. Doloremque quos molestiae delectus facilis voluptate, ullam aliquam! Tenetur maiores at in dicta repellendus doloribus commodi quidem nemo magni, earum sit dolor voluptas beatae inventore rem dolorem
repellat. Nobis provident odit quisquam eaque ea voluptatem alias possimus dolores excepturi pariatur deserunt cum ducimus debitis eligendi repudiandae laborum, omnis iste ad sequi modi earum, molestiae vitae beatae delectus? Illum rerum corporis
sapiente nihil ex tempore repellat architecto, pariatur perspiciatis! Praesentium earum tempora reprehenderit odit, dolorem magnam repellat, illo maiores neque, quo ipsum odio quisquam esse delectus? Dolores explicabo, aut maiores nostrum
blanditiis reprehenderit cumque doloribus dolor corporis voluptates voluptatum aperiam? Laborum ab quidem nostrum maxime repudiandae deleniti, voluptate, eveniet suscipit quod explicabo, obcaecati optio sunt? Sit maiores fugit reiciendis quas
quibusdam? Similique debitis maiores neque soluta veniam dolor sed voluptas, autem vel incidunt veritatis in, quam magni praesentium, voluptate tempore quos quas sapiente aliquam eos ex optio. Illum minus assumenda dolore adipisci corporis,
exercitationem mollitia modi enim velit error eaque recusandae cumque laboriosam quod alias, voluptatum, harum amet libero! Debitis quis fugiat quasi? Possimus facilis eos, pariatur officia repudiandae, voluptatem odio expedita, eaque incidunt
delectus molestias alias tempore veritatis commodi minima recusandae? Eaque recusandae ab dicta repellat voluptas repudiandae id corrupti cumque ullam quisquam soluta natus qui vitae a perferendis temporibus, fugiat eius praesentium sequi
cupiditate tenetur esse. Nisi harum eligendi officiis qui suscipit quaerat, fuga quas quia consequuntur voluptates facilis delectus, ipsum saepe quod adipisci sit repellat quos voluptate earum in inventore, provident alias ut. Consectetur
odit repellendus consequuntur similique officiis alias blanditiis culpa earum aspernatur dicta ad dolor quibusdam repudiandae dolores maxime ea beatae, fugiat cum distinctio harum explicabo adipisci tempora error quia. Ipsam officia quasi
molestiae delectus dolorum consequuntur quae perspiciatis recusandae, odio perferendis minima optio cum quod blanditiis pariatur quia expedita deserunt.</div>
</div>
</body>
</html>
元素书写顺序
如果两栏布局或者三栏布局要求主区域写在前面，那么使用绝对定位的方式，完成布局。
<!DOCTYPE html>
<html lang="en">
<!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>
<link rel="stylesheet" href="./index.css">
<style>
.container {
background-color: lightblue;
width: 70%;
margin: 0 auto;
padding-top: 30px;
min-width: 800px;
position: relative;
}
.left {
width: 300px;
background-color: lightseagreen;
position: absolute;
top: 30px;
left: 30px;
}
.right {
background-color: gainsboro;
width: 300px;
position: absolute;
top: 30px;
right: 30px;
}
.main {
background-color: magenta;
margin: 0 340px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime ipsa sed necessitatibus reprehenderit amet, officiis quo minima facere officia accusamus labore repudiandae eveniet quisquam mollitia esse impedit a ab sequi voluptates saepe deserunt.
Vel nisi quam aliquid itaque distinctio possimus reiciendis inventore suscipit nemo ut. Accusamus eum ipsa quisquam quidem aperiam quibusdam debitis sequi maxime culpa cum deserunt fugiat consequatur deleniti rem animi, saepe atque harum nisi
sapiente asperiores soluta, eveniet, provident quasi. Velit vel cupiditate beatae deleniti eos quisquam ipsum iure, hic amet libero eligendi qui? Atque, iure sunt, voluptatum suscipit assumenda, necessitatibus iste ducimus esse debitis tempora
fugit incidunt? Obcaecati eos harum error quibusdam, quaerat minus, nulla aperiam aliquam ducimus voluptate accusantium neque temporibus, maiores quam tenetur exercitationem eius voluptatum eveniet consequatur aliquid vitae rerum. Nostrum
non nisi, asperiores perferendis aperiam tenetur vero. Veritatis fugiat quae optio deleniti facilis, labore nemo, harum similique expedita laborum sequi enim magni impedit consectetur explicabo ad aperiam facere, unde saepe maxime nam obcaecati
consequuntur nihil! Eaque quia maxime sequi omnis, atque laudantium quasi dolores velit nisi rerum doloremque eum, eveniet aliquam totam distinctio, neque voluptatibus. In asperiores excepturi voluptatum deserunt nesciunt eos beatae eligendi
et quisquam ut quidem eius quia amet omnis quae alias debitis perspiciatis itaque, ratione nobis nostrum enim voluptate. Necessitatibus tempore quia sapiente odit blanditiis minima fuga. Vero nam voluptatibus autem incidunt magni magnam, debitis
deserunt, nulla explicabo sit quibusdam quis. Beatae, soluta totam! Eum harum, nihil voluptas incidunt adipisci nobis dolores illum? Harum maxime labore distinctio molestiae corrupti inventore dolorem dignissimos voluptates praesentium omnis
debitis possimus voluptas animi quo voluptatum asperiores autem, earum, itaque atque eligendi quidem optio tempore dolore. Soluta ut quas nemo voluptatibus nihil architecto delectus vitae earum. Eius fugit corrupti voluptatum vitae, debitis
vel laudantium, voluptates aspernatur dicta assumenda facere. Consequuntur quisquam sequi ratione earum fugit magni totam dicta nihil minus delectus quae natus harum maiores, hic eligendi ab voluptatibus. Architecto eveniet non totam exercitationem
assumenda, recusandae voluptas impedit saepe beatae quo laudantium dolores! Pariatur quo voluptas reprehenderit repellat alias, ratione cum quos sunt, delectus consectetur ab ipsam veniam atque molestias harum repudiandae magni neque iste
animi nobis, quasi sint suscipit. Autem laudantium corrupti architecto iste quidem nemo officia corporis eius illo pariatur eum incidunt, blanditiis fugit eligendi inventore! Quod alias minima voluptatem cumque neque aspernatur eligendi voluptatibus
nobis obcaecati placeat libero numquam architecto accusamus rerum magni, dicta iusto! Illo nisi eum vitae earum velit placeat cumque saepe reprehenderit doloribus deleniti obcaecati a, qui, ipsum provident dolorum libero quam maxime magni
reiciendis possimus esse dolore. Non minima iure deserunt dignissimos dolores at nam atque asperiores dicta, accusamus nobis. Nesciunt voluptatum nostrum nisi perferendis? Doloribus quidem excepturi facere amet neque quam repellat ut nostrum
aspernatur? Nobis sit dolores expedita ea molestiae, in molestias, labore aliquid debitis eum eveniet mollitia repellat dolorem officiis quos neque voluptatem iure odio atque, praesentium nesciunt laboriosam distinctio. Aperiam sint ducimus
eius vero cupiditate animi fugit odit corrupti laborum minima facilis, laudantium laboriosam doloremque, ipsum magnam voluptatem incidunt. Adipisci dolor autem ratione asperiores sit veniam itaque harum mollitia illo iste laboriosam, aut,
similique pariatur obcaecati exercitationem rerum incidunt accusantium ipsum dolore. Quasi, suscipit vel deserunt voluptate facilis iste nam dignissimos saepe, labore aut ullam modi doloribus accusamus laboriosam. Placeat sint aut repellendus,
sapiente mollitia iusto dolorum minima itaque dolorem eius eaque delectus quasi nesciunt libero natus dolor enim sunt ab explicabo autem. Labore neque rem nostrum eaque fugit impedit corporis, obcaecati possimus voluptatem nobis assumenda
officia molestias illo a laborum. Consequatur quis perspiciatis molestiae recusandae ratione quaerat ab quam, quisquam voluptatum veniam culpa odit maxime quod labore placeat. Ipsa eum incidunt vitae porro doloremque quis excepturi, nam asperiores,
impedit temporibus eligendi exercitationem architecto placeat veritatis repudiandae mollitia laudantium illum consequatur. Qui corrupti fugit nam iste officiis ratione, animi voluptatibus autem doloremque, temporibus soluta quaerat. Officia,
doloremque deserunt! Temporibus consectetur fuga deleniti eum quaerat iusto similique dignissimos tenetur cumque, illo cupiditate odit consequatur, perferendis dolores minima obcaecati impedit, ex nemo commodi! Aut quisquam nesciunt molestias
tempore sit officia, et ex ad labore quia voluptatibus libero ea similique sequi laborum corporis nam iure mollitia cum ipsam aliquam! Laboriosam incidunt sequi aperiam autem ad. Vel omnis vero maxime neque debitis aliquid odit aperiam ullam,
totam ab facilis suscipit, quas officiis. Doloremque quos molestiae delectus facilis voluptate, ullam aliquam! Tenetur maiores at in dicta repellendus doloribus commodi quidem nemo magni, earum sit dolor voluptas beatae inventore rem dolorem
repellat. Nobis provident odit quisquam eaque ea voluptatem alias possimus dolores excepturi pariatur deserunt cum ducimus debitis eligendi repudiandae laborum, omnis iste ad sequi modi earum, molestiae vitae beatae delectus? Illum rerum corporis
sapiente nihil ex tempore repellat architecto, pariatur perspiciatis! Praesentium earum tempora reprehenderit odit, dolorem magnam repellat, illo maiores neque, quo ipsum odio quisquam esse delectus? Dolores explicabo, aut maiores nostrum
blanditiis reprehenderit cumque doloribus dolor corporis voluptates voluptatum aperiam? Laborum ab quidem nostrum maxime repudiandae deleniti, voluptate, eveniet suscipit quod explicabo, obcaecati optio sunt? Sit maiores fugit reiciendis quas
quibusdam? Similique debitis maiores neque soluta veniam dolor sed voluptas, autem vel incidunt veritatis in, quam magni praesentium, voluptate tempore quos quas sapiente aliquam eos ex optio. Illum minus assumenda dolore adipisci corporis,
exercitationem mollitia modi enim velit error eaque recusandae cumque laboriosam quod alias, voluptatum, harum amet libero! Debitis quis fugiat quasi? Possimus facilis eos, pariatur officia repudiandae, voluptatem odio expedita, eaque incidunt
delectus molestias alias tempore veritatis commodi minima recusandae? Eaque recusandae ab dicta repellat voluptas repudiandae id corrupti cumque ullam quisquam soluta natus qui vitae a perferendis temporibus, fugiat eius praesentium sequi
cupiditate tenetur esse. Nisi harum eligendi officiis qui suscipit quaerat, fuga quas quia consequuntur voluptates facilis delectus, ipsum saepe quod adipisci sit repellat quos voluptate earum in inventore, provident alias ut. Consectetur
odit repellendus consequuntur similique officiis alias blanditiis culpa earum aspernatur dicta ad dolor quibusdam repudiandae dolores maxime ea beatae, fugiat cum distinctio harum explicabo adipisci tempora error quia. Ipsam officia quasi
molestiae delectus dolorum consequuntur quae perspiciatis recusandae, odio perferendis minima optio cum quod blanditiis pariatur quia expedita deserunt.</div>
<div class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, aliquid cumque? Maxime nisi dolores animi minima hic nulla repellendus, autem explicabo repellat impedit. Soluta natus aut odio dignissimos molestias deleniti nostrum reprehenderit aliquid
neque quasi necessitatibus impedit eveniet aspernatur odit earum, fuga a ea placeat ex est fugiat numquam dicta ipsum. Dolorem at libero dignissimos rerum porro animi architecto id sunt odio nam voluptatum pariatur inventore praesentium, unde
quidem voluptas eveniet nesciunt quasi nulla voluptates obcaecati magnam assumenda minus. Alias culpa nisi labore tenetur neque. Blanditiis debitis iusto ab, nisi atque distinctio suscipit nihil voluptas nobis quod voluptatem temporibus pariatur,
ore laborum quam iste. Sint, laboriosam debitis. Exercitationem ipsum officia mollitia temporibus. Velit provident ut quod illum culpa voluptas, quia earum dolorum deserunt corporis
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat molestias eos veritatis rem laborum eum dignissimos, provident inventore labore soluta repellat perferendis nesciunt minus debitis sunt dolore unde mollitia adipisci animi ducimus, quasi
veniam exercitationem tenetur sint? Expedita inventore nihil quibusdam suscipit provident unde perspiciatis deleniti dignissimos consectetur, saepe nostrum aliquam nam consequuntur fugit ipsam error tenetur sit recusandae atque vero blanditiis
eaque. Incidunt obcaecati rerum fugiat fugit quis dicta, sapiente voluptas placeat fuga sed tempore, quasi aliquam officiis doloribus ullam temporibus. Eos quos iusto officiis, enim veritatis ea aliquam ipsam repellat? Laboriosam iste sapiente
</div>
</div>
</body>
</html>
后台页面的布局
自适应视口
见后台管理界面练习文件夹
浮动的细节规则【扩展】
盒子位置
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边。
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后在向左或向右移动。
行高的取值【扩展】
line-height
- px 像素值（先计算，在继承。）
- 无单位的数字（推荐使用，先继承在计算。）
- em单位（先计算，在继承。）
- 百分比（先计算，在继承。）
body的背景【扩展】
画布canvas
是一块区域
特点：
- 最小宽度为视口宽度
- 最小高度为视口高度
HTML元素的背景
覆盖画布
body元素的背景
- 如果html元素有背景，则body元素正常。
- 如果html元素没有背景，则body元素背景覆盖画布。
关于画布背景图
- 背景图的百分比，相对于视口。
- 背景图的高度百分比，相对于html元素高度。
- 背景图的横向位置百分比、预设值，相对于视口。
- 背景图的纵向位置百分比、预设值、相对于网页高度。
取消背景色
background-color: transparent;
行盒的垂直对齐【扩展】
多个行盒垂直方向上的对齐
给没有对齐的元素设置vertical-align
预设值 (middle中线对齐)
数值
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
- 设置父元素的字体大小为0.
- 将图片设置为块盒
参考线-深入理解字体【扩展】
font-size、line-height、vertical-align、font-family
文字
文字是通过一些文字制作软件制作的，比如：fontforge
制作文字时，会有几根参考线，不同的文字类型参考线不一致。同一种文字类型，参考线一致。
字体大小 font-size
字体大小，设置的是文字的相对大小。
文字的相对大小：1000、1024、2048
文字顶线到底线的距离，是文字的实际大小。 （content-area，内容区）
行盒的背景，覆盖content-area
行高 line-height
顶线向上延伸的空间，和底线向下延伸的空间，连个空间相等。该空间叫做gap（空隙）
gap默认情况下，是由字体设计者决定的。
top到bottom之间的距离，叫做virtual-area（虚拟区）
行高，就是virtual-area
line-height: normal，默认值，使用文字默认的gap
文字一定能够出现在一行的最中间 ———— 错误
content-area 一定能够出现在 virtual-area的中间 ————正确
尽量不要把line-height设置为1，因为很多字体会出现重叠的情况。
垂直居中 vertical-align
决定参考线的因素：font-size、font-family、line-height
一个元素如果子元素出现行盒，该元素内部也会产生参考线。
- 取值为baseline：表示该元素的基线与父元素的基线对齐。
- 取值为super: 表示该元素的基线与父元素的上基线对齐。
- 取值为sub: 表示该元素的基线与父元素的下基线对齐。
- text-top：该元素virtual-area的顶边，对齐父元素的text-top。
- text-bottom：该元素virtual-area的底边，对齐父元素的text-bottom。
- top：该元素virtual-area的顶边，对齐line-box的顶边。
- bottom：该元素的virtual-area的底边，对齐line-box的底边。
- ，middle：该元素的中线，与父元素的X字母高度一半的位置对齐。
- 取值为数值：表示相对于基线的偏移量，向上为正数，向下为负数。
- 取值为百分比：表示相对于基线的偏移量，百分比是相对于自身virtual-area的高度。
行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒的最高顶边，底边是该行行盒的最低底边。
实际上，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。
行盒：inline-box
行边框:line-box
line-box是承载内容的必要条件，以下情况不生成行边框：
- 某元素内部没有任何行盒。
- 某元素字体小为0.
可替换元素和行块盒的基线
图片：基线位置与图片的下外边距对齐。白边的解决方案：将img元素设置为：display：block；
表单元素：基线位置在内容的底边，
行块盒：
- 行块盒（有多行文字）最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
- 如果行块盒内部没有行盒（没有文字），则使用下外边距作为基线。
堆叠上下文
z-index相关
堆叠上下文叫做（stack-context），它是一块区域，这块区域由某个元素创建。它规定了该区域中的内容在 z 轴上的排列的先后顺序。
创建堆叠上下文的元素
- html元素（根元素）
- 设置了z-index数值（非auto）的元素
同一个堆叠上下文中的元素在z轴上的排列
排列顺序：（从后往前排列，即从电脑屏幕向用户排列。）
- 先排列创建堆叠上下文的元素的背景和边框。（创建堆叠上下文的元素的背景和边框永远在最后面。这里指靠近电脑屏幕）
- 次之排列堆叠级别（z-index的值）为负值的堆叠上下文。（相同堆叠级别的情况下，代码写在后面的元素会覆盖写在前面的元素。）
- 接着排列常规流非定位的块盒。
- 接着排列非定位的浮动盒子。（float）
- 接着排列常规流非定位行盒。
- 接着排列 z-index 为 auto 的定位子元素，以及 z-index 为 0 的堆叠上下文。
- 最后排列堆叠级别为正值的堆叠上下文。
每个堆叠上下文是一个整体，独立于其他堆叠上下文，他们之间不能相互穿插。
SVG
SVG：可缩放的矢量图
- 该图片使用代码书写而成。
- 缩放不会失真。
- 内容轻量。
怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件。
xml语言，svg使用该语言定义。
书写svg代码
<!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>
<body>
<p>
<img src="./CSS篇/test.svg" alt="">
</p>
</body>
</html>
矩形：rect
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 矩形 -->
<rect width="100" height="100" x="100" y="100" fill="#ff8c00" strock="#000" strock-width="2px" />ct
</svg>
圆形：ciecle
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 圆形 -->
<circle cx="100" cy="100" r="50" fill="#ff8c00" stroke="#101010" />
</svg>
椭圆：ellipse
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 椭圆 -->
<ellipse rx="60" ry="10" cx="100" cy="100" fill="red" stroke="#121212" stroke-width="5" />
</svg>
线条：line
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 线 -->
<line x1="10" x2="300" y1="10" y2="60" stroke="#000" strcke-width="3" />
</svg>
折线：polyline
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 折线 -->
<polyline points="30,10,35,10,35,15,40,15,40,20" fill="none" stroke="#101010" stroke-width="3" />
</svg>
多边形：polygon
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 多边形 -->
<polygon points="30,30,30,60,50,40" fill="red" stroke="aliceblue" stroke-width="3" />>
</svg>
路径：path
<svg xmlns="http://www.w3.org/2000/svg">
<!-- 路径 -->
<!--
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
-->
<path d="M20,10 L40,10 L40,40 L20,40 Z" fill="aliceblue" stroke="#000" stroke-width="3" />
</svg>
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
A：画弧线（数值代表）
rx 半径1
ry 半径2
angle 顺时针旋转角度
小弧（0） 大弧（1）
顺时针画（1）逆时针画（0）
x y 终点位置
Z = closepath
例子（华太极图）
见太极图练习文件夹
数据连接
data url
如何书写
数据连接：将目标文件的数据直接书写到路径位置。
- 语法：data:MIME,数据
<!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>
<link rel="stylesheet" href="data:text/css,h1 {color:blue;}">
</head>
<body>
<h1>
标题
</h1>
</body>
</html>
意义
优点：
-
减少浏览器中的请求。（减少了请求中浪费的时间）
-
有利于动态生成数据。
缺点：
-
增加了页面资源的体积。（导致了传输内容增加，从而增加了单个资源的传输时间。）
-
不利于浏览器的缓存。（浏览器通常会缓存图片文件、css文件、js文件）
-
使用base64会增加原资源体积到原来的4/3、
应用场景
-
请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
-
图片由其他代码动态生成，并且图片较小，可以使用数据连接.
base64
一种编码方式
通常用于将一些二进制数据,用一个可书写的字符串表示。
浏览器的兼容性
兼容性问题产生的原因
- 市场竞争
- 标准版本的变化
厂商前缀
比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing：border-box;
- 市场竞争，标准没有发布。
IE： -ms-
chrome: -webkit-
safari： -webkit-
opera： -o-
firefox：-moz-
<!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: 200px;
height: 200px;
background-color: aquamarine;
padding: 30px;
margin: 30px;
border: 2px solid #000;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
}
/* 前面不加任何元素的话，滚动条样式通用 */
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 8px;
}
/* 滚动条上下的按钮 */
::-webkit-scrollbar-button {
background-color: rgb(206, 202, 22);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: cadetblue;
border-radius: 10px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: darkcyan;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos vero harum accusamus pariatur, voluptas maiores iusto sed repellendus tempore laudantium illum ipsum dolores, magnam ad, tempora labore cum magni? Ullam facilis delectus eos commodi deleniti,
et rem magnam non harum cupiditate quod odio similique accusantium vero sapiente architecto reiciendis modi quisquam mollitia optio distinctio soluta nemo consequuntur recusandae? Modi vitae ad itaque quas tempore sed quia sit eius. Ducimus ea
cupiditate explicabo blanditiis incidunt similique voluptatum? Rem eius vitae, numquam, sed recusandae, necessitatibus corrupti architecto at quaerat maiores labore quos dolorum reprehenderit repellat expedita earum error fugit officia. Sequi
cumque molestiae repellat alias ipsa hic ullam animi laudantium! Quos neque sint id voluptate animi voluptatem debitis. Aliquam ratione iste atque aliquid molestias assumenda? Incidunt quas officiis in aliquid similique voluptatum labore necessitatibus
velit quod at delectus enim, ab esse veritatis! Rerum suscipit magni similique vel magnam voluptatem. Consequatur eaque perferendis magni nulla facilis iusto, ea maxime sit dignissimos odio delectus beatae suscipit officiis quisquam corporis cum
nesciunt harum ex exercitationem cumque, rem aliquam id tempore! Expedita voluptatem minus est, odio aut placeat ipsum sed labore repellat facilis vel. Quas aliquid veritatis expedita libero odio quam vel harum fugit minus. Nisi exercitationem
ea accusantium minus eligendi cum ipsam natus itaque at quo sequi, dolor ipsum sint provident eum officia iste, similique tempore est impedit corrupti vitae quibusdam libero distinctio. Asperiores inventore officiis a cum nemo quae placeat ab
velit sequi rem laborum, suscipit nobis saepe aliquam eius fugiat ipsam corrupti omnis voluptatibus doloribus voluptas, maxime vero numquam! Molestias architecto, blanditiis saepe aliquid rem quisquam libero qui, omnis delectus voluptates, aspernatur
voluptatem officia autem eius voluptas! Molestiae aliquid quisquam doloribus sit minima dolore amet, quos labore ea corporis rem alias laboriosam, mollitia perferendis ratione maiores commodi. Porro dolor illum laborum quam quis quisquam similique
molestias veritatis? Eum error beatae libero omnis modi! Dignissimos eveniet atque a cupiditate fugiat repellat iure, ut quaerat vero ipsa laudantium voluptatibus mollitia earum ad quis, asperiores quasi eum ullam possimus, expedita ratione? Nulla
quod totam aliquam quis perspiciatis a aperiam nam reiciendis deleniti unde quas illum aliquid nobis vitae harum sint perferendis in quaerat asperiores placeat, ab labore incidunt consequatur distinctio. Maiores incidunt nobis nam distinctio libero
magni ipsa, quam vitae facilis minima corporis amet aperiam eaque necessitatibus, omnis recusandae hic iste explicabo ullam, autem ratione assumenda repudiandae ad. Vero laborum dolor in ab, fugit ut, nam est facilis, iste voluptas sed ipsum culpa
error similique dolores dicta veniam veritatis tempore molestias. Alias, incidunt nostrum veniam architecto voluptates earum. Molestiae atque ipsum quis ducimus id corporis reiciendis modi ipsa fugiat, aliquid ad eius quidem ea, odio placeat aut
vitae, voluptate a recusandae neque! Soluta voluptates beatae molestiae accusantium est enim natus placeat adipisci ipsam commodi illum aspernatur suscipit velit nostrum quaerat temporibus, iure modi labore recusandae obcaecati nesciunt fugit
hic cupiditate. Ipsa, minus dolor totam suscipit sit iure, veritatis odio quod, autem laboriosam beatae ipsum amet nam? Fuga dicta tenetur quos quod laborum rem, eaque quam sed veniam hic ea reprehenderit provident inventore voluptatem distinctio
cupiditate unde quibusdam error, repellendus vero minus quas amet! Itaque tempora ullam aliquid enim, quia sapiente voluptatum necessitatibus aspernatur non beatae vitae laboriosam atque eaque, veritatis culpa ducimus rerum. Ad assumenda est modi
voluptatem ut facere, voluptas distinctio similique vero rem ipsa. Aspernatur numquam quia quis natus nam, magnam vero dolorum ipsum, exercitationem, dolorem praesentium! Eius cum aspernatur quos natus excepturi sunt voluptatem perspiciatis exercitationem,
eaque, numquam recusandae consequatur, a vitae? Ut exercitationem, dicta sit laborum aliquid laudantium maiores obcaecati modi voluptas sed inventore fuga doloribus, neque ex. Ex ab, reiciendis fuga repudiandae deleniti sunt molestiae voluptate
perspiciatis excepturi ea adipisci distinctio enim consectetur quas minima quisquam doloremque recusandae blanditiis nam, possimus vero error molestias. Obcaecati a blanditiis id mollitia maxime optio commodi officiis libero, eligendi deserunt,
ut nemo earum! Est quis commodi possimus aspernatur, id atque corrupti consequuntur nesciunt expedita quia veritatis eos nobis tempora. Officia ut cumque vero ex eos esse corrupti nihil possimus. Maiores error, excepturi libero est esse cum harum.
Molestias consequatur, repudiandae nemo debitis deleniti obcaecati repellendus sed. Cumque, debitis minima? Veritatis ipsam mollitia possimus commodi illum maxime pariatur voluptate cupiditate omnis adipisci voluptates nisi id aut qui aliquid
eaque nesciunt veniam nostrum distinctio provident dolores, rerum ex! Ipsa atque praesentium consequuntur exercitationem libero amet, non enim maxime dolore esse recusandae voluptates. Adipisci quas eos veniam aut. Cupiditate laudantium fugiat
id! Fugiat reprehenderit nihil molestias dolores animi modi dignissimos facere non id ab sequi, cum suscipit? Explicabo harum aperiam possimus voluptate autem quia? Mollitia voluptatibus cumque cupiditate facilis esse quis dolorum eius harum ratione
aspernatur molestias rem, dolor animi? Suscipit nostrum similique aperiam totam doloremque, ipsum commodi maiores quis ex mollitia quia earum fuga temporibus! Odit quos sint quo autem libero quidem accusamus molestias deserunt, expedita, officiis
vel quia assumenda cum non! Optio libero, fugit maxime recusandae sunt, nesciunt possimus dolores illo, placeat asperiores quas ducimus amet dolor. Officia inventore rerum exercitationem modi ullam consequuntur! Dolore iusto voluptate, reprehenderit
necessitatibus quod cupiditate tempora? Ad doloribus facere tempora aspernatur reiciendis ducimus fugit necessitatibus sunt accusantium amet laborum rem accusamus quis nemo quibusdam quia consequatur, dicta qui distinctio quam sint. Laborum quae
porro, nam reprehenderit reiciendis omnis recusandae tempora hic rerum nulla facere dignissimos, corrupti debitis cupiditate esse quibusdam excepturi possimus quasi laudantium delectus? Blanditiis sequi deserunt asperiores! Beatae incidunt tempora
accusantium! Laudantium, voluptatibus soluta. Perferendis dolore aspernatur enim. Vero similique corrupti dolore at odit, rerum natus iure laborum excepturi optio. At sed doloribus iure ut similique ullam beatae deserunt animi nam, temporibus
ducimus dolor, placeat quaerat quam! Libero beatae sunt minima neque molestiae esse soluta quod, amet, magni, ratione voluptatem. Cupiditate id laudantium nobis, earum soluta possimus, quis eum totam fuga pariatur sed ab ducimus! Suscipit, provident?
Accusamus reprehenderit voluptate obcaecati non odio ex quasi veritatis, molestiae doloribus expedita ut, ipsam debitis. Nobis omnis iste quam maxime, iure porro dolore voluptates dolor, facilis odio sint esse ipsa id rem quo similique quidem
vitae praesentium fugiat, amet maiores placeat!
</div>
</body>
</html>
浏览器在处理样式或元素时，适用如下的方式：
当遇到无法识别的代码时，直接略过。不会报错。
- 谷歌浏览器的滚动条样式
实际上，在开发中使用自定义的滚动条，往往是使用 div + css + js 来实现的
- 多个背景图中选一个作为背景（根据分辨率和网络条件选择不同的图片作为背景图）
<!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: 800px;
height: 600px;
background-image: -webkit-image-set(url(./img/small,jpg) 1x, url(./img/big.jpg) 2x);
background-size: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css hack
根据不同的浏览器（主要针对IE），设置不同的样式。
- 样式
IE中，css的特殊前缀
- *属性，兼容IE5~IE7
- _属性，兼容TE5~IE6
- 属性值\9,兼容IE5~IE11
- 属性值\0,兼容IE8~IE11
- 属性值\9\0,兼容IE9~IE10
IE6的外边距bug，浮动元素的左外边距翻倍。
- 条件判断
<!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>
<body>
<!-- [if IE]>
<p>
这是IE浏览器
</p>
<![endif]-->
<p>
这是非IE浏览器
</p>
</body>
</html>
渐进增强 和 优雅降级
两种解决兼容性问题的思路，会影响到代码的书写风格。
-
渐进增强：先适应大部分浏览器问题，然后针对新版本浏览器加入新的样式。
书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，在逐步加入新标中的代码。 -
优雅降级：先制作完整的功能，后针对低版本的浏览器进行特殊处理。
书写代码时，先不用特别在意兼容性，完成整个功能后，在针对低版本浏览器处理样式。
caniuse
查找css兼容性
访问 coniuse.com
居中总结
居中：盒子再其包含块居中
行盒（行块盒）水平居中
- 水平居中：直接设置行盒（行块盒）父元素
text-align: center;
<!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 {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
Lorem, ipsum.
</p>
</div>
</body>
</html>
常规流块盒水平居中
- 水平居中：定宽，设置左右 margin 为 auto
<!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 {
height: 500px;
background-color: blue;
}
p {
width: 300px;
height: 200px;
background-color: brown;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<p>
</p>
</div>
</body>
</html>
绝对定位元素水平居中
- 水平居中：左右坐标设置为0，即 left:0; right:0; margin:0 auto;
<!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 {
height: 500px;
background-color: blue;
position: relative;
}
p {
width: 300px;
height: 200px;
background-color: brown;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<p>
</p>
</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>
h1 {
background-color: lightblue;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>
Lorem, ipsum.
</h1>
</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>
h1 {
background-color: lightblue;
font-size: 18px;
line-height: 1.5;
padding: 50px 0;
}
</style>
</head>
<body>
<h1>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem corrupti tempora cupiditate beatae, molestias animi a cum eaque praesentium odio excepturi nam aspernatur. Esse nisi impedit sed magnam obcaecati iure sequi accusantium non minima
sunt atque quo consequuntur dicta commodi rem temporibus error molestiae corporis natus, fuga, recusandae aperiam praesentium!
</h1>
</body>
</html>
绝对定位的垂直居中
定高，设置上下的坐标为0，即 top:0; bottom:0; margin:auto 0;
<!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 {
height: 600px;
background-color: lightblue;
position: relative;
}
p {
height: 300px;
padding: 128px 0;
background-color: midnightblue;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente in incidunt recusandae deserunt, provident maxime? Nobis, temporibus saepe! Minima id quam quas, nobis sunt repudiandae harum praesentium, quae veritatis mollitia, corrupti deserunt
quaerat quidem blanditiis facilis doloremque deleniti commodi. Autem, iste hic assumenda optio inventore voluptas obcaecati tempore eveniet accusamus.</p>
</div>
</body>
</html>
样式补充
display: list-item
设置为该属性的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子。
元素本身生成的盒子叫主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列，并且次盒子排在主盒子的前面。
涉及的css属性：
-
list-style-type设置次盒子中内容的类型
-
list-style-position设置次盒子相对于主盒子的位置
-
速写属性
list-stylelist-style:内容类型 相对位置；
清空次盒子
list-style:none;
图片失效时的宽高问题。
如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高。
行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关。
例子：
<!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>
img {
background-color: midnightblue;
width: 200px;
border: 1px solid #666;
/* display: block; */
/* 解开注释可以解决行盒在快盒中白边的问题 */
}
a {
border: 2px solid #000;
/* display: block; */
}
</style>
</head>
<body>
<a href=""><img src="./img/1.png" alt="">
</a>
</body>
</html>
text-align:justify
text-align:
- left: 左对齐
- right: 右对齐
- center: 水平居中对齐
- justify: 除最后一行外，分散对齐。
用法：
<!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: 200px;
background-color: lightblue;
text-align: justify;
}
div::after {
content: "";
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore, iusto!Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</div>
</body>
</html>
制作一个三角形
宽高设置为0，边框为20px，做边框设置颜色，其他三个边框设置为透明（transparent）。
<!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: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #ff8c00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 right
开始和结束是相对的，不同的国家有不同国家的习惯。
左右是绝对的。
direction设置的是开始到结束的方向
writing-mode设置的文字书写的方向
utf-8字符
三种写法：
- & + 字符（<；）
- &# + 数字 （ᡂ；）
- 伪元素写法
div::after {
content: "\6210";
}
<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: 200px;
background-color: lightblue;
text-align: justify;
}
div::after {
content: "";
display: inline-block;
width: 100%;
}
</style>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore, iusto!Lorem ipsum dolor sit amet consectetur, adipisicing elit.
```
制作一个三角形
宽高设置为0，边框为20px，做边框设置颜色，其他三个边框设置为透明（transparent）。
<!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: 0;
height: 0;
border: 20px solid transparent;
border-left-color: #ff8c00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 right
开始和结束是相对的，不同的国家有不同国家的习惯。
左右是绝对的。
direction设置的是开始到结束的方向
writing-mode设置的文字书写的方向
utf-8字符
三种写法：
- & + 字符（<；）
- &# + 数字 （ᡂ；）
- 伪元素写法
div::after {
content: "\6210";
}
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
