You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
6.9 KiB
211 lines
6.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<<<<<<< HEAD
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">Portfolio</a></li>
|
|
<li><a href="#">Bio</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<aside>
|
|
<h1>Sidebar</h1>
|
|
</aside>
|
|
|
|
<section>
|
|
<h1>content</h1>
|
|
<div class="small-boxes">
|
|
<div class="box">
|
|
<p>The default display style of a <div> tag is <strong>BLOCK</strong>.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>The best way to horizontally center an element is to set the <em>left-margin</em> and <em>right-margin</em> to <em>auto</em> or use the <em>margin: 0 auto</em> declaration.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p><em>Padding</em> is the space between an element and it's border ("insidey" or "indoorsy"), while <em>margin</em> is the space between that border and an adjacent element ("outsidey" or "outdoorsy").</p>
|
|
</div>
|
|
<div class="box">
|
|
<p><em>Fixed</em> positioning places an element in relation to the browser window, while <em>absolute</em> positioning places an element in relation to it's container.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>A <em>clearfix</em> will auto-size a floating element's container to match the floating element itself. Otherwise, the element can flow outside it's container in wonky ways.</p>
|
|
</div>
|
|
</div>
|
|
<div class="big-boxes">
|
|
<div class="big-box">
|
|
</div>
|
|
<div class="big-box">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<h1>footer</h1>
|
|
</footer>
|
|
|
|
=======
|
|
<header>
|
|
<nav>
|
|
<<<<<<< HEAD
|
|
<<<<<<< HEAD
|
|
<<<<<<< HEAD
|
|
<h1>
|
|
<ul>
|
|
<il><a href=# "Portfolio"></il>
|
|
<il><a href=# "Bio"></il>
|
|
<il><a href=# "Contact"></il>
|
|
</ul>
|
|
</h1>
|
|
=======
|
|
|
|
<ul>
|
|
<ul id="navlist">
|
|
<li><a href="#"> Portfolio</li>
|
|
|
|
<li><a href= "#"> Bio</li>
|
|
|
|
<li><a href="#"> Contact</li>
|
|
</ul>
|
|
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
|
|
=======
|
|
<ul>
|
|
<li>
|
|
<a href="#">Portfolio</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Bio</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Contact</a>
|
|
</li>
|
|
<<<<<<< HEAD
|
|
>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
|
|
=======
|
|
>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
|
|
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
|
|
=======
|
|
<ul id="one">
|
|
<li id="two"><a id="three" href="#portfolio">Portfolio</a></li>
|
|
<li id="two"><a id="three" href="#bio">Bio</a></li>
|
|
<li id="two"><a id="three" href="#contact">Contact</a></li>
|
|
</ul>
|
|
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
|
|
</nav>
|
|
</header>
|
|
<aside>
|
|
<h1>Sidebar</h1>
|
|
</aside>
|
|
<section>
|
|
<h1>content</h1>
|
|
<div class="small-boxes">
|
|
<div class="box">
|
|
<<<<<<< HEAD
|
|
<<<<<<< HEAD
|
|
<<<<<<< HEAD
|
|
<p>block style</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Set the left and right margins to auto</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Padding is the space between the content and the border, whereas margin is the space outside the border.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Fixed position specifies the positioning of a element with respect to the window. Absolute 's offset is relative to its “containing block”.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Clearfix will apply a small bit of content, hidden from view, after the parent element which clears the float or an element.</p>
|
|
=======
|
|
<p>
|
|
Div tags' default display styles are blocks. </p>
|
|
</div>
|
|
<div class="box">
|
|
<p>What is the best way to horizontally style an element?
|
|
</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>
|
|
|
|
The differance between padding and margin is.
|
|
padding is the space between the content and the border, margin is the transparent part
|
|
that seperates the border from other items</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>
|
|
|
|
Fixed elements do not move in a browser, absolute positions are positioned relative to the parent element</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>
|
|
|
|
|
|
"Clearfix" is a method used to fix child elements</p>
|
|
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
|
|
=======
|
|
<p>div's are static unless otherwise specified</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>auto margin will split the margin space equally on both sides</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>padding is the space around an element whereas margin is the space between elements. like if I had HELLO inside a box, the space around HELLO is padding. the space around the box is margin.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>fixed positioning doesn't move as you scroll. absolute positioning acts similarly to fixed except it's position is relative to a parent element. if none are nearby, it uses the document's body.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>dirty trick for fixing an element who's image is taller than the container it's in.</p>
|
|
<<<<<<< HEAD
|
|
>>>>>>> b5af4ab9cb8550a89245310b0417f9cbc3b41bb6
|
|
=======
|
|
>>>>>>> a0ed64614b7db53b94c3755a01320725ba8cfcd5
|
|
>>>>>>> 60e81153ba7c46b8b8e8c59db90b4753f8717219
|
|
=======
|
|
<p>div's display is block</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Kind of depends, but [margin: 0 auto] is good</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>The Content is the nucleus and sits at the center.
|
|
The first layer surrounding it is the Padding and it clears the area and protects the content. The Border surrounds the padding.
|
|
Lastly, the Margin surrounds all 3 is transparent and can be thought of as the space between boxes</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>Absolute position elements are removed from the flow of elements on the page. An element w/ this type of positioning is not affected by/doesn't affect other elements. A fixed position element is positioned relative to the viewport, which doesn't change when the window is scrolled.</p>
|
|
</div>
|
|
<div class="box">
|
|
<p>If you are floating an image, for examoke, and an element next to it has a border that looks ugly by running behind it, using [overflow: auto] under a "clearfix" class in a [div] tag
|
|
will smooth it out and make the border appear around the image as well.</p>
|
|
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
|
|
</div>
|
|
</div>
|
|
<div class="big-boxes">
|
|
<div class="big-box">
|
|
</div>
|
|
<div class="big-box">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer>
|
|
<h1>footer</h1>
|
|
</footer>
|
|
>>>>>>> b43b67dc5a64a14d7c4641060b177d299c360233
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|