wanderer/TEW-0x00
1
0
Fork 0
Code Issues Pull Requests Releases Activity

added box-sizing related page
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
surtur 2020-04-08 22:11:55 +02:00
parent ad9b418570
commit ffc89477c3
Signed by: wanderer
GPG Key ID: 19CE1EC1D9E0486D
3 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
boxsizing/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>box sizing - tew-0x00</title>
<meta name="description" content="box sizing - tew-0x00">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="/scripts/prism.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/prism.css" data-noprefix/>
</head>
<body>
<header>
<div id="divlogoimg">
<img class="logoimg" src="/media/logo.png">
</div>
</header>
<h3 class="title">box sizing</h3>
<div id="divsection">
<p>Here's a div that uses CSS <code class="language-css">box sizing</code> property, in which the width and height properties are accounted for <i>including</i> content, border and padding values.<br></p>
<p>Other relevant properties to are <code class="language-css">initial</code> that sets the property to its default value, and <code class="language-css">inherit</code>.</p>
<div id="divboxsizing"></div>
<div class="divcodeblock">
<pre><code class="language-css">#divboxsizing1 {
background-color: #5b7efa;
border-radius: 7px;
padding: 3em;
min-height: 100px;
margin: 0 3em;
box-sizing: border-box;
}</code></pre>
</div>
<p>The same thing - only without box-sizing.</p>
<p>Notice how the same padding value (3em) balooned up the height of the div, as opposed to the previous example, where it got absorbed.</p>
<div id="divnoboxsizing"></div>
<div class="divcodeblock">
<pre><code class="language-css">#divnoboxsizing {
background-color: #5b7efa;
border-radius: 7px;
padding: 3em;
min-height: 100px;
margin: 0 3em;
}</code></pre>
</div>
</div>
<footer class="copyright">
&copy; 2020 <a href="https://git.dotya.ml/wanderer" target="_blank">wanderer</a>
· <a href="https://tew0x00.dotya.ml/">tew-0x00</a>
· WTFPL<br>
<a href="https://git.dotya.ml/wanderer/TEW-0x00" target="_blank" title="page source">source</a>
</footer>
</body>
</html>

18
css/style.css
View File

@ -549,6 +549,24 @@ pre {
#divmultiplecolumns p { #divmultiplecolumns p {
text-align: left; text-align: left;
} }
#divboxsizing {
background-color: #5b7efa;
border-radius: 7px;
padding: 3em;
min-height: 100px;
margin: 0 3em;
box-sizing: border-box;
}
#divnoboxsizing {
background-color: #5b7efa;
border-radius: 7px;
padding: 3em;
min-height: 100px;
margin: 0 3em;
}
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
#divmultiplecolumns{ #divmultiplecolumns{
-webkit-column-count: 1; -webkit-column-count: 1;

2
index.html
View File

@ -34,7 +34,7 @@
<li><a href="/transitions/">transitions</a></li> <li><a href="/transitions/">transitions</a></li>
<li><a href="/animations/">animations</a></li> <li><a href="/animations/">animations</a></li>
<li><a href="/multiplecolumns/">multiple columns</a></li> <li><a href="/multiplecolumns/">multiple columns</a></li>
<li><a href="#">box sizing</a></li> <li><a href="/boxsizing/">box sizing</a></li>
<li><a href="#">flexbox</a></li> <li><a href="#">flexbox</a></li>
</ul> </ul>
</div> </div>