第三次周报
六芒星
我们不妨可以看出,六芒星是由两个上下颠倒的等边三角形重叠而成,因此我们只需要做出两个上下颠倒的等边三角形然后利用定位将其重叠即可.
首先,我们需要做出两个三角形,而三角形又是怎样做成的呢?
我们先来看下面的代码:
<head>
<style>
div{
border: 50px solid;
border-color: red green blue yellow;
width: 0;
height: 0;
}
</style>
</head>
<body>
<div></div>
</body>
此时得到如下结果:
由此我们可以看出,三角形是由边框做成,因此我们只需将其中三边的边框遮住即可得到一个三角形.
div{
border: 50px solid;
border-color: transparent transparent black transparent;
width: 0;
height: 0;
}
接下来我们就要将这个直角三角形改成等边三角形,需要改变它的border-width.
div{
border: 50px solid;
border-color: transparent transparent black transparent;
width: 0;
height: 0;
border-width: calc(50px * 1.7320508) 50px;
}
border-width后面跟两个值时分别代表上下边框和左右边框的宽度,而上下边框宽度即为这个三角形的高,左右边框宽度即为这个三角形底边的一半,我们知道等边三角形高与底边一半的比值为√3(约等于1.7320508),因此将该属性如上述代码设置.
这样一个等边三角形就做好了,同理我们可以得到另一个三角形.
两个等边三角形做好后,我们只需要利用定位将其重叠即可.
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexameron</title>
<style>
div{
border: 50px solid;
width: 0;
height: 0;
border-width: calc(50px * 1.7320508) 50px;
}
.one{
border-color: black transparent transparent transparent;
position: relative;
top: 290px;
}
.two{
border-color: transparent transparent black transparent;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
最终我们就能够得到六芒星了!
奥运五环
奥运五环是由五个大小相同颜色不同的圆环组成,重点同样在于边框的设置上.
首先我们需要设置五个div,并设置一些相同的css样式.
<head>
<style>
.item{
width: 150px;
height: 150px;
border: 6px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="item circle1"></div>
<div class="item circle2"></div>
<div class="item circle3"></div>
<div class="item circle4"></div>
<div class="item circle5"></div>
</body>
此时得到如下五个竖直排列的方框.
要想将方框改成圆框,这里需要用到border-radius属性.
.item{
width: 150px;
height: 150px;
border: 6px solid red;
box-sizing: border-box;
border-radius: 50%;
}
将border-radius属性设置为50%即可得到圆框.
然后我们按照奥运五环的颜色分别设置这五个圆环,并给他们设置绝对定位调整好位置即可.
.item{
position: absolute;
width: 150px;
height: 150px;
border: 6px solid red;
box-sizing: border-box;
border-radius: 50%;
}
.circle1{
border-color: blue;
}
.circle2{
left: 130px;
border-color: black;
}
.circle3{
left: 260px;
border-color: red;
}
.circle4{
left: 65px;
top: 110px;
border-color: yellow;
}
.circle5{
left: 195px;
top: 110px;
border-color: green;
}
最终结果如下图:
假若我们想要让这个奥运五环在垂直和水平方向居中:
在这五个圆环外套一个div,并给这个div设置一个绝对定位,使五个圆环相对这个div(最小的定位父元素)进行定位,然后设置其宽高恰好为五环的边界,设置top和left使这个div的左上角定位到中央,再设置margin将五环居中即可.
完整代码如下:
<head>
<style>
.item{
position: absolute;
width: 150px;
height: 150px;
border: 6px solid red;
box-sizing: border-box;
border-radius: 50%;
}
.circle1{
border-color: blue;
}
.circle2{
left: 130px;
border-color: black;
}
.circle3{
left: 260px;
border-color: red;
}
.circle4{
left: 65px;
top: 110px;
border-color: yellow;
}
.circle5{
left: 195px;
top: 110px;
border-color: green;
}
.content{
height: 260px;
width: 410px;
position: absolute;
top: 50%;
left: 50%;
margin: -130px 0 0 -205px;
}
</style>
</head>
<body>
<div class="content">
<div class="item circle1"></div>
<div class="item circle2"></div>
<div class="item circle3"></div>
<div class="item circle4"></div>
<div class="item circle5"></div>
</div>
</body>
布局
两栏布局
一栏固定宽度，一栏自适应.
- 浮动:左边定宽并设置左浮动和margin-right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background: gray;
}
.aside{
width: 300px;
background: lightblue;
float: left;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="aside">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae asperiores libero aspernatur itaque veritatis. Molestias, architecto. Repellat reprehenderit ducimus deleniti assumenda iusto ipsa? Cupiditate, perspiciatis porro? Voluptates suscipit doloribus dolore, eveniet fugiat ipsa necessitatibus perferendis incidunt, distinctio rem delectus aperiam facilis mollitia recusandae. Doloremque aut libero praesentium qui tenetur. Itaque porro placeat, aperiam inventore accusamus laudantium, illo quos eligendi molestias temporibus rerum et quo aliquam ipsum a necessitatibus, facilis laboriosam enim totam ipsa. Id corporis quam eius nemo provident dignissimos earum iusto doloremque nesciunt cumque ad numquam saepe dolor autem magnam itaque porro, suscipit ex? Officiis at et impedit, neque mollitia sit, nostrum, aut modi voluptas asperiores nulla itaque laboriosam eos recusandae incidunt labore! Reprehenderit quidem, vero sunt, ratione assumenda totam vitae autem unde nobis ex ipsa iure libero ab numquam hic. Molestiae officiis nemo eius placeat porro inventore totam obcaecati nesciunt illum harum voluptas ipsam necessitatibus maiores qui debitis, dolores repudiandae assumenda velit atque quae quo magnam nobis minus? Necessitatibus reiciendis error dolore quidem magnam ab rem accusamus dolorem. Assumenda voluptatem dolor saepe fugit a quo quis earum magnam accusamus consequuntur! Itaque distinctio sint numquam repellat. Veniam obcaecati neque ipsum sed nulla praesentium numquam, voluptas labore aut impedit ratione quod aliquam, minus sint accusamus fuga? Nemo sit culpa dicta maxime explicabo. Sit laborum consequatur labore accusantium nam eum dolorem dicta molestiae ipsam, reiciendis expedita enim omnis doloremque ullam id at sapiente! Itaque sunt, consectetur laboriosam eius omnis tempore nemo iusto sit a aut recusandae nulla veniam velit necessitatibus in voluptatibus enim quo sapiente esse perferendis provident maiores. Harum, sapiente in, quam facilis nesciunt explicabo hic sint aspernatur omnis expedita corporis officiis, facere tempora? Distinctio corrupti voluptate iusto non, maiores ea doloremque nam aliquid minima quia dolorem in suscipit dolores excepturi sed dolorum a eum laboriosam quidem. Reiciendis, tempora aspernatur!</div>
<div class="main">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, atque sed eveniet, dignissimos porro voluptas illo inventore hic id esse itaque. Aliquam laudantium adipisci beatae, nisi consequuntur eius minus? Reiciendis rem labore dolor fuga, deleniti minus natus ducimus, fugit eveniet ab eaque, doloribus sunt delectus debitis omnis necessitatibus repellat eius voluptatum odio odit iure? Temporibus harum impedit necessitatibus cupiditate doloremque ipsam labore recusandae at nisi dolores sit ratione quo non rerum suscipit maiores excepturi ad ex architecto debitis, earum commodi nemo. Alias, similique expedita? Iusto blanditiis error unde quidem, praesentium doloremque fuga quasi adipisci repudiandae sint deserunt quaerat officia dolorem ratione itaque consectetur facilis commodi non repellat velit quibusdam asperiores at? Voluptas qui nobis sunt repellat deserunt animi libero ipsa magnam quam. Est quas illum optio autem incidunt ex culpa eaque suscipit a, molestias repellat amet porro voluptatibus ea facere ullam voluptas. Officia, veritatis. Quidem provident quas sapiente beatae maxime non facilis minima fugiat? Distinctio exercitationem dolores modi doloribus soluta suscipit debitis nisi iste voluptas laudantium? Animi culpa nam voluptatibus illo quisquam consequuntur facilis molestias ad quis enim, nostrum pariatur fuga quia vitae saepe optio expedita! Vitae iure perspiciatis, error dolorem qui nostrum! Saepe quaerat aut necessitatibus animi ipsam optio, tempore voluptas temporibus ipsum, in fugit, tenetur quasi asperiores alias cupiditate sit itaque? Praesentium veritatis molestiae sunt libero doloribus provident numquam asperiores corporis sint harum rerum saepe, illo reprehenderit facilis accusantium dignissimos, dolorum accusamus illum velit veniam iusto eius beatae? Hic atque porro laudantium? Dolorum repellendus quo exercitationem magnam architecto! Beatae earum dolorem odio quo magni consequatur molestiae facere unde ab eligendi ipsum quaerat corrupti libero laborum iure eum est perspiciatis, harum non quas. Perspiciatis ipsa qui laudantium, facere explicabo expedita laboriosam. Dignissimos, temporibus. Itaque quam iusto nulla, consectetur reiciendis dolore. Amet eius asperiores incidunt quam nesciunt rerum. Molestiae, quam eos? Magnam accusantium ea incidunt perspiciatis maxime praesentium laudantium atque ad exercitationem id necessitatibus, quisquam tempora consequatur odit explicabo asperiores facere hic! Eum cupiditate architecto debitis, sint ducimus inventore autem porro totam, maiores suscipit iure, voluptatem officia recusandae eius minima id cum laboriosam mollitia voluptatibus consectetur nesciunt tempora vitae. Recusandae, doloribus? Asperiores quod id eveniet dolore iure similique facere ipsam illum. Consequatur delectus iure voluptatum quam quae, accusamus fugiat, quis earum exercitationem officia perferendis in repellendus placeat neque omnis officiis aliquid magnam animi autem quia dolore aspernatur quaerat cumque! Labore quos eos quo, sint molestias magnam at incidunt reprehenderit deleniti molestiae est debitis quaerat obcaecati modi non cumque voluptatum commodi nihil nobis veniam fuga optio similique cum? Suscipit eveniet voluptatum dolor nisi dignissimos iusto ratione reprehenderit necessitatibus soluta quod a ducimus nemo iste laboriosam doloremque, sapiente ipsam natus nobis ipsum enim obcaecati reiciendis quae! Quaerat accusamus facere alias tenetur unde consectetur, numquam illo nemo rem culpa repudiandae reprehenderit laudantium cupiditate dolorem aliquam distinctio veritatis voluptatum ea. Debitis cum ea assumenda quisquam, laborum, distinctio enim aut similique quidem dolorem natus voluptates sequi nulla sunt doloremque perferendis aliquid? Ducimus laboriosam ab minus temporibus est qui eveniet. Corrupti facilis aliquid atque nihil ratione?</div>
</div>
</body>
</html>
- 绝对定位:左边定宽,右边设置绝对定位并设置right和top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background: gray;
position: relative;
}
.aside{
width: 300px;
background: lightblue;
}
.main{
position: absolute;
right: 0;
top: 0;
left: 320px;
}
</style>
</head>
<body>
<div class="container">
<div class="aside">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae asperiores libero aspernatur itaque veritatis. Molestias, architecto. Repellat reprehenderit ducimus deleniti assumenda iusto ipsa? Cupiditate, perspiciatis porro? Voluptates suscipit doloribus dolore, eveniet fugiat ipsa necessitatibus perferendis incidunt, distinctio rem delectus aperiam facilis mollitia recusandae. Doloremque aut libero praesentium qui tenetur. Itaque porro placeat, aperiam inventore accusamus laudantium, illo quos eligendi molestias temporibus rerum et quo aliquam ipsum a necessitatibus, facilis laboriosam enim totam ipsa. Id corporis quam eius nemo provident dignissimos earum iusto doloremque nesciunt cumque ad numquam saepe dolor autem magnam itaque porro, suscipit ex? Officiis at et impedit, neque mollitia sit, nostrum, aut modi voluptas asperiores nulla itaque laboriosam eos recusandae incidunt labore! Reprehenderit quidem, vero sunt, ratione assumenda totam vitae autem unde nobis ex ipsa iure libero ab numquam hic. Molestiae officiis nemo eius placeat porro inventore totam obcaecati nesciunt illum harum voluptas ipsam necessitatibus maiores qui debitis, dolores repudiandae assumenda velit atque quae quo magnam nobis minus? Necessitatibus reiciendis error dolore quidem magnam ab rem accusamus dolorem. Assumenda voluptatem dolor saepe fugit a quo quis earum magnam accusamus consequuntur! Itaque distinctio sint numquam repellat. Veniam obcaecati neque ipsum sed nulla praesentium numquam, voluptas labore aut impedit ratione quod aliquam, minus sint accusamus fuga? Nemo sit culpa dicta maxime explicabo. Sit laborum consequatur labore accusantium nam eum dolorem dicta molestiae ipsam, reiciendis expedita enim omnis doloremque ullam id at sapiente! Itaque sunt, consectetur laboriosam eius omnis tempore nemo iusto sit a aut recusandae nulla veniam velit necessitatibus in voluptatibus enim quo sapiente esse perferendis provident maiores. Harum, sapiente in, quam facilis nesciunt explicabo hic sint aspernatur omnis expedita corporis officiis, facere tempora? Distinctio corrupti voluptate iusto non, maiores ea doloremque nam aliquid minima quia dolorem in suscipit dolores excepturi sed dolorum a eum laboriosam quidem. Reiciendis, tempora aspernatur!</div>
<div class="main">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus, atque sed eveniet, dignissimos porro voluptas illo inventore hic id esse itaque. Aliquam laudantium adipisci beatae, nisi consequuntur eius minus? Reiciendis rem labore dolor fuga, deleniti minus natus ducimus, fugit eveniet ab eaque, doloribus sunt delectus debitis omnis necessitatibus repellat eius voluptatum odio odit iure? Temporibus harum impedit necessitatibus cupiditate doloremque ipsam labore recusandae at nisi dolores sit ratione quo non rerum suscipit maiores excepturi ad ex architecto debitis, earum commodi nemo. Alias, similique expedita? Iusto blanditiis error unde quidem, praesentium doloremque fuga quasi adipisci repudiandae sint deserunt quaerat officia dolorem ratione itaque consectetur facilis commodi non repellat velit quibusdam asperiores at? Voluptas qui nobis sunt repellat deserunt animi libero ipsa magnam quam. Est quas illum optio autem incidunt ex culpa eaque suscipit a, molestias repellat amet porro voluptatibus ea facere ullam voluptas. Officia, veritatis. Quidem provident quas sapiente beatae maxime non facilis minima fugiat? Distinctio exercitationem dolores modi doloribus soluta suscipit debitis nisi iste voluptas laudantium? Animi culpa nam voluptatibus illo quisquam consequuntur facilis molestias ad quis enim, nostrum pariatur fuga quia vitae saepe optio expedita! Vitae iure perspiciatis, error dolorem qui nostrum! Saepe quaerat aut necessitatibus animi ipsam optio, tempore voluptas temporibus ipsum, in fugit, tenetur quasi asperiores alias cupiditate sit itaque? Praesentium veritatis molestiae sunt libero doloribus provident numquam asperiores corporis sint harum rerum saepe, illo reprehenderit facilis accusantium dignissimos, dolorum accusamus illum velit veniam iusto eius beatae? Hic atque porro laudantium? Dolorum repellendus quo exercitationem magnam architecto! Beatae earum dolorem odio quo magni consequatur molestiae facere unde ab eligendi ipsum quaerat corrupti libero laborum iure eum est perspiciatis, harum non quas. Perspiciatis ipsa qui laudantium, facere explicabo expedita laboriosam. Dignissimos, temporibus. Itaque quam iusto nulla, consectetur reiciendis dolore. Amet eius asperiores incidunt quam nesciunt rerum. Molestiae, quam eos? Magnam accusantium ea incidunt perspiciatis maxime praesentium laudantium atque ad exercitationem id necessitatibus, quisquam tempora consequatur odit explicabo asperiores facere hic! Eum cupiditate architecto debitis, sint ducimus inventore autem porro totam, maiores suscipit iure, voluptatem officia recusandae eius minima id cum laboriosam mollitia voluptatibus consectetur nesciunt tempora vitae. Recusandae, doloribus? Asperiores quod id eveniet dolore iure similique facere ipsam illum. Consequatur delectus iure voluptatum quam quae, accusamus fugiat, quis earum exercitationem officia perferendis in repellendus placeat neque omnis officiis aliquid magnam animi autem quia dolore aspernatur quaerat cumque! Labore quos eos quo, sint molestias magnam at incidunt reprehenderit deleniti molestiae est debitis quaerat obcaecati modi non cumque voluptatum commodi nihil nobis veniam fuga optio similique cum? Suscipit eveniet voluptatum dolor nisi dignissimos iusto ratione reprehenderit necessitatibus soluta quod a ducimus nemo iste laboriosam doloremque, sapiente ipsam natus nobis ipsum enim obcaecati reiciendis quae! Quaerat accusamus facere alias tenetur unde consectetur, numquam illo nemo rem culpa repudiandae reprehenderit laudantium cupiditate dolorem aliquam distinctio veritatis voluptatum ea. Debitis cum ea assumenda quisquam, laborum, distinctio enim aut similique quidem dolorem natus voluptates sequi nulla sunt doloremque perferendis aliquid? Ducimus laboriosam ab minus temporibus est qui eveniet. Corrupti facilis aliquid atque nihil ratione?</div>
</div>
</body>
</html>
- 弹性布局(应用较少).
三栏布局
左右两栏定宽度,中间自适应.
- 浮动:左右两栏定宽并分别设置左右浮动和右左margin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.left{
float: left;
width: 300px;
background: lightblue;
margin-right: 20px;
}
.right{
float: right;
width: 300px;
background: lightblue;
margin-left: 20px;
}
.main{
background: gray;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, nam at, repellat vel quam cum accusantium cupiditate officiis odit tenetur rem optio dolores nostrum minus saepe voluptate expedita id, blanditiis maxime porro totam libero odio facere temporibus. Iure quibusdam quidem minima fugit similique, quaerat corporis autem optio hic nam natus neque quia cumque veritatis adipisci at doloribus possimus tenetur. Natus cum ullam, molestias inventore, sed corrupti libero soluta a quas, dignissimos voluptate aspernatur itaque fugit quidem quis quam eveniet voluptas porro voluptatibus sequi veritatis qui. Nobis corporis ducimus non, delectus, voluptatum reprehenderit laboriosam, quasi numquam quia dolores voluptatibus eaque vero magni culpa distinctio tempore doloribus ipsam est? Nulla adipisci voluptas itaque praesentium iste dicta, eum provident quasi consectetur recusandae laudantium eos suscipit doloribus quibusdam hic obcaecati exercitationem impedit, ullam sequi quis illo necessitatibus atque? Architecto nesciunt odio, optio dolorum amet at ipsam ex voluptatem cumque aliquam possimus consectetur temporibus totam! Rerum voluptatibus vel suscipit quis expedita quia quam, architecto velit iste officia aperiam adipisci laborum unde quibusdam nisi minima tempora possimus cum dolore inventore at eligendi. At rem eum provident laborum fuga aperiam accusamus expedita necessitatibus vero voluptas culpa corrupti, nisi exercitationem dicta quam ipsa ea itaque, iste facere fugiat ut maiores velit qui quibusdam! Recusandae exercitationem laudantium voluptas cumque molestias qui architecto laboriosam dolorem at sint repellat, inventore obcaecati, eaque maiores. Quasi minima porro eius nesciunt officia modi obcaecati ad! Earum repellendus ducimus velit nihil debitis, adipisci incidunt quis? Maiores accusamus cum beatae debitis, libero mollitia obcaecati reiciendis sunt vero voluptatum animi ad ipsum asperiores totam culpa omnis provident incidunt iure labore dolores? Ducimus impedit laboriosam porro. Expedita reiciendis earum sed eos praesentium non accusantium temporibus ex impedit! Suscipit, quo ad! Eveniet quam repudiandae dolorem? In, aliquid dolorum pariatur non, quo nesciunt unde natus blanditiis a, provident suscipit! Earum consequatur aspernatur, commodi eos sapiente non unde optio! Labore laboriosam illum praesentium in ullam, architecto quos quasi. Nobis maxime a cumque distinctio hic enim nesciunt animi odio vel quis iusto mollitia ut voluptatum ea dignissimos sed tenetur accusamus eligendi, quidem, ducimus dolores. Minus, adipisci nobis laudantium nostrum facere magnam cum neque obcaecati sit ea ratione quae, temporibus consequatur aliquid. Assumenda reiciendis magnam natus, laborum nesciunt mollitia suscipit magni fugit iusto ex blanditiis qui repellat autem corporis voluptatibus recusandae voluptates maxime velit quae deleniti voluptatem. Voluptatibus ad atque aut, explicabo nostrum in necessitatibus consectetur dignissimos, dolor accusamus quia cum hic architecto recusandae adipisci beatae doloremque ipsam fuga? Voluptatem minus tempore voluptates quas quae non quia vel, a ratione sit esse, atque doloribus maxime optio molestias placeat. Temporibus quo quia accusamus. Incidunt eum delectus magnam aspernatur sit sapiente aut molestias repellat laborum, quos, nesciunt, illo vitae et iusto consequuntur vero tenetur pariatur corrupti modi ullam? Et enim placeat tempore veritatis culpa distinctio, rem libero, cumque incidunt officia, quis eaque vitae numquam nostrum quibusdam animi ipsam nisi corporis rerum? Suscipit, hic! Nemo, distinctio optio obcaecati reprehenderit eos saepe cupiditate delectus? Officia aliquid nam laborum rerum. Similique ipsa aperiam perspiciatis impedit ratione eveniet autem.
</aside>
<aside class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, alias deleniti delectus praesentium tempora libero saepe quod tenetur provident itaque sequi labore veniam. Quas enim repellat praesentium, laudantium dolorum labore aut illo minima quam placeat id ut voluptate at quos suscipit. Quae excepturi enim quos quas fuga quo cumque adipisci dolorem aliquid illum accusantium nisi laudantium soluta laborum, modi aut cum sunt magni ut dignissimos ipsum voluptates, optio obcaecati? Accusamus, assumenda pariatur iusto eius tempore vel asperiores quas, possimus atque suscipit quam laudantium quo officia accusantium hic, numquam quos fugit minus porro obcaecati culpa temporibus provident ipsam? Excepturi eaque officia veniam expedita sunt laudantium delectus est ex at similique, saepe, nobis facere nihil unde! Tempora tenetur omnis expedita est inventore earum fugiat dolorum repellendus, a quaerat minus aperiam alias quae laborum quos nisi, sunt reprehenderit dolores possimus modi officia sint incidunt. Nobis amet obcaecati quia nesciunt sit, magnam iste voluptates ab harum unde illum modi quae odit tempore dolorum id veniam aut quod blanditiis recusandae! Consequatur, necessitatibus fuga quisquam nulla commodi dolor nostrum corrupti molestiae alias debitis vero excepturi reprehenderit, minima enim quae, quia temporibus animi tenetur velit! Hic quos laudantium consequuntur quo fuga ducimus esse sunt eum earum assumenda. Illum itaque minus facilis rerum nulla. Exercitationem sint, sequi et qui suscipit dolorem, omnis eius, unde alias aliquid modi voluptate nostrum maiores cum! Recusandae assumenda perspiciatis eaque ad ea nulla modi consequatur saepe? Quas aliquid quia laudantium, at sequi incidunt ab nisi eos quo itaque facilis voluptatibus. Consectetur rerum at molestiae reprehenderit excepturi molestias ab fuga aspernatur ratione adipisci culpa, iste magnam similique laborum eligendi maiores quaerat illum error ducimus aliquam fugit. Tenetur aliquam laboriosam, earum cumque dicta hic excepturi recusandae modi ea voluptatum mollitia perferendis ad. Iure assumenda suscipit, quidem deserunt perspiciatis eaque voluptatibus earum quibusdam eligendi mollitia possimus itaque cumque sunt, impedit vero. Assumenda libero labore odit blanditiis, aperiam eius et voluptatum aliquam facilis, ab pariatur id sint, vitae ut. Pariatur vel impedit delectus facere, laborum beatae et mollitia id inventore officia sequi quas dignissimos distinctio temporibus quibusdam quae quia accusamus fugit est fugiat laudantium molestiae! Quibusdam nihil eveniet aut consectetur adipisci doloremque maiores, odit architecto nisi. Dolorem, vel natus. Facere eum incidunt praesentium nam dolorum ipsum aut dolor similique ipsa possimus eius dignissimos minima aliquid, omnis, reiciendis ducimus sit ad. Perspiciatis sequi voluptatibus similique repellat totam! Sequi dolor earum incidunt. Cumque eveniet quidem ratione maiores laudantium fugiat doloribus quis qui animi architecto? Inventore numquam dicta dolore impedit ad similique mollitia sit deserunt ipsam amet! Quis incidunt molestiae suscipit, soluta dolores porro sed quas nobis eaque possimus optio sint modi, ratione ea! Delectus, optio fuga. Sint voluptatem quos, dolor rerum qui magnam reiciendis expedita aliquam sequi nobis consequuntur, quae necessitatibus assumenda error tenetur modi eum dolorum quia. Voluptatibus placeat hic sapiente pariatur quis, dolores sit saepe veritatis eos quidem numquam molestiae eius? Incidunt atque architecto aspernatur quidem autem recusandae sunt! Enim, ipsum quod, non iusto optio aliquam beatae similique inventore ipsam placeat nobis sunt, delectus nulla obcaecati reiciendis.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non iure consequatur fugiat quidem dolor cumque, mollitia facilis inventore sint, nihil quo reiciendis earum quos error odit, pariatur voluptate aliquam enim laborum illum aut. Animi atque aspernatur et ducimus cum iste ratione optio possimus, eveniet numquam consequatur ea natus, nisi temporibus sunt commodi deleniti. Est, tempora reiciendis. Vero ipsum inventore necessitatibus vitae, unde libero, dolor qui ad nam accusantium corrupti! Laborum, incidunt eligendi voluptate, eos optio neque maiores non fugit at, qui in minus. Sapiente consectetur cumque perferendis eum optio nesciunt maxime iure. Natus quis voluptate blanditiis est necessitatibus harum officia aut ab iure nam unde cum atque ex tenetur laboriosam, a voluptatem veritatis hic! Eligendi veritatis odio, modi nulla voluptatibus sit provident aperiam dolore consequuntur itaque repellat eaque aut recusandae sed, dolorum est cum quis? Neque similique eius voluptate necessitatibus provident maxime fugiat porro, rem perspiciatis enim cumque accusamus odit praesentium sed, voluptatem quibusdam ullam fuga, nemo fugit officia corporis repellat magni. Porro ea aperiam deserunt tempora non optio repudiandae vero accusantium quidem voluptatibus. Ad incidunt voluptatum veniam veritatis tenetur maiores animi dolorem esse iure sunt exercitationem, beatae voluptas assumenda dolorum facere modi placeat earum? Alias, similique ipsam. Ducimus velit hic modi, quaerat accusantium incidunt aliquam quasi voluptatum similique, quam eos sunt blanditiis magni ea a suscipit earum pariatur eveniet nisi. Dolore consectetur, ex aspernatur dolorem similique numquam! Deserunt officiis pariatur nostrum, voluptas vitae repellat nesciunt quo blanditiis a, veniam, provident ratione voluptates eligendi illo quia? Veritatis sit possimus, velit placeat molestias libero vel! Aspernatur sequi quod ipsa, blanditiis natus vel in pariatur suscipit doloribus nisi odio soluta illum illo commodi earum nemo cupiditate quam tenetur ex consequatur, quisquam et quas. Doloremque, officiis. Dolore, adipisci error. Esse ab cumque sit eveniet, nemo distinctio excepturi asperiores! Incidunt amet saepe eius dolore sapiente nesciunt porro voluptatum autem commodi, culpa odit. Veritatis illo eligendi ipsum ad tenetur corrupti modi accusantium natus exercitationem quaerat dolore fuga maxime amet neque necessitatibus tempora eum dolorum ex animi est, similique nostrum rem ea nobis. Facilis, numquam eum dignissimos odit quos nesciunt quasi illo corporis, mollitia expedita laudantium minus itaque, voluptatem quae saepe quia. Tempore consectetur qui autem amet ullam est alias corporis illo itaque dolorum laborum totam delectus dolores error, fugiat minus nisi? Inventore dolores nemo quisquam quidem praesentium laborum velit nisi, consequuntur similique reiciendis veniam, consectetur sunt, quod distinctio dolore! Facilis iure dicta voluptatibus cum repellat eligendi sunt consequatur velit aperiam saepe, facere minus ullam maiores dolorum in ducimus adipisci. Odit ut harum illum rerum blanditiis enim obcaecati omnis illo, eum consequatur magni quibusdam delectus, aperiam modi? Quis, cum laborum consequatur, tempore facere dolor voluptates sapiente earum vero necessitatibus eveniet at. Magni, sequi! Ipsa animi vel tempora excepturi esse quia expedita quidem fugiat, eos, nesciunt placeat ipsam eaque nobis accusantium necessitatibus exercitationem modi quae consectetur error quo cupiditate. Consequuntur asperiores veniam atque in ut incidunt magni soluta praesentium voluptate harum ipsa enim qui quaerat esse minima, molestiae ab reprehenderit, quam nobis placeat excepturi porro odit nesciunt pariatur! Fugiat nulla maiores consequuntur asperiores, quam dolor ratione voluptas repellendus, beatae, ipsum veritatis vitae blanditiis! Necessitatibus ipsam consequatur quo recusandae quidem quae suscipit nemo debitis reiciendis magni. Sint quae laborum atque dolore suscipit ducimus deserunt aliquam, voluptatibus natus unde a iure, ut eum omnis quidem non maxime cumque vero nulla? Repellendus architecto iste ea eveniet tenetur ex ipsa unde earum saepe provident veniam natus error qui suscipit porro ut alias tempore quaerat sequi neque commodi, numquam inventore. Delectus suscipit dignissimos, veniam alias obcaecati consequuntur accusantium nam ipsum culpa, tenetur recusandae inventore optio veritatis molestiae vero consectetur ullam ducimus nobis, eveniet et? Laboriosam, temporibus quaerat? Delectus eaque sapiente cupiditate odio modi beatae, hic nam, debitis esse incidunt, quisquam eum tenetur necessitatibus dolorum sit ipsam non. Quod quidem neque eligendi beatae nulla! Perspiciatis doloribus pariatur alias tenetur ab nam inventore vel explicabo, aliquam eius eligendi repellat quidem blanditiis illo consequuntur accusantium commodi consectetur necessitatibus. Fuga, nesciunt. Repellat, ratione similique perferendis fugiat odio cumque quaerat dolorem neque cupiditate molestiae voluptas saepe consectetur corporis eos perspiciatis provident iste, explicabo necessitatibus facere? Molestias commodi et temporibus perferendis illo deleniti perspiciatis provident quisquam inventore corporis saepe vitae quam voluptas hic, accusamus qui natus iste quaerat praesentium atque quod voluptate. Facere beatae minima consectetur ipsa, veritatis itaque quia quidem. Eveniet assumenda neque officiis sed possimus doloremque cumque, aperiam nulla tempora omnis perferendis autem incidunt harum eaque suscipit fuga cupiditate pariatur iusto eligendi libero quibusdam atque? Eveniet assumenda sunt recusandae, sint neque illo delectus cupiditate rerum distinctio labore eum dolor eaque autem, ratione atque voluptate eos soluta nisi quam? Sint, facere fuga! Sunt laboriosam esse aperiam natus excepturi impedit dolores optio recusandae voluptatibus est non consectetur culpa enim placeat voluptas molestiae debitis reiciendis dolorem nihil, pariatur tempore. Quae dolore nemo eligendi, doloremque nihil, illo ducimus blanditiis voluptatibus nulla odio recusandae magni quasi tenetur cumque quis optio quam vitae? Sapiente autem excepturi minima dolorem soluta alias quaerat asperiores illo non laborum quidem ex assumenda et, recusandae, sunt eaque vitae? Possimus perspiciatis tenetur quis inventore, pariatur ducimus itaque? Quibusdam expedita odit dolorem laudantium ex, qui placeat eaque cumque incidunt et quasi possimus doloremque nihil sequi quas accusamus cupiditate voluptate distinctio animi amet rerum eum! Dolor soluta fugiat voluptates, laudantium deleniti expedita debitis nam aspernatur, eum magni itaque maxime explicabo quia iure libero commodi eos sit consectetur quis facilis, fugit ut error blanditiis veritatis. Ipsam, cupiditate? Esse error sed animi ipsum provident laborum quas voluptates officiis cum atque, ab ut veritatis beatae cupiditate enim quod commodi laudantium unde nisi optio tempora praesentium. Nemo error quisquam, expedita nam magnam officia blanditiis distinctio deleniti labore iusto rerum architecto in praesentium sed! Accusamus aliquid dolor libero illum deleniti commodi quisquam dolore ad voluptate earum voluptatum, illo praesentium, ab consectetur numquam similique, alias distinctio fugit cupiditate doloribus impedit provident qui. Eius cum corporis eos ullam beatae magnam facilis suscipit nihil minus veniam iste dolorem excepturi vero cumque recusandae odio aspernatur reiciendis, dolores fugiat! Fuga, illum. Quia, esse ipsam quibusdam animi ratione optio. Velit, fugit?
</div>
</div>
</body>
</html>
- 绝对定位:中间设置左右margin,左右两栏设置绝对定位并设置left \ top和right \ top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left{
position: absolute;
left: 0;
top: 8px;
width: 300px;
background: lightblue;
margin-right: 20px;
}
.right{
position: absolute;
right: 0;
top: 8px;
width: 300px;
background: lightblue;
margin-left: 20px;
}
.main{
background: gray;
margin: 0 300px;
}
</style>
</head>
<body>
<div class="container clearfix">
<aside class="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, nam at, repellat vel quam cum accusantium cupiditate officiis odit tenetur rem optio dolores nostrum minus saepe voluptate expedita id, blanditiis maxime porro totam libero odio facere temporibus. Iure quibusdam quidem minima fugit similique, quaerat corporis autem optio hic nam natus neque quia cumque veritatis adipisci at doloribus possimus tenetur. Natus cum ullam, molestias inventore, sed corrupti libero soluta a quas, dignissimos voluptate aspernatur itaque fugit quidem quis quam eveniet voluptas porro voluptatibus sequi veritatis qui. Nobis corporis ducimus non, delectus, voluptatum reprehenderit laboriosam, quasi numquam quia dolores voluptatibus eaque vero magni culpa distinctio tempore doloribus ipsam est? Nulla adipisci voluptas itaque praesentium iste dicta, eum provident quasi consectetur recusandae laudantium eos suscipit doloribus quibusdam hic obcaecati exercitationem impedit, ullam sequi quis illo necessitatibus atque? Architecto nesciunt odio, optio dolorum amet at ipsam ex voluptatem cumque aliquam possimus consectetur temporibus totam! Rerum voluptatibus vel suscipit quis expedita quia quam, architecto velit iste officia aperiam adipisci laborum unde quibusdam nisi minima tempora possimus cum dolore inventore at eligendi. At rem eum provident laborum fuga aperiam accusamus expedita necessitatibus vero voluptas culpa corrupti, nisi exercitationem dicta quam ipsa ea itaque, iste facere fugiat ut maiores velit qui quibusdam! Recusandae exercitationem laudantium voluptas cumque molestias qui architecto laboriosam dolorem at sint repellat, inventore obcaecati, eaque maiores. Quasi minima porro eius nesciunt officia modi obcaecati ad! Earum repellendus ducimus velit nihil debitis, adipisci incidunt quis? Maiores accusamus cum beatae debitis, libero mollitia obcaecati reiciendis sunt vero voluptatum animi ad ipsum asperiores totam culpa omnis provident incidunt iure labore dolores? Ducimus impedit laboriosam porro. Expedita reiciendis earum sed eos praesentium non accusantium temporibus ex impedit! Suscipit, quo ad! Eveniet quam repudiandae dolorem? In, aliquid dolorum pariatur non, quo nesciunt unde natus blanditiis a, provident suscipit! Earum consequatur aspernatur, commodi eos sapiente non unde optio! Labore laboriosam illum praesentium in ullam, architecto quos quasi. Nobis maxime a cumque distinctio hic enim nesciunt animi odio vel quis iusto mollitia ut voluptatum ea dignissimos sed tenetur accusamus eligendi, quidem, ducimus dolores. Minus, adipisci nobis laudantium nostrum facere magnam cum neque obcaecati sit ea ratione quae, temporibus consequatur aliquid. Assumenda reiciendis magnam natus, laborum nesciunt mollitia suscipit magni fugit iusto ex blanditiis qui repellat autem corporis voluptatibus recusandae voluptates maxime velit quae deleniti voluptatem. Voluptatibus ad atque aut, explicabo nostrum in necessitatibus consectetur dignissimos, dolor accusamus quia cum hic architecto recusandae adipisci beatae doloremque ipsam fuga? Voluptatem minus tempore voluptates quas quae non quia vel, a ratione sit esse, atque doloribus maxime optio molestias placeat. Temporibus quo quia accusamus. Incidunt eum delectus magnam aspernatur sit sapiente aut molestias repellat laborum, quos, nesciunt, illo vitae et iusto consequuntur vero tenetur pariatur corrupti modi ullam? Et enim placeat tempore veritatis culpa distinctio, rem libero, cumque incidunt officia, quis eaque vitae numquam nostrum quibusdam animi ipsam nisi corporis rerum? Suscipit, hic! Nemo, distinctio optio obcaecati reprehenderit eos saepe cupiditate delectus? Officia aliquid nam laborum rerum. Similique ipsa aperiam perspiciatis impedit ratione eveniet autem.
</aside>
<aside class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, alias deleniti delectus praesentium tempora libero saepe quod tenetur provident itaque sequi labore veniam. Quas enim repellat praesentium, laudantium dolorum labore aut illo minima quam placeat id ut voluptate at quos suscipit. Quae excepturi enim quos quas fuga quo cumque adipisci dolorem aliquid illum accusantium nisi laudantium soluta laborum, modi aut cum sunt magni ut dignissimos ipsum voluptates, optio obcaecati? Accusamus, assumenda pariatur iusto eius tempore vel asperiores quas, possimus atque suscipit quam laudantium quo officia accusantium hic, numquam quos fugit minus porro obcaecati culpa temporibus provident ipsam? Excepturi eaque officia veniam expedita sunt laudantium delectus est ex at similique, saepe, nobis facere nihil unde! Tempora tenetur omnis expedita est inventore earum fugiat dolorum repellendus, a quaerat minus aperiam alias quae laborum quos nisi, sunt reprehenderit dolores possimus modi officia sint incidunt. Nobis amet obcaecati quia nesciunt sit, magnam iste voluptates ab harum unde illum modi quae odit tempore dolorum id veniam aut quod blanditiis recusandae! Consequatur, necessitatibus fuga quisquam nulla commodi dolor nostrum corrupti molestiae alias debitis vero excepturi reprehenderit, minima enim quae, quia temporibus animi tenetur velit! Hic quos laudantium consequuntur quo fuga ducimus esse sunt eum earum assumenda. Illum itaque minus facilis rerum nulla. Exercitationem sint, sequi et qui suscipit dolorem, omnis eius, unde alias aliquid modi voluptate nostrum maiores cum! Recusandae assumenda perspiciatis eaque ad ea nulla modi consequatur saepe? Quas aliquid quia laudantium, at sequi incidunt ab nisi eos quo itaque facilis voluptatibus. Consectetur rerum at molestiae reprehenderit excepturi molestias ab fuga aspernatur ratione adipisci culpa, iste magnam similique laborum eligendi maiores quaerat illum error ducimus aliquam fugit. Tenetur aliquam laboriosam, earum cumque dicta hic excepturi recusandae modi ea voluptatum mollitia perferendis ad. Iure assumenda suscipit, quidem deserunt perspiciatis eaque voluptatibus earum quibusdam eligendi mollitia possimus itaque cumque sunt, impedit vero. Assumenda libero labore odit blanditiis, aperiam eius et voluptatum aliquam facilis, ab pariatur id sint, vitae ut. Pariatur vel impedit delectus facere, laborum beatae et mollitia id inventore officia sequi quas dignissimos distinctio temporibus quibusdam quae quia accusamus fugit est fugiat laudantium molestiae! Quibusdam nihil eveniet aut consectetur adipisci doloremque maiores, odit architecto nisi. Dolorem, vel natus. Facere eum incidunt praesentium nam dolorum ipsum aut dolor similique ipsa possimus eius dignissimos minima aliquid, omnis, reiciendis ducimus sit ad. Perspiciatis sequi voluptatibus similique repellat totam! Sequi dolor earum incidunt. Cumque eveniet quidem ratione maiores laudantium fugiat doloribus quis qui animi architecto? Inventore numquam dicta dolore impedit ad similique mollitia sit deserunt ipsam amet! Quis incidunt molestiae suscipit, soluta dolores porro sed quas nobis eaque possimus optio sint modi, ratione ea! Delectus, optio fuga. Sint voluptatem quos, dolor rerum qui magnam reiciendis expedita aliquam sequi nobis consequuntur, quae necessitatibus assumenda error tenetur modi eum dolorum quia. Voluptatibus placeat hic sapiente pariatur quis, dolores sit saepe veritatis eos quidem numquam molestiae eius? Incidunt atque architecto aspernatur quidem autem recusandae sunt! Enim, ipsum quod, non iusto optio aliquam beatae similique inventore ipsam placeat nobis sunt, delectus nulla obcaecati reiciendis.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non iure consequatur fugiat quidem dolor cumque, mollitia facilis inventore sint, nihil quo reiciendis earum quos error odit, pariatur voluptate aliquam enim laborum illum aut. Animi atque aspernatur et ducimus cum iste ratione optio possimus, eveniet numquam consequatur ea natus, nisi temporibus sunt commodi deleniti. Est, tempora reiciendis. Vero ipsum inventore necessitatibus vitae, unde libero, dolor qui ad nam accusantium corrupti! Laborum, incidunt eligendi voluptate, eos optio neque maiores non fugit at, qui in minus. Sapiente consectetur cumque perferendis eum optio nesciunt maxime iure. Natus quis voluptate blanditiis est necessitatibus harum officia aut ab iure nam unde cum atque ex tenetur laboriosam, a voluptatem veritatis hic! Eligendi veritatis odio, modi nulla voluptatibus sit provident aperiam dolore consequuntur itaque repellat eaque aut recusandae sed, dolorum est cum quis? Neque similique eius voluptate necessitatibus provident maxime fugiat porro, rem perspiciatis enim cumque accusamus odit praesentium sed, voluptatem quibusdam ullam fuga, nemo fugit officia corporis repellat magni. Porro ea aperiam deserunt tempora non optio repudiandae vero accusantium quidem voluptatibus. Ad incidunt voluptatum veniam veritatis tenetur maiores animi dolorem esse iure sunt exercitationem, beatae voluptas assumenda dolorum facere modi placeat earum? Alias, similique ipsam. Ducimus velit hic modi, quaerat accusantium incidunt aliquam quasi voluptatum similique, quam eos sunt blanditiis magni ea a suscipit earum pariatur eveniet nisi. Dolore consectetur, ex aspernatur dolorem similique numquam! Deserunt officiis pariatur nostrum, voluptas vitae repellat nesciunt quo blanditiis a, veniam, provident ratione voluptates eligendi illo quia? Veritatis sit possimus, velit placeat molestias libero vel! Aspernatur sequi quod ipsa, blanditiis natus vel in pariatur suscipit doloribus nisi odio soluta illum illo commodi earum nemo cupiditate quam tenetur ex consequatur, quisquam et quas. Doloremque, officiis. Dolore, adipisci error. Esse ab cumque sit eveniet, nemo distinctio excepturi asperiores! Incidunt amet saepe eius dolore sapiente nesciunt porro voluptatum autem commodi, culpa odit. Veritatis illo eligendi ipsum ad tenetur corrupti modi accusantium natus exercitationem quaerat dolore fuga maxime amet neque necessitatibus tempora eum dolorum ex animi est, similique nostrum rem ea nobis. Facilis, numquam eum dignissimos odit quos nesciunt quasi illo corporis, mollitia expedita laudantium minus itaque, voluptatem quae saepe quia. Tempore consectetur qui autem amet ullam est alias corporis illo itaque dolorum laborum totam delectus dolores error, fugiat minus nisi? Inventore dolores nemo quisquam quidem praesentium laborum velit nisi, consequuntur similique reiciendis veniam, consectetur sunt, quod distinctio dolore! Facilis iure dicta voluptatibus cum repellat eligendi sunt consequatur velit aperiam saepe, facere minus ullam maiores dolorum in ducimus adipisci. Odit ut harum illum rerum blanditiis enim obcaecati omnis illo, eum consequatur magni quibusdam delectus, aperiam modi? Quis, cum laborum consequatur, tempore facere dolor voluptates sapiente earum vero necessitatibus eveniet at. Magni, sequi! Ipsa animi vel tempora excepturi esse quia expedita quidem fugiat, eos, nesciunt placeat ipsam eaque nobis accusantium necessitatibus exercitationem modi quae consectetur error quo cupiditate. Consequuntur asperiores veniam atque in ut incidunt magni soluta praesentium voluptate harum ipsa enim qui quaerat esse minima, molestiae ab reprehenderit, quam nobis placeat excepturi porro odit nesciunt pariatur! Fugiat nulla maiores consequuntur asperiores, quam dolor ratione voluptas repellendus, beatae, ipsum veritatis vitae blanditiis! Necessitatibus ipsam consequatur quo recusandae quidem quae suscipit nemo debitis reiciendis magni. Sint quae laborum atque dolore suscipit ducimus deserunt aliquam, voluptatibus natus unde a iure, ut eum omnis quidem non maxime cumque vero nulla? Repellendus architecto iste ea eveniet tenetur ex ipsa unde earum saepe provident veniam natus error qui suscipit porro ut alias tempore quaerat sequi neque commodi, numquam inventore. Delectus suscipit dignissimos, veniam alias obcaecati consequuntur accusantium nam ipsum culpa, tenetur recusandae inventore optio veritatis molestiae vero consectetur ullam ducimus nobis, eveniet et? Laboriosam, temporibus quaerat? Delectus eaque sapiente cupiditate odio modi beatae, hic nam, debitis esse incidunt, quisquam eum tenetur necessitatibus dolorum sit ipsam non. Quod quidem neque eligendi beatae nulla! Perspiciatis doloribus pariatur alias tenetur ab nam inventore vel explicabo, aliquam eius eligendi repellat quidem blanditiis illo consequuntur accusantium commodi consectetur necessitatibus. Fuga, nesciunt. Repellat, ratione similique perferendis fugiat odio cumque quaerat dolorem neque cupiditate molestiae voluptas saepe consectetur corporis eos perspiciatis provident iste, explicabo necessitatibus facere? Molestias commodi et temporibus perferendis illo deleniti perspiciatis provident quisquam inventore corporis saepe vitae quam voluptas hic, accusamus qui natus iste quaerat praesentium atque quod voluptate. Facere beatae minima consectetur ipsa, veritatis itaque quia quidem. Eveniet assumenda neque officiis sed possimus doloremque cumque, aperiam nulla tempora omnis perferendis autem incidunt harum eaque suscipit fuga cupiditate pariatur iusto eligendi libero quibusdam atque? Eveniet assumenda sunt recusandae, sint neque illo delectus cupiditate rerum distinctio labore eum dolor eaque autem, ratione atque voluptate eos soluta nisi quam? Sint, facere fuga! Sunt laboriosam esse aperiam natus excepturi impedit dolores optio recusandae voluptatibus est non consectetur culpa enim placeat voluptas molestiae debitis reiciendis dolorem nihil, pariatur tempore. Quae dolore nemo eligendi, doloremque nihil, illo ducimus blanditiis voluptatibus nulla odio recusandae magni quasi tenetur cumque quis optio quam vitae? Sapiente autem excepturi minima dolorem soluta alias quaerat asperiores illo non laborum quidem ex assumenda et, recusandae, sunt eaque vitae? Possimus perspiciatis tenetur quis inventore, pariatur ducimus itaque? Quibusdam expedita odit dolorem laudantium ex, qui placeat eaque cumque incidunt et quasi possimus doloremque nihil sequi quas accusamus cupiditate voluptate distinctio animi amet rerum eum! Dolor soluta fugiat voluptates, laudantium deleniti expedita debitis nam aspernatur, eum magni itaque maxime explicabo quia iure libero commodi eos sit consectetur quis facilis, fugit ut error blanditiis veritatis. Ipsam, cupiditate? Esse error sed animi ipsum provident laborum quas voluptates officiis cum atque, ab ut veritatis beatae cupiditate enim quod commodi laudantium unde nisi optio tempora praesentium. Nemo error quisquam, expedita nam magnam officia blanditiis distinctio deleniti labore iusto rerum architecto in praesentium sed! Accusamus aliquid dolor libero illum deleniti commodi quisquam dolore ad voluptate earum voluptatum, illo praesentium, ab consectetur numquam similique, alias distinctio fugit cupiditate doloribus impedit provident qui. Eius cum corporis eos ullam beatae magnam facilis suscipit nihil minus veniam iste dolorem excepturi vero cumque recusandae odio aspernatur reiciendis, dolores fugiat! Fuga, illum. Quia, esse ipsam quibusdam animi ratione optio. Velit, fugit?
</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">
<title>Document</title>
<style>
.container{
padding: 30px;
border: 3px solid;
min-width: 1000px;
display: flex;
}
.chlid{
flex-shrink: 0;
flex-grow: 0;
}
.left{
width: 300px;
background: lightblue;
margin-right: 20px;
}
.right{
width: 300px;
background: lightblue;
margin-left: 20px;
}
.main{
overflow: hidden;
border: 2px solid;
background: gray;
}
</style>
</head>
<body>
<div class="container">
<aside class="left chlid">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, nam at, repellat vel quam cum accusantium cupiditate officiis odit tenetur rem optio dolores nostrum minus saepe voluptate expedita id, blanditiis maxime porro totam libero odio facere temporibus. Iure quibusdam quidem minima fugit similique, quaerat corporis autem optio hic nam natus neque quia cumque veritatis adipisci at doloribus possimus tenetur. Natus cum ullam, molestias inventore, sed corrupti libero soluta a quas, dignissimos voluptate aspernatur itaque fugit quidem quis quam eveniet voluptas porro voluptatibus sequi veritatis qui. Nobis corporis ducimus non, delectus, voluptatum reprehenderit laboriosam, quasi numquam quia dolores voluptatibus eaque vero magni culpa distinctio tempore doloribus ipsam est? Nulla adipisci voluptas itaque praesentium iste dicta, eum provident quasi consectetur recusandae laudantium eos suscipit doloribus quibusdam hic obcaecati exercitationem impedit, ullam sequi quis illo necessitatibus atque? Architecto nesciunt odio, optio dolorum amet at ipsam ex voluptatem cumque aliquam possimus consectetur temporibus totam! Rerum voluptatibus vel suscipit quis expedita quia quam, architecto velit iste officia aperiam adipisci laborum unde quibusdam nisi minima tempora possimus cum dolore inventore at eligendi. At rem eum provident laborum fuga aperiam accusamus expedita necessitatibus vero voluptas culpa corrupti, nisi exercitationem dicta quam ipsa ea itaque, iste facere fugiat ut maiores velit qui quibusdam! Recusandae exercitationem laudantium voluptas cumque molestias qui architecto laboriosam dolorem at sint repellat, inventore obcaecati, eaque maiores. Quasi minima porro eius nesciunt officia modi obcaecati ad! Earum repellendus ducimus velit nihil debitis, adipisci incidunt quis? Maiores accusamus cum beatae debitis, libero mollitia obcaecati reiciendis sunt vero voluptatum animi ad ipsum asperiores totam culpa omnis provident incidunt iure labore dolores? Ducimus impedit laboriosam porro. Expedita reiciendis earum sed eos praesentium non accusantium temporibus ex impedit! Suscipit, quo ad! Eveniet quam repudiandae dolorem? In, aliquid dolorum pariatur non, quo nesciunt unde natus blanditiis a, provident suscipit! Earum consequatur aspernatur, commodi eos sapiente non unde optio! Labore laboriosam illum praesentium in ullam, architecto quos quasi. Nobis maxime a cumque distinctio hic enim nesciunt animi odio vel quis iusto mollitia ut voluptatum ea dignissimos sed tenetur accusamus eligendi, quidem, ducimus dolores. Minus, adipisci nobis laudantium nostrum facere magnam cum neque obcaecati sit ea ratione quae, temporibus consequatur aliquid. Assumenda reiciendis magnam natus, laborum nesciunt mollitia suscipit magni fugit iusto ex blanditiis qui repellat autem corporis voluptatibus recusandae voluptates maxime velit quae deleniti voluptatem. Voluptatibus ad atque aut, explicabo nostrum in necessitatibus consectetur dignissimos, dolor accusamus quia cum hic architecto recusandae adipisci beatae doloremque ipsam fuga? Voluptatem minus tempore voluptates quas quae non quia vel, a ratione sit esse, atque doloribus maxime optio molestias placeat. Temporibus quo quia accusamus. Incidunt eum delectus magnam aspernatur sit sapiente aut molestias repellat laborum, quos, nesciunt, illo vitae et iusto consequuntur vero tenetur pariatur corrupti modi ullam? Et enim placeat tempore veritatis culpa distinctio, rem libero, cumque incidunt officia, quis eaque vitae numquam nostrum quibusdam animi ipsam nisi corporis rerum? Suscipit, hic! Nemo, distinctio optio obcaecati reprehenderit eos saepe cupiditate delectus? Officia aliquid nam laborum rerum. Similique ipsa aperiam perspiciatis impedit ratione eveniet autem.
</aside>
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non iure consequatur fugiat quidem dolor cumque, mollitia facilis inventore sint, nihil quo reiciendis earum quos error odit, pariatur voluptate aliquam enim laborum illum aut. Animi atque aspernatur et ducimus cum iste ratione optio possimus, eveniet numquam consequatur ea natus, nisi temporibus sunt commodi deleniti. Est, tempora reiciendis. Vero ipsum inventore necessitatibus vitae, unde libero, dolor qui ad nam accusantium corrupti! Laborum, incidunt eligendi voluptate, eos optio neque maiores non fugit at, qui in minus. Sapiente consectetur cumque perferendis eum optio nesciunt maxime iure. Natus quis voluptate blanditiis est necessitatibus harum officia aut ab iure nam unde cum atque ex tenetur laboriosam, a voluptatem veritatis hic! Eligendi veritatis odio, modi nulla voluptatibus sit provident aperiam dolore consequuntur itaque repellat eaque aut recusandae sed, dolorum est cum quis? Neque similique eius voluptate necessitatibus provident maxime fugiat porro, rem perspiciatis enim cumque accusamus odit praesentium sed, voluptatem quibusdam ullam fuga, nemo fugit officia corporis repellat magni. Porro ea aperiam deserunt tempora non optio repudiandae vero accusantium quidem voluptatibus. Ad incidunt voluptatum veniam veritatis tenetur maiores animi dolorem esse iure sunt exercitationem, beatae voluptas assumenda dolorum facere modi placeat earum? Alias, similique ipsam. Ducimus velit hic modi, quaerat accusantium incidunt aliquam quasi voluptatum similique, quam eos sunt blanditiis magni ea a suscipit earum pariatur eveniet nisi. Dolore consectetur, ex aspernatur dolorem similique numquam! Deserunt officiis pariatur nostrum, voluptas vitae repellat nesciunt quo blanditiis a, veniam, provident ratione voluptates eligendi illo quia? Veritatis sit possimus, velit placeat molestias libero vel! Aspernatur sequi quod ipsa, blanditiis natus vel in pariatur suscipit doloribus nisi odio soluta illum illo commodi earum nemo cupiditate quam tenetur ex consequatur, quisquam et quas. Doloremque, officiis. Dolore, adipisci error. Esse ab cumque sit eveniet, nemo distinctio excepturi asperiores! Incidunt amet saepe eius dolore sapiente nesciunt porro voluptatum autem commodi, culpa odit. Veritatis illo eligendi ipsum ad tenetur corrupti modi accusantium natus exercitationem quaerat dolore fuga maxime amet neque necessitatibus tempora eum dolorum ex animi est, similique nostrum rem ea nobis. Facilis, numquam eum dignissimos odit quos nesciunt quasi illo corporis, mollitia expedita laudantium minus itaque, voluptatem quae saepe quia. Tempore consectetur qui autem amet ullam est alias corporis illo itaque dolorum laborum totam delectus dolores error, fugiat minus nisi? Inventore dolores nemo quisquam quidem praesentium laborum velit nisi, consequuntur similique reiciendis veniam, consectetur sunt, quod distinctio dolore! Facilis iure dicta voluptatibus cum repellat eligendi sunt consequatur velit aperiam saepe, facere minus ullam maiores dolorum in ducimus adipisci. Odit ut harum illum rerum blanditiis enim obcaecati omnis illo, eum consequatur magni quibusdam delectus, aperiam modi? Quis, cum laborum consequatur, tempore facere dolor voluptates sapiente earum vero necessitatibus eveniet at. Magni, sequi! Ipsa animi vel tempora excepturi esse quia expedita quidem fugiat, eos, nesciunt placeat ipsam eaque nobis accusantium necessitatibus exercitationem modi quae consectetur error quo cupiditate. Consequuntur asperiores veniam atque in ut incidunt magni soluta praesentium voluptate harum ipsa enim qui quaerat esse minima, molestiae ab reprehenderit, quam nobis placeat excepturi porro odit nesciunt pariatur! Fugiat nulla maiores consequuntur asperiores, quam dolor ratione voluptas repellendus, beatae, ipsum veritatis vitae blanditiis! Necessitatibus ipsam consequatur quo recusandae quidem quae suscipit nemo debitis reiciendis magni. Sint quae laborum atque dolore suscipit ducimus deserunt aliquam, voluptatibus natus unde a iure, ut eum omnis quidem non maxime cumque vero nulla? Repellendus architecto iste ea eveniet tenetur ex ipsa unde earum saepe provident veniam natus error qui suscipit porro ut alias tempore quaerat sequi neque commodi, numquam inventore. Delectus suscipit dignissimos, veniam alias obcaecati consequuntur accusantium nam ipsum culpa, tenetur recusandae inventore optio veritatis molestiae vero consectetur ullam ducimus nobis, eveniet et? Laboriosam, temporibus quaerat? Delectus eaque sapiente cupiditate odio modi beatae, hic nam, debitis esse incidunt, quisquam eum tenetur necessitatibus dolorum sit ipsam non. Quod quidem neque eligendi beatae nulla! Perspiciatis doloribus pariatur alias tenetur ab nam inventore vel explicabo, aliquam eius eligendi repellat quidem blanditiis illo consequuntur accusantium commodi consectetur necessitatibus. Fuga, nesciunt. Repellat, ratione similique perferendis fugiat odio cumque quaerat dolorem neque cupiditate molestiae voluptas saepe consectetur corporis eos perspiciatis provident iste, explicabo necessitatibus facere? Molestias commodi et temporibus perferendis illo deleniti perspiciatis provident quisquam inventore corporis saepe vitae quam voluptas hic, accusamus qui natus iste quaerat praesentium atque quod voluptate. Facere beatae minima consectetur ipsa, veritatis itaque quia quidem. Eveniet assumenda neque officiis sed possimus doloremque cumque, aperiam nulla tempora omnis perferendis autem incidunt harum eaque suscipit fuga cupiditate pariatur iusto eligendi libero quibusdam atque? Eveniet assumenda sunt recusandae, sint neque illo delectus cupiditate rerum distinctio labore eum dolor eaque autem, ratione atque voluptate eos soluta nisi quam? Sint, facere fuga! Sunt laboriosam esse aperiam natus excepturi impedit dolores optio recusandae voluptatibus est non consectetur culpa enim placeat voluptas molestiae debitis reiciendis dolorem nihil, pariatur tempore. Quae dolore nemo eligendi, doloremque nihil, illo ducimus blanditiis voluptatibus nulla odio recusandae magni quasi tenetur cumque quis optio quam vitae? Sapiente autem excepturi minima dolorem soluta alias quaerat asperiores illo non laborum quidem ex assumenda et, recusandae, sunt eaque vitae? Possimus perspiciatis tenetur quis inventore, pariatur ducimus itaque? Quibusdam expedita odit dolorem laudantium ex, qui placeat eaque cumque incidunt et quasi possimus doloremque nihil sequi quas accusamus cupiditate voluptate distinctio animi amet rerum eum! Dolor soluta fugiat voluptates, laudantium deleniti expedita debitis nam aspernatur, eum magni itaque maxime explicabo quia iure libero commodi eos sit consectetur quis facilis, fugit ut error blanditiis veritatis. Ipsam, cupiditate? Esse error sed animi ipsum provident laborum quas voluptates officiis cum atque, ab ut veritatis beatae cupiditate enim quod commodi laudantium unde nisi optio tempora praesentium. Nemo error quisquam, expedita nam magnam officia blanditiis distinctio deleniti labore iusto rerum architecto in praesentium sed! Accusamus aliquid dolor libero illum deleniti commodi quisquam dolore ad voluptate earum voluptatum, illo praesentium, ab consectetur numquam similique, alias distinctio fugit cupiditate doloribus impedit provident qui. Eius cum corporis eos ullam beatae magnam facilis suscipit nihil minus veniam iste dolorem excepturi vero cumque recusandae odio aspernatur reiciendis, dolores fugiat! Fuga, illum. Quia, esse ipsam quibusdam animi ratione optio. Velit, fugit?
</div>
<aside class="right chlid">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, alias deleniti delectus praesentium tempora libero saepe quod tenetur provident itaque sequi labore veniam. Quas enim repellat praesentium, laudantium dolorum labore aut illo minima quam placeat id ut voluptate at quos suscipit. Quae excepturi enim quos quas fuga quo cumque adipisci dolorem aliquid illum accusantium nisi laudantium soluta laborum, modi aut cum sunt magni ut dignissimos ipsum voluptates, optio obcaecati? Accusamus, assumenda pariatur iusto eius tempore vel asperiores quas, possimus atque suscipit quam laudantium quo officia accusantium hic, numquam quos fugit minus porro obcaecati culpa temporibus provident ipsam? Excepturi eaque officia veniam expedita sunt laudantium delectus est ex at similique, saepe, nobis facere nihil unde! Tempora tenetur omnis expedita est inventore earum fugiat dolorum repellendus, a quaerat minus aperiam alias quae laborum quos nisi, sunt reprehenderit dolores possimus modi officia sint incidunt. Nobis amet obcaecati quia nesciunt sit, magnam iste voluptates ab harum unde illum modi quae odit tempore dolorum id veniam aut quod blanditiis recusandae! Consequatur, necessitatibus fuga quisquam nulla commodi dolor nostrum corrupti molestiae alias debitis vero excepturi reprehenderit, minima enim quae, quia temporibus animi tenetur velit! Hic quos laudantium consequuntur quo fuga ducimus esse sunt eum earum assumenda. Illum itaque minus facilis rerum nulla. Exercitationem sint, sequi et qui suscipit dolorem, omnis eius, unde alias aliquid modi voluptate nostrum maiores cum! Recusandae assumenda perspiciatis eaque ad ea nulla modi consequatur saepe? Quas aliquid quia laudantium, at sequi incidunt ab nisi eos quo itaque facilis voluptatibus. Consectetur rerum at molestiae reprehenderit excepturi molestias ab fuga aspernatur ratione adipisci culpa, iste magnam similique laborum eligendi maiores quaerat illum error ducimus aliquam fugit. Tenetur aliquam laboriosam, earum cumque dicta hic excepturi recusandae modi ea voluptatum mollitia perferendis ad. Iure assumenda suscipit, quidem deserunt perspiciatis eaque voluptatibus earum quibusdam eligendi mollitia possimus itaque cumque sunt, impedit vero. Assumenda libero labore odit blanditiis, aperiam eius et voluptatum aliquam facilis, ab pariatur id sint, vitae ut. Pariatur vel impedit delectus facere, laborum beatae et mollitia id inventore officia sequi quas dignissimos distinctio temporibus quibusdam quae quia accusamus fugit est fugiat laudantium molestiae! Quibusdam nihil eveniet aut consectetur adipisci doloremque maiores, odit architecto nisi. Dolorem, vel natus. Facere eum incidunt praesentium nam dolorum ipsum aut dolor similique ipsa possimus eius dignissimos minima aliquid, omnis, reiciendis ducimus sit ad. Perspiciatis sequi voluptatibus similique repellat totam! Sequi dolor earum incidunt. Cumque eveniet quidem ratione maiores laudantium fugiat doloribus quis qui animi architecto? Inventore numquam dicta dolore impedit ad similique mollitia sit deserunt ipsam amet! Quis incidunt molestiae suscipit, soluta dolores porro sed quas nobis eaque possimus optio sint modi, ratione ea! Delectus, optio fuga. Sint voluptatem quos, dolor rerum qui magnam reiciendis expedita aliquam sequi nobis consequuntur, quae necessitatibus assumenda error tenetur modi eum dolorum quia. Voluptatibus placeat hic sapiente pariatur quis, dolores sit saepe veritatis eos quidem numquam molestiae eius? Incidunt atque architecto aspernatur quidem autem recusandae sunt! Enim, ipsum quod, non iusto optio aliquam beatae similique inventore ipsam placeat nobis sunt, delectus nulla obcaecati reiciendis.
</aside>
</div>
</body>
</html>
等高
- CSS3的弹性盒
- JS控制
- 伪等高
弹性盒子(Flex Box)
CSS3弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性子元素默认只在盒子内的一行显示,当子元素的宽度大于容器宽度时,子元素宽度会同时减小.
设为flex布局以后，子元素的float、clear和vertical-align属性将失效.
弹性盒子由弹性容器(flex-container)和弹性子元素(flex-item)组成.
display属性:flex \ inline-flex
弹性容器属性
- flex-direction
指定了弹性子元素在父容器中的位置
- justify-content
内容对齐,把弹性项沿着弹性容器的主轴线对齐.
- align-items
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式.
- flex-wrap
用于指定弹性盒子的子元素换行方式
- align-content
用于修改 flex-wrap 属性的行为,类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐.
弹性子元素属性
- order
设置弹性盒子的子元素排列顺序,用整数值来定义，数值小的排在前面,可以为负值.
- align-self
用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式.
- flex
用于指定弹性子元素如何分配空间.
将margin设为auto可以使垂直和水平方向的同时居中.
元素书写顺序
先写浮动(侧边栏)再写常规流(主区域)
主区域代码靠前书写:
设置左右margin留出左右空间,设置左右边栏绝对定位.
后台页面布局
两栏布局,左右两边都可以分别滚动.
overflow:auto.
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
