-
Notifications
You must be signed in to change notification settings - Fork 0
/
CSS Sizing.html
83 lines (72 loc) · 9.66 KB
/
CSS Sizing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>
*{
margin: 0;
padding: 0;
}
html{
font-size: 12px;
}
.box{
border: 2px solid black;
/* width: 2048px; */
width: 80vw;
height: 10vh;
margin: auto;
background-color: yellow;
box-sizing: border-box;
}
.container{
border: 2px solid black;
/* width: 2048px; */
width: 80vw;
/* height: 80vh; */
min-height: 80vh;
margin: 23px auto;
font-size: 16px;
background-color: yellow;
box-sizing: border-box;
}
.container > div{
font-size: 2rem;
border: 5px solid red;
width: 50%;
}
.container > div > div{
border: 2px solid blue;
width: 50%;
}
.mycont{
border: 2px solid black;
box-sizing: border-box;
margin: 23px auto;
color: brown;
font-size: 32px;
/* width: 100vmin; */
width: 80vw;
}
</style>
</head>
<body>
<div class="box">
this is a box
</div>
<div class="container">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius at dolores quos deleniti illum sint. Nostrum magni, libero eum repellat quasi vel quia. Autem tempora tempore saepe incidunt? Mollitia inventore reiciendis atque facere aliquam accusantium necessitatibus cum corrupti, culpa voluptas, ipsa adipisci, magnam iste vitae! Tenetur modi quaerat rerum dolorem ad laboriosam omnis dignissimos nisi iusto.
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur alias provident vitae!
</div>
</div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam harum repellat numquam odit accusantium et deleniti, est quia accusamus debitis exercitationem omnis ab aut expedita quis earum ex error voluptas aperiam vitae doloribus. Dolor rerum voluptatibus, quo, adipisci ipsam ratione possimus eveniet consequatur, nemo minus eos incidunt voluptate enim cumque quasi inventore. Aspernatur veritatis perspiciatis sequi eaque consectetur, dolor, molestias consequatur rem sint mollitia adipisci. Aliquam nam reiciendis amet sapiente et voluptatem, placeat ipsam rerum doloremque fuga asperiores soluta non ut cupiditate iusto inventore rem earum! Atque, illo, maxime labore delectus odit aspernatur, temporibus et inventore totam est quisquam cum suscipit alias ab. Harum totam quaerat odit corrupti. Perspiciatis sit fugiat optio, est maxime magnam incidunt qui dolores recusandae explicabo nihil aliquid? Explicabo tempora, praesentium placeat repellat, suscipit ab, porro rem alias nam corrupti ipsum dicta cupiditate voluptatibus. Soluta possimus natus sed corporis ipsam enim totam quae magni iusto ratione veniam, dolor minima excepturi repudiandae nihil eaque consectetur vel accusantium ipsa inventore temporibus sunt voluptate mollitia? Itaque natus quas commodi, libero suscipit ex consectetur inventore necessitatibus quibusdam repellat earum perferendis dolorem id aliquam vel dicta, accusamus soluta eveniet sint. Cupiditate ab recusandae veniam. Obcaecati quisquam ea iste officia numquam similique, sed earum officiis repellat vitae, recusandae veniam dignissimos placeat. Consequatur rem veritatis officia quam itaque quod repellat et non ullam veniam maxime ipsum nulla necessitatibus, laborum sapiente amet, dolore omnis ducimus dignissimos labore ipsam tempore expedita molestiae earum? Cum quasi quis quibusdam. Molestiae in veniam ipsam dicta eveniet. Voluptate quasi quidem, ea quibusdam ad iste. Neque fugiat sit accusantium eos necessitatibus iure dolores. Iusto, quia tempore! Quod maiores quibusdam nobis pariatur ex soluta perferendis ad eius quidem distinctio repellat dignissimos nisi obcaecati natus commodi unde asperiores est dolorum, illum id harum delectus architecto inventore. Nihil aliquam vitae inventore? Perferendis animi nostrum autem natus provident saepe impedit beatae fugit illum laborum fuga dolor cupiditate temporibus, in non. Amet inventore veritatis expedita ex. Accusantium magnam enim quaerat aspernatur id fuga, quas aliquam blanditiis, repellendus voluptatibus ad expedita vitae provident porro! Soluta possimus alias explicabo quos animi dolorem doloribus aspernatur. Mollitia saepe rerum asperiores rem, blanditiis error nobis, fugit maxime molestiae labore voluptates temporibus expedita corporis eos obcaecati nemo provident non impedit minima sunt quod qui, explicabo iure cupiditate! Doloribus fugiat distinctio sed soluta, esse minima nihil consectetur commodi temporibus! Ab beatae harum unde suscipit quidem minus iste distinctio at consequatur id, est nisi dolore similique architecto possimus! Sit adipisci neque provident, quos mollitia doloremque nihil accusamus ipsa et cumque corporis error tempore officiis quod necessitatibus nulla amet fuga, eum ratione qui possimus blanditiis repudiandae cum! Accusamus unde voluptates sequi cumque cupiditate soluta facere, magni aspernatur praesentium similique asperiores sapiente ipsam aut aliquam nobis sed explicabo! Vitae voluptatum, recusandae tenetur odio quia omnis, adipisci dolore eligendi magnam unde nostrum, quaerat ullam perferendis dolorem corporis nobis! Cupiditate, odio repellat consequuntur, illum numquam suscipit, pariatur sint eos doloremque eligendi voluptatem possimus eveniet officia fugit hic ipsum nam. Quidem nemo voluptas consequuntur dolore earum numquam veritatis dignissimos iusto debitis quia at eveniet magni molestiae voluptatibus explicabo porro itaque, odit, unde id officiis aliquam quisquam amet, nam illum! Debitis itaque ipsam repellendus rem quam a mollitia facilis, ex laboriosam qui voluptatem dignissimos veniam, doloremque recusandae. Repudiandae, ipsam. Natus ratione accusamus adipisci ut accusantium provident quos necessitatibus tempora eius similique et minus hic cupiditate ullam nemo eligendi non, reiciendis mollitia libero ipsam quidem inventore, dignissimos perspiciatis! Dolor, pariatur! Dolores eligendi cupiditate, accusantium nesciunt maxime debitis quae corporis, maiores magni expedita fugit facilis aut deserunt et ut consequatur. Nemo ipsum fugiat libero vitae eveniet, similique et molestiae minus beatae cum facilis incidunt ea porro cupiditate nisi, optio nulla! Delectus, nobis eveniet. Illum sapiente architecto dicta ipsam voluptates obcaecati natus at excepturi quis rerum soluta iste quia modi temporibus nesciunt quo ut dolore ab, consectetur placeat quam est. Vel doloribus debitis facere natus aut, ex nisi ipsam, sunt dolorum maiores a autem suscipit. Fugit aperiam cumque impedit cupiditate nostrum sed consectetur reiciendis nisi! Praesentium ex deleniti eveniet laboriosam voluptatum obcaecati corporis dolore nihil consequuntur sunt. Officiis quasi inventore id laborum voluptatibus qui sequi eligendi in fugit. Exercitationem accusamus quae expedita illum dolores, facere cum sunt nobis eos rem beatae aspernatur! Repudiandae porro, repellendus mollitia sint debitis sit nisi rem aut atque numquam illo sed odit aperiam hic doloremque tempora temporibus delectus fuga repellat cum voluptate natus magni facere architecto. Esse eius omnis voluptatem. Nemo, cum delectus excepturi dolorum aperiam optio! Temporibus, molestiae non. Culpa officia necessitatibus accusamus nihil enim aperiam consequatur dolorum mollitia totam soluta, cum reprehenderit dolor sapiente repudiandae dolorem aspernatur delectus modi dolores dignissimos neque eos vitae quasi quaerat nulla! Modi ullam obcaecati, cumque, in placeat laboriosam error sit dolor, quibusdam inventore explicabo tempora numquam nemo. Perspiciatis laudantium suscipit sapiente, iusto veniam officiis qui, aspernatur omnis molestias labore a, voluptatum corporis consequatur quas at? Necessitatibus neque sed, inventore soluta quas molestiae fuga sequi vero impedit! Perspiciatis quia sapiente in nobis aspernatur iusto, explicabo voluptas! Quisquam placeat reprehenderit magni repellendus cumque sint neque debitis temporibus ullam voluptates. Enim fugiat corrupti, natus cumque expedita ratione a beatae voluptatibus dolorem, consequatur, asperiores laudantium optio error laboriosam accusamus minus sequi mollitia alias doloribus molestias amet facere nostrum? Sapiente quibusdam sequi ad, quidem tenetur nemo atque repellendus ratione quia eos nisi nostrum odit quaerat, temporibus, fugit facere perferendis deleniti totam in? Repellendus ullam quisquam saepe atque quas commodi quidem, ipsam pariatur nobis, earum reprehenderit debitis recusandae similique nemo magnam. Maiores sequi debitis in, atque laborum numquam reiciendis magnam incidunt quia nemo est vel provident necessitatibus! Debitis consequatur dolore corporis sed, architecto eius hic reiciendis quae eum molestiae? Quidem eligendi adipisci, distinctio ratione dolorem laborum reprehenderit veritatis iusto molestias odit eveniet totam quasi natus reiciendis accusantium vitae quos ipsam id velit dolore a asperiores quae excepturi. Necessitatibus eos deleniti quos temporibus distinctio amet animi atque. Laudantium veniam alias mollitia pariatur ad sequi deserunt officia recusandae impedit excepturi, blanditiis quidem ratione architecto in minima maiores tenetur voluptatibus soluta! Sunt eius alias maxime explicabo distinctio.
</div>
<div class="mycont">
I am another container
</div>
</body>
</html>