/
dis-pos.html
260 lines (199 loc) · 11.4 KB
/
dis-pos.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
---
layout: default
title: Display & Position
---
<div class="row">
<a class="pull-left" href="{{ site.baseurl }}/introduction.html"><i class="glyphicon glyphicon-chevron-left"></i> Introduction</a>
<a class="pull-right" href="{{ site.baseurl }}/clear-float.html">Clear & Float <i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<h1>Display & Position</h1>
<div class="col-md-12 wrapper shadow-med">
<div class="lesson">
<h2 class="title">The Display Property</h2>
<p>The <code>display</code> CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet.</p>
<p>The most commonly used display properties are <code>inline | inline-block | block | none</code></p>
{%highlight css linenos%}
div {
display: inline;
}
div {
display: inline-block;
}
div {
display: block;
}
div {
display: none;
}
{%endhighlight%}
<p>HTML elements will be considered either a block-level element, or an inline-element by default.</p>
<p>The most commonly used <a href="https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements"><strong>block-level elements</strong></a> are <code>div | p | pre | ul, ol | form | section | article</code></p>
<p>The most commonly used <a href="https://developer.mozilla.org/en-US/docs/HTML/Inline_elements"><strong>inline elements</strong></a> are <code>a | span | i | input | select | label</code>.</p>
<div class="well">
<small><i class="glyphicon glyphicon-exclamation-sign"></i> View a full list of the available display properties and their behaviors <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">here</a></small>
</div>
<br />
<h4>Block</h4>
<p><strong>display:block</strong> will create a block-level element that does not allow other elements to the left or right of it by default when rendered on the page. A block-level element will generate whitespace at the top & bottom of itself causing another element to be forced to start on a new line.</p>
{%highlight css linenos%}
.box {
display: block;
width:50px;
height:50px;
border:1px solid #39F;
}
{%endhighlight%}
{% highlight html linenos %}
<!DOCTYPE html>
<html>
<head>
<title>CSS Lunch and Learn</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
{% endhighlight %}
<strong>The Result:</strong>
<iframe src="{{ site.baseurl }}/lessons/dis-pos/block.html"></iframe>
<p><a target="_blank" href="{{ site.baseurl }}/lessons/dis-pos/block.html" class="pull-right"><strong>View the result</strong> <i class="glyphicon glyphicon-circle-arrow-right"></i></a></p>
<br />
<h4>Inline-Block</h4>
<p><strong>display:inline-block</strong> will create an inline element that allows other elements to the left or right of it by default when rendered on the page. An inline-block element can accept arguments for width and height.</p>
{%highlight css linenos%}
.box {
display: inline-block;
width:50px;
height:50px;
border:1px solid #39F;
}
{%endhighlight%}
{% highlight html linenos %}
<!DOCTYPE html>
<html>
<head>
<title>CSS Lunch and Learn</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
{% endhighlight %}
<strong>The Result:</strong>
<iframe src="{{ site.baseurl }}/lessons/dis-pos/inline-block.html"></iframe>
<p><a target="_blank" href="{{ site.baseurl }}/lessons/dis-pos/inline-block.html" class="pull-right"><strong>View the result</strong> <i class="glyphicon glyphicon-circle-arrow-right"></i></a></p>
<br />
<h4>Inline</h4>
<p><strong>display:inline</strong> will create an inline element that allows other elements to the left or right of it by default when rendered on the page. An inline element does NOT accept arguments for width and height.</p>
{%highlight css linenos%}
.box {
display: inline;
width:50px;
height:50px;
border:1px solid #39F;
}
{%endhighlight%}
{% highlight html linenos %}
<!DOCTYPE html>
<html>
<head>
<title>CSS Lunch and Learn</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
{% endhighlight %}
<strong>The Result:</strong>
<iframe src="{{ site.baseurl }}/lessons/dis-pos/inline.html"></iframe>
<p><a target="_blank" href="{{ site.baseurl }}/lessons/dis-pos/inline.html" class="pull-right"><strong>View the result</strong> <i class="glyphicon glyphicon-circle-arrow-right"></i></a></p>
<br />
<h4>None</h4>
<p><strong>display:none</strong> will completely hide an element from the viewport. None of its properties will effect the DOM until it is turned on again to one of the other display properties.</p>
{%highlight css linenos%}
.box {
display: none;
width:50px;
height:50px;
border:1px solid #39F;
}
{%endhighlight%}
<div class="well">
<small><i class="glyphicon glyphicon-exclamation-sign"></i> View a full list of the available display properties and their behaviors <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">here</a></small>
</div>
<h4>display:none vs. visibility:hidden</h4>
<p>There are serious differences between the behavior of both of these statements, even though the result you see in your browser is the same. One of the most notable differences is the effect on accessibility. A screen reader will not be able to access the contents of a div who has been hidden with <code>display:none</code>, because the element is hidden from the DOM all together. However, <code>visibility:hidden</code> will keep the contents of those elements in the DOM, but hide their effects from the rest of the web page.</p>
{%highlight css linenos%}
.hidden {
visibility:hidden;
}
.none {
display:none;
}
{%endhighlight%}
<br />
<h4>visibility:hidden vs. opcacity:0</h4>
<p>The other alternative to hiding content from the DOM and user is to use the <code>opacity</code> property. Opcaity effects the alpha channel of web page content, with a value ranging from <code>1 - 0</code>. So something that is partly visible would have opacity declared like this:</p>
{%highlight css linenos%}
.peekaboo {
opacity:.25;
}
{%endhighlight%}
<p>The previous element would be 25% visible to the client.</p>
<br />
<h4>Resources:</h4>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">https://developer.mozilla.org/en-US/docs/Web/CSS/display</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block">http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block</a> - Answer 2
</li>
<li>
<a href="http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/">http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/</a>
</li>
<li>
<a href="http://css-tricks.com/almanac/properties/d/display/">http://css-tricks.com/almanac/properties/d/display/</a>
</li>
</ul>
</div><!-- .lesson -->
<div class="lesson">
<h2 class="title">The Position Property</h2>
<p>The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.</p>
<p>Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.</p>
<p>There are four different positioning methods.</p>
<p><strong>Static</strong> - HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.</p>
<p>Static positioned elements are not affected by the top, bottom, left, and right properties.</p>
<p><strong>Relative</strong> - A relative positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.</p>
<p>Relatively positioned elements are often used as container blocks for absolutely positioned elements.</p>
<p><strong>Absolute</strong> - An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <code><html></code></p>
<p><strong>Fixed</strong> - An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled</p>
<h4>Resources:</h4>
<ul>
<li>
<a href="http://www.codecademy.com/courses/web-beginner-en-6merh/3/1">Codecademy | CSS Positioning</a>
</li>
<li>
<a href="http://learnlayout.com/position.html">http://learnlayout.com/position.html</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">https://developer.mozilla.org/en-US/docs/Web/CSS/position</a>
</li>
<li>
<a href="http://www.w3schools.com/css/css_positioning.asp">http://www.w3schools.com/css/css_positioning.asp</a>
</li>
<li>
<a href="http://alistapart.com/article/css-positioning-101/">http://alistapart.com/article/css-positioning-101/</a>
</li>
<li>
<a href="http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/">http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/</a>
</li>
<li>
<a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">http://www.barelyfitz.com/screencast/html-training/css/positioning/</a>
</li>
</ul>
</div>
</div>