袁进老师整理：
@规则
at-rule: @规则、@语句、CSS语句、CSS指令
1. import
@import "路径";
导入另外一个css文件
2. charset
@charset "utf-8";
告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行
web字体和图标
web字体
用户电脑上没有安装相应字体，强制让用户下载该字体
使用@font-face指令制作一个新字体
字体图标
网站：iconfont.cn
块级格式化上下文
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
全称Block Formatting Context，简称BFC
不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
•根元素：意味着，<html>元素创建的BFC区域，覆盖了网页中所有的元素
•浮动和绝对定位元素
•overflow不等于visible的块盒
具体规则：
-
创建BFC的元素，它的自动高度需要计算浮动元素
-
创建BFC的元素，它的边框盒不会与浮动元素重叠（创建BFC的元素会避开浮动元素）
-
创建BFC的元素，不会和它的子元素进行外边距合并
布局
多栏布局
两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container {
background: lightblue;
width: 90%;
margin: 0 auto;
}
.aside{
float: left;
background: #008c8c;
color: #fff;
width: 300px;
margin-right: 30px;
}
.main{
overflow: hidden;
background: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus asperiores, odio iusto obcaecati voluptate, quisquam sit vel mollitia qui vitae sint nobis est explicabo ut eveniet totam eius officia iure. Et, itaque hic! Eligendi accusantium necessitatibus maxime, aliquid, velit perspiciatis pariatur ipsam expedita sed veniam labore quidem molestias, soluta voluptatibus exercitationem? Esse, qui laboriosam! Ad tenetur, aliquid enim est nostrum numquam? Maxime at eius mollitia. Hic rerum numquam exercitationem at vel asperiores ea unde possimus corrupti dolor officia consequatur harum cum, iste dolores earum, odio nulla dolorem ipsam ratione iusto vero. Impedit saepe voluptatum similique doloremque repellat obcaecati vel explicabo quo possimus, esse ducimus, est ad aliquid beatae ipsa! Fuga officia delectus accusantium vero consequuntur pariatur nihil dicta doloribus, aliquam dolorem quia quos voluptas! Non, eveniet cupiditate architecto vero saepe incidunt aspernatur! Vero aut alias, harum debitis modi esse recusandae, commodi aperiam quo consectetur deleniti maxime. Obcaecati facere exercitationem animi perferendis tempore sint odio quam quaerat quia laudantium! Soluta modi consequatur dicta porro ab aliquam iusto asperiores ducimus, veritatis praesentium obcaecati eaque rerum assumenda sunt cupiditate maxime. Voluptates officiis corporis cupiditate pariatur possimus soluta aut culpa odio velit sit veritatis architecto doloremque qui cum repudiandae iusto vero consequuntur, fugiat aliquam non ipsum consectetur harum! Dolorem, consequatur minima, accusamus enim officia non cum expedita quaerat mollitia tempore magnam rem modi impedit vel neque sunt quos. Ad similique quia ipsam molestias eos architecto consectetur reprehenderit numquam voluptatum ipsa facere, fuga totam quae repellat laudantium, odit placeat consequatur velit ratione reiciendis molestiae esse exercitationem perspiciatis debitis! Hic animi corporis dolore sed ipsam a ullam eum, quam deleniti fugit aperiam maiores nihil dignissimos! Deserunt recusandae nihil sit quo ex dolor excepturi doloremque magnam molestias modi adipisci aliquid tempore expedita atque reiciendis quisquam voluptatibus quaerat, molestiae voluptatem ipsum et. Dignissimos nihil, vero molestiae ad minus laboriosam exercitationem mollitia ratione neque, aut delectus earum iure! Quos aliquid rerum quasi libero voluptatibus. Odit dolore illo saepe eius dolores aliquid quam, voluptatum quibusdam accusantium quos delectus molestias sapiente nisi in maxime. Explicabo ipsum quisquam cum excepturi quas eius maiores nam perferendis delectus dolorem vel consequuntur omnis voluptatem id quam molestiae minus, officiis, eveniet ex! Placeat eum ducimus id beatae eius modi excepturi delectus aspernatur tempore laudantium? Expedita veritatis vero reiciendis incidunt voluptas rem nihil accusamus quod pariatur nostrum culpa possimus est, dolor cupiditate ipsa et optio, deserunt praesentium tempora ad sapiente, iste fuga distinctio enim. Nobis hic saepe expedita ipsam architecto. Ea perferendis illo aspernatur dolore ab, quisquam non ipsum, nihil tenetur a unde! Veniam aliquam delectus explicabo error vitae, maiores optio porro debitis nemo provident repudiandae eligendi repellat ea, deleniti, incidunt aperiam? Nesciunt quod similique consequatur iste veniam. Possimus ducimus architecto dolorum beatae tempora aliquam est dolorem cum? Officiis adipisci natus, libero aspernatur optio a consequuntur delectus suscipit amet perferendis accusantium quis? Hic excepturi nulla illo consequuntur aspernatur atque illum, nostrum qui numquam totam repellat optio unde ullam dignissimos provident mollitia alias minima maxime aliquam iusto cumque voluptatibus vero. Error ducimus voluptate repellendus nisi mollitia deleniti possimus illo dolorem autem quis iure in repudiandae sunt, molestiae optio. Incidunt iste adipisci illo facere quisquam consectetur, at, recusandae sapiente mollitia, minima fugiat quam alias veniam maxime ad accusantium sunt? Perferendis facilis ratione in minus tempore eligendi inventore, id beatae aperiam eius aut, ducimus hic magni! Numquam inventore officia molestias adipisci, deleniti deserunt, eos nobis culpa qui nemo dolorem praesentium saepe doloremque incidunt nihil ad dolore explicabo fuga consequuntur voluptatum at corrupti nisi totam iste! Assumenda sed esse tenetur delectus ullam dolor reiciendis necessitatibus facilis! Tempora veniam, autem aspernatur, totam quam qui exercitationem enim necessitatibus repudiandae laboriosam numquam dolore reprehenderit facere atque architecto nam cumque distinctio? Modi eos ut dolor iste explicabo, ipsum distinctio dolores? Dicta consequuntur obcaecati aliquam exercitationem dolorem veritatis pariatur soluta sit reiciendis! Itaque iure vel quibusdam enim ullam, qui recusandae ab rem sequi rerum sed est. Quidem, fuga eligendi quaerat nemo aliquam quae, distinctio molestias vero error perferendis tempora, fugiat maxime. Reprehenderit, quo atque rem sequi dignissimos incidunt possimus vel, voluptates maxime quisquam commodi, architecto labore? Ab odio quo deserunt corporis eos eligendi dolorum asperiores dolore fugit nobis soluta, ipsa minima quisquam autem, corrupti enim atque quidem at natus dignissimos error labore aspernatur distinctio. Incidunt modi, delectus explicabo pariatur esse fuga ipsum iusto odio magni natus quod. Sit repellendus accusamus rerum laudantium minus dolor suscipit itaque voluptate velit accusantium quisquam aspernatur harum minima quibusdam asperiores, error nemo vero, pariatur tempora nulla repudiandae optio corrupti ratione? Quod aspernatur molestiae, dolorem voluptatibus harum dolores accusantium ipsa rem nisi voluptatem, maxime impedit sit minus sequi numquam ex ullam autem mollitia eius qui cupiditate? Aliquam similique est ut itaque dolorem incidunt in cupiditate vel ea, eius nobis? Provident doloribus iure minima quia nesciunt soluta impedit voluptas, libero repellat exercitationem iusto eius ipsam harum reiciendis. Error pariatur atque aut cupiditate fugiat reprehenderit eum consectetur et sunt? Blanditiis enim eveniet consequatur sint omnis cum vel ratione. Ullam, accusantium suscipit reprehenderit fugiat nihil quos! Laborum soluta recusandae, iusto consequuntur optio doloremque accusamus! Vel voluptas vero necessitatibus autem error eaque, nam obcaecati repudiandae ipsam molestiae ab porro, deserunt voluptatibus sequi debitis at quo amet excepturi harum blanditiis, eius eligendi accusamus ipsum! Dignissimos ad libero, pariatur neque vel amet aperiam ab consectetur quidem hic laudantium delectus deleniti nulla quos quia placeat cumque! Sit illo itaque corrupti. Minima cum odit perspiciatis nemo rem qui quibusdam similique aliquid enim in optio ut, reprehenderit dicta pariatur facere illum voluptatum aut voluptatem quaerat amet laborum ducimus, impedit quidem. Facere, iure asperiores ut illum cumque itaque repellendus, soluta sapiente ea placeat explicabo laudantium quam praesentium enim nihil iste odit sint quod! Obcaecati laboriosam ratione facilis itaque necessitatibus eum vitae dolor facere voluptatum natus voluptates at, assumenda dignissimos molestias dolorum impedit cupiditate fugit ad pariatur quidem? Dolor, ratione, fugiat in voluptates optio repellendus quisquam nostrum quam maxime excepturi suscipit aliquid sed at explicabo dolorum voluptatum. Dignissimos eos officiis quo amet nemo incidunt est delectus fugiat. Recusandae tempore ipsa voluptatum numquam! Odit aliquam accusamus tenetur velit id! Architecto accusamus voluptatum sint magnam!
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium eveniet facere cumque! Unde iusto explicabo eum ullam vitae veritatis pariatur consequatur illum? Sequi odio ipsum facilis error, a optio obcaecati expedita facere sunt recusandae id, magnam nam doloremque. Corrupti natus cum maiores fugit fugiat eos aperiam nostrum impedit officiis, minima corporis obcaecati voluptate, modi, optio sit quaerat nesciunt cupiditate doloribus sequi ea debitis veritatis eius aliquam? Voluptate reprehenderit veniam hic explicabo omnis? Commodi quos, perspiciatis quis aspernatur quasi et animi eius voluptate quo corrupti nulla, officiis in exercitationem inventore sit sunt consequuntur, assumenda magni ratione minus quisquam voluptas ab. Cupiditate nam fuga explicabo rem corrupti sit nemo veritatis quasi cum voluptatum quo accusamus mollitia delectus illo, eveniet neque ipsa autem est numquam soluta distinctio ea! Explicabo quis tenetur doloremque quod dolore. Quibusdam voluptate nisi eos quod iste, ducimus quia placeat, optio recusandae neque impedit. Temporibus sed excepturi molestiae assumenda ex consectetur delectus, minima obcaecati nam accusantium perspiciatis consequatur, ratione non quod rem expedita harum porro corrupti animi beatae vero omnis incidunt blanditiis eveniet. Ducimus temporibus blanditiis aut repellendus neque. Harum atque facere, culpa ullam hic nostrum perferendis. Sequi perspiciatis, molestiae mollitia accusantium ducimus rem velit eum aut ab magni at vero voluptates suscipit adipisci corporis, provident quas? Expedita vel, molestias sit facilis accusamus aspernatur alias saepe nihil soluta doloribus nesciunt sequi autem, sed perspiciatis! Facere, enim at? Accusamus cupiditate corrupti repudiandae in tempora neque, illum saepe unde velit eaque nam, soluta beatae ipsa animi tenetur temporibus nobis dicta veritatis ipsam perspiciatis delectus, iure aliquam ea? Sequi aspernatur ea, impedit laborum totam facilis, architecto excepturi, earum omnis expedita voluptatem natus iste aperiam? Est iste libero in dignissimos possimus perferendis exercitationem, nobis minus explicabo quidem neque? Itaque, dolores sunt repudiandae aperiam qui natus recusandae tempora ad sit reiciendis accusantium. Labore, earum ipsam quo officiis dolor laborum ullam delectus! Quo cum facere eligendi veritatis, asperiores maiores enim rem numquam ipsum qui ad tempora incidunt quia assumenda esse laborum repellendus iusto doloremque inventore delectus placeat tempore, velit excepturi hic. Aperiam sapiente, officiis et ipsa ratione culpa, accusamus, inventore cum laborum consectetur eaque? Omnis sequi quia doloribus minima numquam suscipit accusantium harum architecto corporis distinctio, iste voluptate labore eos itaque rem reprehenderit totam assumenda, obcaecati repellat hic recusandae. Error animi suscipit molestias numquam! Dolor commodi vitae est incidunt sunt sequi eaque deleniti ipsum vel doloremque unde, placeat accusamus modi ad vero natus saepe laborum molestiae rerum nisi quaerat, amet atque numquam officia! Praesentium illum nemo voluptate veritatis. Veniam, vero optio corporis neque fuga sint modi sapiente voluptatibus autem delectus quisquam aut aliquam laboriosam dicta dolorum, omnis rem consectetur. Reiciendis, rerum iusto! Expedita, consectetur consequuntur? A reiciendis possimus incidunt tenetur delectus consequuntur dignissimos optio voluptatibus libero cum atque in at soluta, recusandae quia quae sunt consectetur qui, officiis illo numquam molestiae culpa nesciunt tempore! Atque quisquam quo, minima perspiciatis accusantium non error ea dolores ad nostrum quidem, quia nobis rem architecto fuga numquam delectus inventore, similique modi nihil? Minus laudantium reprehenderit perspiciatis quidem voluptas non eligendi provident dolorum nemo repellat eum corporis, delectus veniam expedita repellendus possimus ipsa neque odit totam temporibus aut placeat iure cum? Sint sequi tenetur ratione magnam, a dolorum delectus nam illum, praesentium suscipit doloribus doloremque aperiam repudiandae expedita nesciunt temporibus eligendi! Ipsum doloribus exercitationem cupiditate harum veniam suscipit, delectus in distinctio veritatis quaerat, quisquam aut deserunt commodi libero illo rerum magni quos, necessitatibus non modi minima ducimus tenetur qui. Amet odit quo quaerat corporis vitae nihil, ratione accusamus vero delectus tenetur numquam pariatur nesciunt perspiciatis ullam qui architecto culpa labore nostrum voluptatem, rerum, a ad quod harum. Vitae, aperiam praesentium. Pariatur possimus ullam harum at est dicta a accusamus qui dolorum molestiae voluptatibus, ea eveniet, accusantium ipsam hic, facilis debitis sed dolore velit cum suscipit totam quis? Accusamus adipisci possimus iste iure, magni distinctio esse amet laborum sed deserunt blanditiis quos fugit ea sit aliquid voluptatibus aperiam vitae illum minima corporis? Sit natus nemo corrupti quo sequi rem libero vitae aliquam corporis eius harum reiciendis beatae, porro consectetur commodi dolore ea neque totam rerum quam ex nulla laboriosam modi ipsum! Eveniet dolor quidem assumenda corporis sint reprehenderit placeat deleniti! Minus natus asperiores dicta. Alias pariatur fugiat labore possimus reiciendis est, libero corporis aspernatur voluptates blanditiis exercitationem totam ea! Corporis, minus laboriosam? Odit, esse! Consequuntur amet sed omnis consectetur enim aspernatur similique libero, voluptatem, mollitia nulla ut unde modi. Aliquid commodi possimus voluptas veritatis iste, cumque dignissimos consequuntur vel illum excepturi quas quam quos fuga debitis. Tempore aut nobis velit impedit ducimus necessitatibus. Optio ratione mollitia sunt non voluptates? Doloremque omnis, iusto porro cupiditate debitis non eius repudiandae distinctio fuga quos voluptatum quae consectetur. Iure doloremque earum ratione obcaecati similique dolores velit id sapiente inventore vero quasi quas, adipisci ad sint illum tempora et suscipit. Perferendis voluptatibus dicta consequatur nobis! Animi suscipit vitae voluptatibus nam quis qui dolorum, totam tempora placeat tempore! Et natus ut ullam suscipit, commodi deleniti laudantium non! Est fugit debitis quasi modi quod sapiente reiciendis excepturi unde similique quidem rem perferendis accusamus facere voluptate soluta nostrum, repellat ipsa optio. Unde facere placeat saepe suscipit nulla culpa ducimus dignissimos quidem ipsam commodi neque, libero cumque explicabo officiis velit. Aliquam quasi accusantium dolores nemo, est cum modi quaerat possimus similique quos vitae illum. Reprehenderit facilis unde ullam, ex vel molestias quaerat impedit nesciunt sapiente sequi. Voluptate provident enim, eum nulla numquam voluptates dolore rem architecto! Sunt expedita blanditiis deserunt dolor! Excepturi aliquid corporis nihil quo optio earum perferendis. Fugiat nulla architecto aut numquam qui eum eveniet corrupti laborum odit error. Voluptatum dolore beatae ipsam quia, quod laboriosam soluta esse similique fugiat at omnis. Recusandae qui, voluptatum sequi velit accusantium ullam, soluta mollitia libero deleniti ducimus perferendis commodi ad? Et quos, tempora dignissimos voluptatem maxime earum facilis neque assumenda sunt vero placeat ut, laborum quaerat quod vel minima. Non eum eveniet dignissimos atque officiis omnis cumque, vitae sint rem veniam, nemo ratione laboriosam quis eos quod, mollitia odit harum quas. Quam magnam quasi iure sit, deserunt autem repudiandae iste quibusdam nisi.
</div>
</div>
</body>
</html>
三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.container {
padding: 30px;
border: 3px solid;
}
.left {
float: left;
width: 300px;
background: lightblue;
margin-right: 20px;
}
.right {
float: right;
width: 300px;
background: lightblue;
margin-left: 20px;
}
.main{
overflow: hidden;
border: 2px solid;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus delectus ipsam hic rerum amet, officiis necessitatibus beatae qui sapiente tempore libero tempora deleniti impedit harum quos quae autem error, cum sequi. Suscipit repellat aliquid, quae iusto ullam quam exercitationem provident sed labore consequuntur, ex libero? Quaerat vel quibusdam repellat in id cumque reprehenderit consequuntur neque officiis iste odit modi iure corporis magni perspiciatis eligendi corrupti illo necessitatibus expedita, dolorem at sequi obcaecati mollitia molestiae. Ab harum corrupti soluta ut inventore, ex ipsum cumque vero earum amet, pariatur tempore dolores praesentium, commodi id expedita quas quis non architecto quibusdam velit. Repellendus fuga maxime tenetur, incidunt quibusdam maiores rerum. Illo totam ducimus dignissimos cupiditate quasi laboriosam libero maiores molestiae exercitationem eius aliquid eligendi architecto omnis ex recusandae, iusto beatae. Corrupti odio explicabo, minus suscipit velit voluptates dolor commodi dolorum, eum atque tempora molestiae iste quis, numquam fugit molestias reiciendis distinctio eveniet temporibus? Dignissimos, at dolore. Nemo quod obcaecati repudiandae repellat quae rem placeat recusandae. Quae quisquam id saepe soluta voluptates. Vel repudiandae eius tempora odit quas veritatis optio sapiente natus excepturi iusto nisi cupiditate, vero reprehenderit tempore magni eveniet, consectetur laboriosam. Nihil repellat, repudiandae minima consequuntur molestias commodi deleniti eum quam vel aliquam animi cum doloremque ipsum quis suscipit numquam rerum, corporis voluptatum voluptatibus nostrum ab, quaerat sapiente officiis molestiae! Praesentium numquam laudantium fugiat corporis nisi animi dolorum a inventore, provident harum error eius expedita molestiae! Dolores ab temporibus odio nostrum voluptate tempora molestias recusandae, similique culpa reprehenderit ut ipsam quo optio aliquid enim consectetur libero iste pariatur fugiat assumenda sit aut in ipsum fuga. Totam nobis ratione laborum praesentium ducimus repellendus vitae ut iusto voluptas quis sequi qui, eligendi delectus hic neque dolorum quibusdam molestias soluta accusantium ipsa culpa dolor ea! Mollitia laudantium vero blanditiis dolorem esse fuga atque suscipit illum adipisci labore, id quia nobis doloribus minima sequi incidunt ratione vitae. Distinctio rerum laudantium aperiam error, vitae eum dicta nesciunt enim officiis rem incidunt explicabo fugiat non accusantium amet corporis ratione omnis tenetur repellat beatae sequi. Quo tenetur inventore, voluptatem aut nemo hic nesciunt earum temporibus enim error reprehenderit saepe adipisci incidunt placeat neque ad ratione pariatur possimus! Accusamus ut incidunt laborum modi perspiciatis impedit ab enim reprehenderit veritatis neque excepturi iure provident sit atque facilis, culpa quibusdam ea, vitae ratione laudantium quidem perferendis architecto. Ab dicta aliquid perferendis numquam tempore quos distinctio consectetur corporis nam quod eveniet molestias totam cupiditate itaque culpa ullam impedit voluptatibus dolore earum ut eius necessitatibus, voluptatem neque? Ipsam, earum? Necessitatibus eligendi consectetur delectus debitis minima quae distinctio natus eum placeat accusantium quibusdam eius nemo, est pariatur alias dolores dolor voluptas nihil cum. Hic adipisci, et consequatur, totam iusto maxime at sed molestias delectus quasi similique quas optio! Eum, velit? Dolor praesentium perferendis rem cupiditate exercitationem, doloribus omnis consequatur quas iure at debitis, fugit explicabo illum inventore excepturi repellat. Assumenda, expedita! Architecto doloremque facere assumenda reiciendis et, dignissimos vel nam, ab dolores reprehenderit dicta vitae. Necessitatibus deserunt impedit totam dolore quaerat molestias cupiditate. Laborum, temporibus.
</aside>
<aside class="right">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta laudantium assumenda voluptas nemo reiciendis saepe sint id est, in dolor labore distinctio aperiam harum tempora! Inventore quos fuga illo modi sit? Exercitationem deleniti voluptatibus tempora magnam quasi beatae ex provident neque officia, harum facere iusto magni reiciendis id officiis praesentium quisquam unde. Itaque, dolorum. At voluptas impedit, id animi voluptatibus quo dolorem distinctio corrupti pariatur cum ratione ipsum accusantium possimus odit iure aliquid minima neque natus itaque! Minima laudantium dolore ab tenetur architecto velit consequatur perspiciatis consectetur fugit! Modi nemo quaerat accusamus vero ab vel ducimus, temporibus esse impedit quis repellendus nesciunt doloribus non tempore atque laboriosam. Rem vero repellendus itaque consequuntur voluptatum quam dolores illo voluptas assumenda odio accusamus, nostrum quos? Vero laudantium, laborum odit totam nam ea dicta reprehenderit unde ullam voluptas ut esse culpa ipsum cum maiores? Officia, tenetur explicabo. Suscipit dicta libero ad laboriosam tenetur dolorum at iusto animi, odit, quibusdam vel quaerat, assumenda enim incidunt dolore quidem tempora. Officiis aut ipsa ipsum asperiores optio laborum, iusto exercitationem, in, quaerat pariatur vel reiciendis. Excepturi repellat consequuntur vero eveniet accusamus neque illo dolorum eum pariatur accusantium. Atque nihil aliquid, dolore maxime ex ratione id magni quo perspiciatis sequi optio, nesciunt accusantium voluptate quia magnam necessitatibus suscipit. Iste, ab sed sint provident, nemo ratione accusantium, in ipsam consequuntur saepe vero ea itaque. Minus quidem quod, dolor quos quis illum suscipit adipisci culpa voluptatibus, ipsa obcaecati eius nihil nostrum nam nesciunt consequatur magni. Doloribus iure fuga illum dignissimos voluptatum! Quisquam doloribus voluptatibus delectus at nesciunt praesentium, sapiente quos, ducimus accusantium ipsam soluta consectetur veniam totam perferendis placeat porro deserunt nulla quaerat aliquid reprehenderit nam! Reiciendis, voluptatum inventore illo praesentium nulla voluptatem voluptate nihil aliquid laboriosam dolorem deleniti blanditiis saepe? Obcaecati delectus architecto illum culpa sed quos laboriosam nulla pariatur, sapiente nobis impedit hic, corrupti esse suscipit facere atque non distinctio. Doloremque aliquam accusamus voluptatum, a provident sunt veniam debitis illo at? Molestias esse numquam eius quae voluptatem iusto assumenda commodi magnam et, reprehenderit amet, minima beatae temporibus omnis reiciendis, error excepturi explicabo ipsum. Exercitationem, aut. Vero cupiditate recusandae illum quis, minus doloremque? Tempore quaerat sapiente nesciunt dolor nisi commodi repudiandae omnis quisquam doloremque, qui, laboriosam eligendi sit aut beatae quasi dolore deleniti officiis temporibus sunt minima, quibusdam quae. Officiis, cum. Tenetur sed nemo optio eaque fugit molestias nostrum dignissimos sit porro. Sequi sunt accusamus repellendus, neque vero accusantium sed libero adipisci quia minus itaque. In omnis soluta suscipit ab velit ut ipsam consequatur eaque eum, eligendi minima pariatur doloribus impedit officia fugiat aliquam provident hic fugit repudiandae error tenetur fuga! Voluptates culpa asperiores nihil! Corrupti, voluptates atque. Unde amet fuga ipsum consequuntur inventore dolores ipsa atque! Enim architecto debitis, culpa odio molestiae ipsam ab quaerat deserunt sit quos, quasi ullam distinctio? Voluptatem voluptate labore repellendus tenetur eius dolores quisquam eligendi eaque fuga soluta. Quae, fugit ipsam quos dolore corrupti unde quaerat voluptates vero, delectus commodi qui, eos quia quasi quisquam ratione porro. Nobis exercitationem voluptate libero, delectus perferendis et.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum eaque neque placeat cupiditate deserunt dicta ratione accusamus incidunt alias inventore at animi modi voluptas sint quibusdam nulla, debitis cumque eveniet maxime dignissimos sed ipsa, quisquam quasi nihil? Odit alias accusantium voluptate necessitatibus. Sed laborum inventore sunt quis maxime, culpa doloremque sit aperiam officia facilis! Error, vero vitae voluptas omnis ab quos autem tenetur quas. Veritatis ratione est molestias animi commodi incidunt aliquid iste, rerum fugiat, praesentium reiciendis perspiciatis delectus iusto quas cumque soluta deleniti voluptatibus reprehenderit beatae sit provident assumenda quaerat numquam! Quo veritatis placeat sequi, dignissimos, ducimus voluptates minus quidem soluta recusandae rem sapiente corrupti voluptatem exercitationem, illum repellendus! Adipisci, reprehenderit aliquam! Debitis maxime placeat sunt optio tempora dolores blanditiis exercitationem, ex labore quia, nostrum corporis dolorem eius? Amet maiores sed optio mollitia nostrum, impedit vero quis, velit inventore perferendis vel est rem temporibus unde odio officia. Alias quod soluta assumenda culpa nulla, nihil quae, fugiat voluptas nisi, consequatur maxime a sit quasi quam totam debitis veniam beatae illum deserunt doloribus aperiam aspernatur architecto reiciendis. Iste incidunt earum provident saepe? Dolore, doloribus cupiditate. Totam, deserunt aliquam tenetur amet inventore impedit delectus ut asperiores nesciunt recusandae iusto beatae eligendi optio minima temporibus, laboriosam libero atque minus corrupti odit dolorem. Eum, dolore expedita. Aliquid libero vitae cupiditate vel, voluptate, sunt assumenda quibusdam perferendis facilis dolore exercitationem vero odit, cum obcaecati tempore distinctio. Dolores ratione nesciunt aspernatur at neque magni facilis expedita optio, porro sunt ab consequuntur atque! Nulla iste perspiciatis fugiat reiciendis accusantium commodi error doloribus voluptate sapiente sint quibusdam inventore, iusto eos veniam consequatur doloremque cumque? Voluptatum rem iste incidunt, aliquam repudiandae ex, exercitationem ipsa corrupti, cupiditate dicta voluptates enim. Cumque magnam vitae aut quae minima quo veniam sequi nulla expedita officia repellat nisi nobis totam incidunt qui ipsam libero numquam delectus in suscipit similique, eveniet inventore. Quia laborum, ipsa eveniet provident a enim minima adipisci! Quas voluptas fuga perferendis quos accusamus nulla, alias repellat id laudantium est qui molestias harum reiciendis vero consequatur officiis rerum esse, odio, libero obcaecati quo enim. Quos provident officia reprehenderit, obcaecati officiis nemo nulla quidem neque sapiente veniam nesciunt aliquam quas, eaque voluptatum similique numquam cumque laudantium fugiat quis minus, quasi dolores? Adipisci fugiat magni, repellendus ducimus at sequi similique esse, nulla corrupti quaerat voluptatum, ea eum ex ullam deserunt. Quibusdam, qui soluta mollitia et voluptatem nostrum! Possimus nesciunt modi omnis, officia similique suscipit voluptatem molestiae harum quis eligendi. Nisi accusantium aperiam est saepe fugit voluptas eius porro nemo ut obcaecati dolores esse repellat rem iste doloremque neque voluptate libero, animi tenetur, velit fuga illum qui nam dignissimos! Voluptatem fugiat tempora vitae eum cumque nisi quo sint vel, quaerat ex aperiam molestias voluptates quia iusto porro, saepe illum rem officiis consequatur nihil quos in expedita. Esse blanditiis quidem exercitationem voluptate fugiat aut assumenda asperiores possimus harum, eaque aperiam quos! Perspiciatis voluptate, inventore exercitationem totam quo architecto laboriosam omnis expedita qui ratione amet ipsum obcaecati tempora nostrum unde fuga iusto vitae, dolorum sed? Quos corrupti quas delectus amet reiciendis dignissimos asperiores accusamus animi architecto placeat veniam, obcaecati cupiditate aspernatur, doloremque perspiciatis repellendus ea quo laborum. Eveniet placeat molestiae soluta eius laborum perspiciatis consequatur quia dignissimos amet quidem accusantium quaerat quam commodi, at nam maxime vitae ipsum! Vel id atque veniam impedit voluptatem. Veritatis asperiores quasi eveniet enim nisi laudantium tempora rerum vitae vero incidunt, tempore dolorem dolores numquam molestias placeat impedit similique voluptatem officia. Maiores aperiam exercitationem maxime, odio accusamus voluptatibus eaque, cupiditate quasi aliquid quibusdam quam at officiis quisquam perspiciatis! Quos est impedit at. Consequatur cum explicabo ullam debitis, nihil neque excepturi illum nesciunt ex porro quam aliquid expedita magni illo at aspernatur a ipsa obcaecati, quibusdam recusandae provident voluptate? Soluta, ullam facilis explicabo quia quo ducimus repellat odio. Libero porro at adipisci. Perspiciatis soluta aliquam laboriosam, hic reprehenderit dolor dignissimos quod recusandae, molestias quaerat aut impedit ipsam voluptates veritatis! Rerum perspiciatis excepturi aperiam vel quisquam odit laudantium eius, eligendi corrupti nesciunt doloribus sunt quis impedit, autem quaerat quo maiores, quia labore perferendis qui cupiditate nemo! Vero repellendus saepe reiciendis, pariatur odit nihil soluta at cumque. Ipsa accusamus labore reiciendis fugit odio nam sequi delectus. Eum sunt assumenda error architecto pariatur sed soluta expedita a ea reprehenderit, dolor fugit aliquam? Qui debitis odit quas architecto possimus unde recusandae nam, quo eveniet, culpa illum laborum placeat accusantium. Quasi laboriosam doloribus ad quos distinctio dolores, nulla aperiam minima provident, illo, molestias alias facilis at nostrum placeat. Facere eaque optio commodi tempore iusto a distinctio corrupti doloremque quasi tenetur incidunt suscipit, at sit nostrum est similique quidem odit voluptatum pariatur atque quis non, asperiores adipisci. Officiis nemo magni velit nisi enim adipisci architecto reprehenderit assumenda voluptates sed eum necessitatibus illo cumque quos, quaerat fuga ea nobis esse inventore aspernatur numquam consequatur nam. Temporibus dolor voluptates repellendus quisquam explicabo corporis aspernatur. Repellat nobis, alias tempora natus ut eveniet accusamus pariatur voluptate officia velit nulla itaque similique numquam suscipit harum, culpa repellendus animi ipsam sit libero dolor sequi asperiores minima sapiente? Reiciendis architecto molestiae ut, aspernatur veritatis sequi eveniet harum asperiores fugit perferendis ex placeat voluptatem facere vel sint a, dicta consequuntur. Suscipit iste consequuntur minima ea non eveniet iure, corrupti maiores quibusdam aliquam facere animi necessitatibus est cupiditate dolore assumenda quidem quisquam corporis autem! Dolore tempore labore placeat illo laudantium voluptas nihil corporis incidunt earum, odit veritatis exercitationem deleniti at dolorem. Delectus velit suscipit fuga animi, laboriosam nostrum placeat excepturi dolore similique dicta perspiciatis natus debitis minima iure. Numquam totam perspiciatis neque temporibus laboriosam est ullam autem illum tenetur! Hic nobis perferendis dolores, neque vero nostrum sequi explicabo rerum, veritatis laborum aliquam labore natus deleniti. Labore, ad deleniti. Ex dignissimos laudantium commodi amet nam itaque vero voluptatem praesentium soluta labore, repellat culpa animi odit accusantium suscipit repudiandae tenetur sint optio quas nemo non iusto dicta nihil in. Ducimus neque consectetur officia nostrum, ex nemo laborum aperiam sunt corporis, reprehenderit quasi. Odit neque iusto ea ducimus obcaecati. Illo nam, blanditiis nisi maiores aspernatur vel. Reiciendis expedita vitae necessitatibus quos.
</div>
</div>
</body>
</html>
等高
1. CSS3的弹性盒
2. JS控制
3. 伪等高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container {
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.aside{
float: left;
background: #008c8c;
color: #fff;
width: 300px;
margin-right: 30px;
height: 10000px;
margin-bottom: -9990px;
}
.main{
overflow: hidden;
background: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="aside">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis voluptatibus nesciunt id iusto sapiente at explicabo, dolore eligendi, eum, sunt veritatis animi inventore placeat maiores doloremque quod ducimus maxime laboriosam.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe aliquid sapiente quo corporis ipsa nesciunt voluptatum architecto debitis amet odio quos laborum, non dolorem suscipit dignissimos voluptatibus veniam ad expedita quis culpa nostrum maiores assumenda earum. Commodi illo odio soluta! Obcaecati consectetur, et rem ratione atque quos amet iure debitis repellendus accusantium hic id impedit temporibus? Omnis voluptatem possimus numquam repudiandae similique doloremque voluptates inventore, labore porro dolor quos, incidunt est perferendis ipsam culpa, nostrum officiis repellat dolore sit pariatur quam autem optio impedit? Fugit, velit? Nobis recusandae ex possimus enim animi autem dolores nam natus, blanditiis at velit sed rem impedit error laboriosam voluptatem similique maxime doloremque adipisci illo minima obcaecati? Ea earum ad dicta. Saepe, accusantium minima. Eligendi mollitia architecto quis reprehenderit, dolorem maxime dignissimos iusto? Maiores ratione reiciendis, facilis unde quis velit minima praesentium similique adipisci eos, neque quia facere quibusdam natus error voluptatem dolorum a. Voluptates recusandae perspiciatis quasi ab asperiores cum iure dignissimos. Laborum temporibus ducimus vitae soluta a dignissimos qui? Eius, minima consequuntur praesentium recusandae illo fugit quibusdam provident laborum optio asperiores libero, eligendi repellat aliquam esse ipsa nesciunt doloremque nemo qui maiores eaque rerum? Necessitatibus voluptas nam consectetur voluptate illum, ipsa quaerat! Perspiciatis laudantium labore aliquid quam consequuntur, nisi ex eligendi, officia nesciunt doloribus numquam beatae quidem. Error suscipit maxime nulla. Quas eos, maiores dolor excepturi sunt optio perferendis quasi dolorum tenetur qui, incidunt accusamus voluptas consectetur cum aut ea facilis praesentium eaque a quo asperiores fugiat aperiam repellat. Eius hic aliquid nesciunt dolores non consequatur laudantium ad mollitia harum! Dolore nulla atque id animi perspiciatis expedita tempore sapiente inventore? Modi aperiam enim illo voluptatum temporibus commodi iste quis ab quo, repellendus asperiores tempore adipisci cupiditate similique nesciunt ducimus quos nostrum neque animi nihil ipsum eos pariatur natus aspernatur! Praesentium consequuntur enim quo.
</div>
</div>
</body>
</html>
元素书写顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
padding: 30px;
border: 3px solid;
position: relative;
}
.left {
width: 300px;
background: lightblue;
margin-right: 20px;
position: absolute;
left: 30px;
top: 30px;
}
.right {
width: 300px;
background: lightblue;
margin-left: 20px;
position: absolute;
right: 30px;
top: 30px;
}
.main {
margin: 0 300px;
border: 2px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum eaque neque placeat cupiditate deserunt dicta ratione accusamus incidunt alias inventore at animi modi voluptas sint quibusdam nulla, debitis cumque eveniet maxime dignissimos sed ipsa, quisquam quasi nihil? Odit alias accusantium voluptate necessitatibus. Sed laborum inventore sunt quis maxime, culpa doloremque sit aperiam officia facilis! Error, vero vitae voluptas omnis ab quos autem tenetur quas. Veritatis ratione est molestias animi commodi incidunt aliquid iste, rerum fugiat, praesentium reiciendis perspiciatis delectus iusto quas cumque soluta deleniti voluptatibus reprehenderit beatae sit provident assumenda quaerat numquam! Quo veritatis placeat sequi, dignissimos, ducimus voluptates minus quidem soluta recusandae rem sapiente corrupti voluptatem exercitationem, illum repellendus! Adipisci, reprehenderit aliquam! Debitis maxime placeat sunt optio tempora dolores blanditiis exercitationem, ex labore quia, nostrum corporis dolorem eius? Amet maiores sed optio mollitia nostrum, impedit vero quis, velit inventore perferendis vel est rem temporibus unde odio officia. Alias quod soluta assumenda culpa nulla, nihil quae, fugiat voluptas nisi, consequatur maxime a sit quasi quam totam debitis veniam beatae illum deserunt doloribus aperiam aspernatur architecto reiciendis. Iste incidunt earum provident saepe? Dolore, doloribus cupiditate. Totam, deserunt aliquam tenetur amet inventore impedit delectus ut asperiores nesciunt recusandae iusto beatae eligendi optio minima temporibus, laboriosam libero atque minus corrupti odit dolorem. Eum, dolore expedita. Aliquid libero vitae cupiditate vel, voluptate, sunt assumenda quibusdam perferendis facilis dolore exercitationem vero odit, cum obcaecati tempore distinctio. Dolores ratione nesciunt aspernatur at neque magni facilis expedita optio, porro sunt ab consequuntur atque! Nulla iste perspiciatis fugiat reiciendis accusantium commodi error doloribus voluptate sapiente sint quibusdam inventore, iusto eos veniam consequatur doloremque cumque? Voluptatum rem iste incidunt, aliquam repudiandae ex, exercitationem ipsa corrupti, cupiditate dicta voluptates enim. Cumque magnam vitae aut quae minima quo veniam sequi nulla expedita officia repellat nisi nobis totam incidunt qui ipsam libero numquam delectus in suscipit similique, eveniet inventore. Quia laborum, ipsa eveniet provident a enim minima adipisci! Quas voluptas fuga perferendis quos accusamus nulla, alias repellat id laudantium est qui molestias harum reiciendis vero consequatur officiis rerum esse, odio, libero obcaecati quo enim. Quos provident officia reprehenderit, obcaecati officiis nemo nulla quidem neque sapiente veniam nesciunt aliquam quas, eaque voluptatum similique numquam cumque laudantium fugiat quis minus, quasi dolores? Adipisci fugiat magni, repellendus ducimus at sequi similique esse, nulla corrupti quaerat voluptatum, ea eum ex ullam deserunt. Quibusdam, qui soluta mollitia et voluptatem nostrum! Possimus nesciunt modi omnis, officia similique suscipit voluptatem molestiae harum quis eligendi. Nisi accusantium aperiam est saepe fugit voluptas eius porro nemo ut obcaecati dolores esse repellat rem iste doloremque neque voluptate libero, animi tenetur, velit fuga illum qui nam dignissimos! Voluptatem fugiat tempora vitae eum cumque nisi quo sint vel, quaerat ex aperiam molestias voluptates quia iusto porro, saepe illum rem officiis consequatur nihil quos in expedita. Esse blanditiis quidem exercitationem voluptate fugiat aut assumenda asperiores possimus harum, eaque aperiam quos! Perspiciatis voluptate, inventore exercitationem totam quo architecto laboriosam omnis expedita qui ratione amet ipsum obcaecati tempora nostrum unde fuga iusto vitae, dolorum sed? Quos corrupti quas delectus amet reiciendis dignissimos asperiores accusamus animi architecto placeat veniam, obcaecati cupiditate aspernatur, doloremque perspiciatis repellendus ea quo laborum. Eveniet placeat molestiae soluta eius laborum perspiciatis consequatur quia dignissimos amet quidem accusantium quaerat quam commodi, at nam maxime vitae ipsum! Vel id atque veniam impedit voluptatem. Veritatis asperiores quasi eveniet enim nisi laudantium tempora rerum vitae vero incidunt, tempore dolorem dolores numquam molestias placeat impedit similique voluptatem officia. Maiores aperiam exercitationem maxime, odio accusamus voluptatibus eaque, cupiditate quasi aliquid quibusdam quam at officiis quisquam perspiciatis! Quos est impedit at. Consequatur cum explicabo ullam debitis, nihil neque excepturi illum nesciunt ex porro quam aliquid expedita magni illo at aspernatur a ipsa obcaecati, quibusdam recusandae provident voluptate? Soluta, ullam facilis explicabo quia quo ducimus repellat odio. Libero porro at adipisci. Perspiciatis soluta aliquam laboriosam, hic reprehenderit dolor dignissimos quod recusandae, molestias quaerat aut impedit ipsam voluptates veritatis! Rerum perspiciatis excepturi aperiam vel quisquam odit laudantium eius, eligendi corrupti nesciunt doloribus sunt quis impedit, autem quaerat quo maiores, quia labore perferendis qui cupiditate nemo! Vero repellendus saepe reiciendis, pariatur odit nihil soluta at cumque. Ipsa accusamus labore reiciendis fugit odio nam sequi delectus. Eum sunt assumenda error architecto pariatur sed soluta expedita a ea reprehenderit, dolor fugit aliquam? Qui debitis odit quas architecto possimus unde recusandae nam, quo eveniet, culpa illum laborum placeat accusantium. Quasi laboriosam doloribus ad quos distinctio dolores, nulla aperiam minima provident, illo, molestias alias facilis at nostrum placeat. Facere eaque optio commodi tempore iusto a distinctio corrupti doloremque quasi tenetur incidunt suscipit, at sit nostrum est similique quidem odit voluptatum pariatur atque quis non, asperiores adipisci. Officiis nemo magni velit nisi enim adipisci architecto reprehenderit assumenda voluptates sed eum necessitatibus illo cumque quos, quaerat fuga ea nobis esse inventore aspernatur numquam consequatur nam. Temporibus dolor voluptates repellendus quisquam explicabo corporis aspernatur. Repellat nobis, alias tempora natus ut eveniet accusamus pariatur voluptate officia velit nulla itaque similique numquam suscipit harum, culpa repellendus animi ipsam sit libero dolor sequi asperiores minima sapiente? Reiciendis architecto molestiae ut, aspernatur veritatis sequi eveniet harum asperiores fugit perferendis ex placeat voluptatem facere vel sint a, dicta consequuntur. Suscipit iste consequuntur minima ea non eveniet iure, corrupti maiores quibusdam aliquam facere animi necessitatibus est cupiditate dolore assumenda quidem quisquam corporis autem! Dolore tempore labore placeat illo laudantium voluptas nihil corporis incidunt earum, odit veritatis exercitationem deleniti at dolorem. Delectus velit suscipit fuga animi, laboriosam nostrum placeat excepturi dolore similique dicta perspiciatis natus debitis minima iure. Numquam totam perspiciatis neque temporibus laboriosam est ullam autem illum tenetur! Hic nobis perferendis dolores, neque vero nostrum sequi explicabo rerum, veritatis laborum aliquam labore natus deleniti. Labore, ad deleniti. Ex dignissimos laudantium commodi amet nam itaque vero voluptatem praesentium soluta labore, repellat culpa animi odit accusantium suscipit repudiandae tenetur sint optio quas nemo non iusto dicta nihil in. Ducimus neque consectetur officia nostrum, ex nemo laborum aperiam sunt corporis, reprehenderit quasi. Odit neque iusto ea ducimus obcaecati. Illo nam, blanditiis nisi maiores aspernatur vel. Reiciendis expedita vitae necessitatibus quos.
</div>
<aside class="left">
Lorem ipsum dolor sit amet consectetur</aside>
<aside class="right">
Lorem ipsum dolor, sit amet consectetur a</aside>
</div>
</body>
</html>
后台页面的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
h1 {
margin: 0;
}
.app {
position: fixed;
width: 100%;
height: 100%;
}
.header {
height: 60px;
background: #000;
color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.container{
width: 100%;
height: 100%;
background: lightblue;
padding-top: 60px;
box-sizing: border-box;
}
.container .left{
float: left;
width: 300px;
background: rgb(119, 119, 119);
color: #fff;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
.container .main{
height: 100%;
background: #fff;
padding: 20px;
box-sizing: border-box;
overflow: auto;
}
</style>
</head>
<body>
<div class="app">
<header class="header">
<h1>的撒按时打发十分阿斯蒂发</h1>
</header>
<div class="container">
<aside class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio obcaecati molestias accusantium vel debitis. Nam facilis perferendis corporis ad natus corrupti perspiciatis nisi est, assumenda, ab dicta eos et rem, asperiores necessitatibus sequi quaerat non. Voluptas, perferendis? Est pariatur accusantium quibusdam nemo magnam maiores tenetur, necessitatibus, a esse voluptatem aperiam rerum quae aliquid placeat ullam alias enim. Nobis quasi quaerat veritatis asperiores voluptas minus facere doloribus et libero quibusdam! Et praesentium quaerat odit quo, at recusandae odio repellendus eaque quia eius quidem pariatur optio dicta, enim culpa! Laboriosam pariatur nesciunt recusandae beatae iure ex repellat, repudiandae alias sunt quibusdam, blanditiis praesentium. Necessitatibus qui hic exercitationem tempora ipsam incidunt molestiae earum alias harum sunt enim veniam ipsa molestias commodi, sed inventore itaque vel, consectetur sint. Exercitationem nemo enim autem vitae sunt? Sapiente aliquid, earum fuga at, laudantium commodi ut, consequuntur officia voluptatibus doloremque cum? Laudantium laborum placeat sint maiores non natus tempore. Esse molestias quam architecto soluta et corporis quasi, mollitia distinctio facilis quas asperiores quaerat incidunt error ad, consequatur fugiat voluptatum ipsam harum! Illum necessitatibus deleniti asperiores cum impedit voluptatibus vero quisquam, architecto debitis sunt quibusdam odit ipsum harum pariatur, aliquid totam nobis minima quae delectus accusantium incidunt aspernatur. A fugiat molestias repellat quidem similique, corporis incidunt ducimus. Eum cumque similique, quam itaque rem eius nobis nemo nisi ullam dolorem id exercitationem reprehenderit neque distinctio a corrupti! Ea, dolores suscipit magni accusantium repudiandae mollitia cum similique, impedit animi vitae totam hic optio aut! Repudiandae facere facilis nesciunt non. Provident unde corrupti asperiores error eum qui quos pariatur fugit temporibus id doloribus aspernatur quam vero tempora, aliquid commodi quas cumque, quia recusandae tenetur cum sit dignissimos corporis. Maiores, provident culpa nulla officiis quae, voluptas mollitia praesentium quaerat molestiae quia est repellendus neque beatae? Voluptate, voluptatum iure? Rem facilis a numquam placeat vitae culpa molestiae deleniti ratione sapiente. Accusamus nemo, similique reiciendis ipsam accusantium odit explicabo aut temporibus maiores ipsa, perferendis sequi eos corporis nostrum fugiat adipisci exercitationem quod. Hic optio distinctio ad quos vitae reprehenderit consequuntur atque excepturi veniam pariatur, laudantium eligendi fugiat quod alias aliquam sit perspiciatis dolor nulla! Nisi odio atque soluta quidem harum eligendi inventore. Placeat exercitationem enim nesciunt cupiditate? Sunt veritatis exercitationem iure id ab ratione pariatur quae ducimus numquam autem provident consequuntur reiciendis molestias, maxime aliquam quaerat rem quidem aperiam unde quas deleniti! Illo dolorum beatae impedit, harum mollitia ab facere repellendus quos unde voluptatibus. Error eos et blanditiis ducimus iure dolorum cupiditate? Blanditiis quia odio eaque natus tempora consequatur tenetur dolorum quisquam hic inventore consectetur corrupti numquam, voluptatem et officiis. Iure ratione quasi maiores cum unde, temporibus nostrum voluptate ab molestiae officiis rem neque praesentium facilis sed dicta! Incidunt ipsum fugiat error nostrum beatae soluta nam aliquid, explicabo, officia, sed consequatur blanditiis illo libero eligendi perferendis repudiandae iure eaque. Quos consequuntur minus odit dolorem id. Eum ducimus, aut at a cupiditate voluptatum, aliquam totam similique numquam ab neque enim suscipit illum praesentium, doloribus quas reprehenderit? Reprehenderit neque reiciendis quas sint, molestiae pariatur quae numquam culpa voluptates iure dolores vero eveniet cumque omnis! Minus iure doloremque ab eum aspernatur! Eum alias perspiciatis labore ipsa enim mollitia provident doloremque fugiat, nisi repellendus minima ea molestiae recusandae earum illum. Inventore, sequi quo commodi nulla velit a vero laborum ex libero quam sapiente obcaecati officiis, consequuntur quae. Saepe est voluptates doloribus eveniet dolore sequi enim! Temporibus enim explicabo eum sed non, voluptate aspernatur velit sapiente ducimus laborum suscipit error modi ad voluptas mollitia magni ratione possimus necessitatibus eligendi repudiandae ex ipsum ea accusantium? Cumque minima modi, maxime nemo, repudiandae voluptatem consectetur quia aspernatur excepturi totam rem sunt obcaecati non dicta esse! Ratione vitae ad, eum dicta, fugiat consectetur voluptatibus ab dolores veniam dignissimos aliquid nulla, architecto voluptatum quidem. Exercitationem deleniti ipsum itaque laborum fugit velit autem, sit dicta hic sequi eos optio eaque! Sapiente doloribus natus illo cum, quas nam dicta. Laborum, cum blanditiis dolorem, culpa temporibus sit cumque, repellat natus deleniti ullam voluptate pariatur autem soluta doloremque sunt quidem mollitia iste commodi vero praesentium velit officia nobis quasi! Aliquid facilis minima iusto qui laborum voluptate delectus ea, unde, tempore, debitis asperiores. Quos ut beatae adipisci officia saepe dicta, deserunt voluptas! Cum, provident. Qui aliquid mollitia, reiciendis at, vel, quibusdam sint harum aspernatur sunt explicabo delectus ipsam! Illum cupiditate itaque adipisci nobis. Commodi ab, aut aliquam mollitia impedit voluptatibus molestiae! Quo aut asperiores porro saepe magnam quod facilis adipisci quis praesentium nihil explicabo temporibus in illum quia, doloremque doloribus numquam, distinctio enim quisquam ratione, tenetur quasi? Consectetur, error. Optio maiores placeat exercitationem nulla expedita iure itaque ipsam a architecto voluptas hic asperiores aspernatur perferendis debitis commodi, provident delectus labore! Consectetur perspiciatis, aspernatur earum, sint quo voluptatibus inventore soluta itaque quibusdam minus eligendi numquam qui possimus totam deserunt id accusantium ratione delectus et officiis molestiae natus quam eaque maiores. Quibusdam voluptate quidem necessitatibus, autem magni veritatis odit ad laboriosam itaque? Ea ipsa magni, ad dignissimos exercitationem eaque culpa facere eius sed, explicabo quis nulla aperiam vel mollitia vitae doloremque animi, atque distinctio. In consequatur natus necessitatibus repellat, dolorem aperiam, illo earum soluta quasi debitis, inventore maiores. Non optio vero dolor quia rerum error. Aspernatur repellendus, officia quas praesentium vel ducimus soluta ipsa! Voluptatum tenetur quod et rem soluta aspernatur quisquam voluptates suscipit, expedita ratione ab aliquam harum sapiente nihil, ipsam minima cumque labore? Porro, sint laboriosam? Quam quas fuga iusto laudantium incidunt dignissimos exercitationem vel, porro nisi facere quidem. Iusto, itaque. Odit recusandae cumque sunt aut obcaecati dolorem corrupti nostrum modi, molestias quas. Qui impedit quis perferendis cupiditate dignissimos earum, voluptas reiciendis in modi illum aliquid animi porro quasi dicta dolorem corporis iste facilis sit voluptatum nostrum unde. Dolorum consequatur exercitationem iste provident autem impedit magnam qui beatae est, accusamus facere delectus voluptatum nesciunt quam mollitia? Nulla blanditiis esse et aspernatur rerum tempore, quidem dolorum a saepe explicabo optio, quas debitis voluptates laborum quae dolore enim ratione culpa exercitationem delectus labore! Corrupti, sequi blanditiis, magnam veniam repudiandae quisquam sed atque laborum dignissimos inventore velit voluptates obcaecati laboriosam aut asperiores excepturi.
</aside>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptates facilis numquam aspernatur, impedit similique, tempora temporibus, dicta quam aperiam dignissimos maxime deserunt nemo eum enim. Iusto odio voluptates doloribus cupiditate repellendus impedit, ipsa beatae atque fuga distinctio voluptas saepe nemo commodi, odit minima eveniet dolore voluptate enim! Vel dolores vero beatae eius, iusto quasi reprehenderit, iste delectus tenetur repellat doloribus neque! Cumque rerum, totam ipsum expedita similique quasi corporis quidem consequuntur voluptatibus accusamus libero unde et. Ipsa quasi voluptatem doloribus obcaecati perferendis assumenda cumque, cum, dignissimos repellendus maxime necessitatibus incidunt? Quis ex nobis distinctio, aliquam optio deleniti et non error rerum vel fuga sunt hic voluptatibus officia nisi possimus quod ducimus est dolorem quisquam repellat, expedita debitis eveniet facilis! Perferendis quibusdam cum eos, maiores consequatur omnis quo perspiciatis excepturi, vero eaque sed corrupti repudiandae sit dolorum impedit similique repellat quae nulla tempore maxime tenetur tempora! Sunt, ipsum obcaecati sit distinctio, molestiae quod rerum hic consequuntur, possimus quas voluptas consectetur? Modi amet earum, sequi quam mollitia dignissimos quidem dolores laborum saepe consequatur accusantium tempora consequuntur, officiis in soluta blanditiis odio delectus voluptatibus! Optio quae cumque aperiam similique sapiente eaque, pariatur aut laboriosam ad ea ullam deleniti et laudantium porro nulla nisi! Illo esse ducimus cumque ut ex id, molestias fugit corporis. Ea consequuntur facilis aspernatur totam doloremque mollitia voluptate ipsa soluta culpa, a magni nesciunt, illo expedita consectetur neque quis. Magnam non tenetur reiciendis qui, eos fugiat excepturi, optio architecto recusandae exercitationem dolor autem! Repellat sapiente dolorum molestiae voluptates excepturi iusto qui facere deleniti molestias illo reprehenderit et similique facilis eum delectus sint illum expedita rerum ab modi nisi, libero est? Perspiciatis vitae repellat laboriosam dolores blanditiis accusamus ullam totam? Quis inventore sed eaque voluptate natus maxime, iste blanditiis eos voluptatem qui nulla? Earum perspiciatis sit dolores deserunt amet quod nemo illo magnam totam, dolore soluta eveniet aliquid beatae natus dolor. Voluptas, eius eum ab ut dolorem odio? Eos fugiat rerum quidem sit eaque fugit delectus aut itaque quod deleniti libero, quis, molestiae possimus, dolor laudantium! Numquam ducimus vitae optio qui culpa aperiam dolorem sapiente consectetur saepe hic. Dolores voluptate quos blanditiis at beatae, saepe adipisci, ipsam aperiam voluptates quae tempore cumque? Perspiciatis, voluptatum. Ratione minus sequi facere id esse quaerat rem corporis voluptatem obcaecati possimus, labore rerum aspernatur. Eos accusantium aspernatur repellendus libero doloremque atque nihil ratione officia soluta facere, ea distinctio! Accusantium, labore exercitationem maiores quae voluptatem placeat tempore cumque eius fugiat tenetur iste facilis nemo deleniti dolore enim sequi reiciendis non, itaque unde aperiam ullam! Itaque dignissimos dolorem quod magnam distinctio ducimus doloremque tempora. Sapiente distinctio maiores earum, tempore doloribus placeat quasi vero dolores modi labore suscipit minima eligendi, cupiditate aliquam eos doloremque laboriosam ab debitis ipsum porro dolorem? Ipsam nisi sit illo sapiente et. Ullam dolorem quae id cupiditate error assumenda, delectus a cum, eveniet voluptate numquam mollitia vitae, voluptatibus sed. Voluptates, vitae repudiandae mollitia, quos sequi amet dignissimos possimus, saepe perferendis adipisci tenetur deserunt repellat cupiditate at facere delectus architecto sed! Eveniet dolorem reprehenderit nam tenetur quibusdam id! Ducimus a, veniam placeat inventore velit facilis quo doloribus! Sapiente cum ipsa nam consequuntur, sunt accusantium at assumenda tempore soluta dolorum minima natus. Libero hic debitis ex voluptas, dolor minima quasi, eligendi nisi consectetur unde aliquid commodi aliquam similique velit. Optio atque animi nostrum, alias architecto, ut, error rem praesentium ex repudiandae dolores inventore aspernatur enim illum in voluptas ipsa natus sequi eos harum quisquam! Aperiam, rem amet incidunt saepe laboriosam minima ad porro? Reiciendis reprehenderit id, voluptas quasi consequuntur incidunt cumque dolor animi obcaecati debitis, aspernatur molestiae consequatur minus doloremque soluta magnam ea magni sequi dolorum veritatis. Possimus amet eligendi corrupti. Magni ratione vero totam corporis incidunt nihil officia exercitationem praesentium deleniti unde sapiente commodi non ab, quia fuga ex quibusdam ea reprehenderit ullam doloremque! Facere veniam possimus tenetur alias omnis, nemo dolor repellendus expedita impedit, obcaecati architecto, ut sit animi perferendis officia maiores. Mollitia aut delectus recusandae dicta odit, debitis in soluta ad sunt assumenda quas quibusdam hic perspiciatis accusantium explicabo voluptatem illum natus esse tempore corporis unde ducimus. Possimus incidunt quam molestias iste facere? Aspernatur sint minima doloribus officiis nesciunt doloremque saepe, quo quas veniam quae officia quisquam dolorum quod blanditiis nostrum iste! Fuga aliquam assumenda sapiente, autem cupiditate libero quod reprehenderit quos suscipit consectetur neque possimus, quam, eligendi sit optio sunt iusto quibusdam! Similique exercitationem itaque sunt ducimus doloremque ipsa accusantium dicta sed odit eligendi ea provident quam dolorem assumenda fuga voluptatibus, dolores eum possimus perspiciatis vero nemo. Quisquam quia numquam corrupti fugiat incidunt asperiores blanditiis voluptates pariatur nisi libero officiis suscipit qui, nobis, et facere nihil eligendi modi a quo voluptatum, repellat corporis earum. Dolores maxime commodi consequuntur iusto minima reprehenderit animi perferendis! Officia necessitatibus eum praesentium voluptas, sequi neque labore porro repudiandae reprehenderit omnis molestias natus expedita nemo sint similique pariatur nesciunt, asperiores fugiat placeat quisquam. Rem voluptate quisquam facilis vero sit eius aspernatur distinctio cupiditate, vel expedita enim necessitatibus. Culpa explicabo ex cumque quos eveniet corrupti incidunt ipsum accusantium beatae voluptas, ipsa minima at fugiat sapiente? Necessitatibus eius molestias quis ex explicabo modi magnam aut ipsam non autem inventore, ad accusantium architecto illo! Corporis pariatur suscipit incidunt perspiciatis. Autem quod similique enim quis architecto, et quidem provident. Veniam explicabo pariatur expedita, quibusdam sed quisquam! Odit facilis necessitatibus repellendus inventore praesentium beatae ipsum voluptate atque voluptas consectetur quas nulla nobis quam in officia tempora ex error, vero architecto illum sint blanditiis dolore? Doloribus, vitae vero et incidunt praesentium repellat unde magni accusamus quo rerum animi consectetur nulla? At, voluptate reprehenderit asperiores similique nostrum obcaecati odio. Fuga doloremque ipsam, tenetur corrupti non ad itaque facere, mollitia delectus ex eveniet, commodi iusto perspiciatis? Consectetur maxime assumenda distinctio iure molestiae minima optio ratione? Porro magnam nisi facilis? Est perspiciatis, nihil id minus quaerat sit, tenetur officia doloribus ratione veniam perferendis esse, maiores magni soluta delectus possimus at ipsum temporibus omnis quis earum suscipit. Officiis quos corrupti, nobis provident odio alias quo sequi, culpa perferendis, quod voluptatibus. Tenetur ad praesentium eos nemo, quis sapiente labore!
</div>
</div>
</div>
</body>
</html>
浮动的细节规则
-
左浮动的盒子向上向左排列
-
右浮动的盒子向上向右排列
-
浮动盒子的顶边不得高于上一个盒子的顶边
-
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
行高的取值
line-height
1. px, 像素值
2. 无单位的数字：先继承再计算，多行文本设置行高时建议使用
3. em单位：先计算再继承
4. 百分比：先计算再继承
body背景
画布 canvas
一块区域
特点：
1. 最小宽度为视口宽度
2. 最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图（给body设置背景图才会出现这种情况）
1. 背景图的宽度百分比，相对于视口
2. 背景图的高度百分比，相对于网页高度（HTML的高度）
3. 背景图的横向位置百分比、预设值，相对于视口
4. 背景图的纵向位置百分比、预设值，相对于网页高度（HTML的高度）
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align
预设值
数值
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
1. 设置父元素的字体大小为0
2. 将图片设置为块盒（常见做法）
堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素
1. html元素（根元素）
2. 设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在Z轴上的排列
从后到前的排列顺序：
1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
3. 非定位的常规流块盒
4. 非定位的浮动盒子
5. 非定位的常规流行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文
注意：如果堆叠上下文处在同一级，则HTML越靠后的元素胜出，会覆盖同一级的上一个HTML元素。
每个堆叠上下文，独立于其他堆叠上下文，它们之间的子元素不会相互穿插。
svg
svg: scalable vector graphics，可缩放的矢量图
1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量
怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件
xml语言，svg使用该语言定义
书写svg代码
矩形:rect
圆形：circle
椭圆：ellipse
线条：line
折线：polyline
多边形：polygon
路径：path
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
半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）
Z = closepath
例子
画太极图
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background:#ccc">
<path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50"/>
<path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50"/>
<circle cx="250" cy="150" r="30" fill="#fff"/>
<circle cx="250" cy="350" r="30" fill="#000"/>
</svg>
数据链接
data url
如何书写
数据链接：将目标文件的数据直接书写到路径位置
语法：data:MIME,数据
意义
优点：
1. 减少了浏览器中的请求
请求
响应
减少了请求中浪费的时间
2. 有利于动态生成数据
缺点：
1. 增加了资源的体积
导致了传输内容增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件。
3. 会增加原资源的体积到原来的4/3
应用场景：
1. 但请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。
base64
一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示。
样式补充
display:list-item
设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列
涉及的css：
1. ```list-style-type```
设置次盒子中内容的类型
2. ```list-style-position```
设置次盒子相对于主盒子的位置
3. 速写属性```list-style```
**清空次盒子**
list-style:none
图片失效时的宽高问题
如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
text-align:justify
text-align:
- left: 左对齐
- right：右对齐
- center：居中
- justify：除最后一行外，分散对齐
制作一个三角形
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 end
开始和结束是相对的，不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向
writing-mode：设置文字书写方向
utf-8字符
p::after{
content: "\59EC\6210";
}
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
