Skip to content

Commit b6cd2b2

Browse files
khan4019khan4019
committed
messedup number and order
1 parent cc81ba6 commit b6cd2b2

File tree

1 file changed

+54
-46
lines changed

1 file changed

+54
-46
lines changed

‎css.html‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -178,14 +178,8 @@ <h2>4. px, em or %</h2>
178178
<p>pt, points are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.</p>
179179
<p>ref: <a href="http://css-tricks.com/the-lengths-of-css/">css-tricks: length</a>, <a href="http://css-tricks.com/css-font-size/">css-tricks: px, em, %</a>, <a href="http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/">css font-size</a> </p>
180180
</div>
181-
<div id="mark">
182-
<h2>5. box model</h2>
183-
<p><strong>Question:</strong> What is css box model?</p>
184-
<p><strong>Answer:</strong> everything in a web page is a box where you can control size, position, background, etc. Each box/content area is optionally surrounded by padding, border and margin.</p>
185-
<p>ref: <a href="http://www.w3.org/TR/CSS21/box.html">W3: box model</a>, <a href="http://css-tricks.com/the-css-box-model/">css box model</a></p>
186-
</div>
187181
<div id="scopped">
188-
<h2>6. position</h2>
182+
<h2>5. position</h2>
189183
<p><strong>Question:</strong> How absolute, relative, fixed and static position differ?</p>
190184
<p><strong>Answer:</strong> </p>
191185
<p><em>absolute</em>, place an element exactly where you want to place it. position is relative to parent. if no parent available then relatively place to the page itself.</p>
@@ -194,13 +188,64 @@ <h2>6. position</h2>
194188
<p><em>static</em>, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position mibht be applied to an element.</p>
195189
<p>ref: <a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">css positioning in ten steps</a>, <a href="http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/">css position</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN: position</a></p>
196190
</div>
191+
<div id="">
192+
<h2>6. hidden vs display</h2>
193+
<p><strong>Question:</strong> What are the differences between visibility hidden and display none?</p>
194+
<p><strong>Answer:</strong> </p>
195+
</div>
197196
<div id="http_request">
198197
<h2>7. specificity </h2>
199198
<p><strong>Question:</strong> What is specificity</p>
200199
<p><strong>Answer:</strong> is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence. </p>
201200
<p>inline style usually wins then ID then class value (or pseudo-class or attribute selector), unversal selector (*) has no specificity.</p>
202201
<p>ref: <a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">css specificity: things you need to know</a>, <a href="http://www.standardista.com/css3/css-specificity/">specifishity</a>, <a href="http://specificity.keegan.st/">specificiyt calculator</a></p>
203202
</div>
203+
204+
<div id="mark">
205+
<h2>5. box model</h2>
206+
<p><strong>Question:</strong> What is css box model?</p>
207+
<p><strong>Answer:</strong> everything in a web page is a box where you can control size, position, background, etc. Each box/content area is optionally surrounded by padding, border and margin.</p>
208+
<p>ref: <a href="http://www.w3.org/TR/CSS21/box.html">W3: box model</a>, <a href="http://css-tricks.com/the-css-box-model/">css box model</a></p>
209+
</div>
210+
<div id="standard_quirks">
211+
<h2>14. shadow DOM</h2>
212+
<p><strong>Question:</strong> What is shadow DOM?</p>
213+
<p><strong>Answer:</strong> encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable and u dont have to do iframe. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.</p>
214+
<p>ref: <a href="http://www.w3.org/TR/shadow-dom/#introduction">W3: shadow-DOM</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">html5rock: shadow DOM</a></p>
215+
</div>
216+
<div id="semantic_html">
217+
<h2>15. transition</h2>
218+
<p><strong>Question:</strong> What do u know about tranisition 3D?</p>
219+
<p><strong>Answer:</strong> .</p>
220+
221+
<p>ref: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">css transition</a> <a href="http://www.html5rocks.com/en/tutorials/3d/css/">transition and 3D</a></p>
222+
</div>
223+
<div id="mtuli_lang">
224+
<h2>13. pre processor</h2>
225+
<p><strong>Question:</strong> What are the reasons to use preprocessor?</p>
226+
<p><strong>Answer:</strong> .</p>
227+
228+
ref: <a href="http://www.frontendjournal.com/most-common-technical-interview-question-for-frontend-developers/">most common interview questions</a>
229+
</div>
230+
<div id="svg_canvas">
231+
<h2>12. overflow</h2>
232+
<p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
233+
<pre><code>
234+
&lt;style&gt;<br/> div {<br/> overflow: hidden;<br/> }<br/> p {<br/> float: left;<br/> }<br/>&lt;/style&gt;<br/>&lt;div&gt;<br/> &lt;p&gt;I am floated&lt;/p&gt;<br/> &lt;p&gt;So am I&lt;/p&gt;<br/>&lt;/div&gt;<br/>
235+
</code></pre>
236+
<p><strong>Answer:</strong> yes</p>
237+
<p>ref: <a href="http://css-tricks.com/the-css-overflow-property/">overflow</a> (read the link and add something from it)</p>
238+
</div>
239+
<div id="div_section_article">
240+
<h2>11. only</h2>
241+
<p><strong>Question:</strong> What is the use of only?</p>
242+
<pre><code>
243+
&lt;style&gt;<br/> @media only screen and (max-width: 1024px) {<br/> margin: 0;<br/> }<br/>&lt;/style&gt;<br/>
244+
</code></pre>
245+
<p><strong>Answer:</strong> Stops older browsers from parsing the remainder of the selector</p>
246+
<p><strong>Question:</strong> Does the screen keyword apply to the device's physical screen or the browser's viewport?</p>
247+
<p><strong>Answer:</strong> Browser's Viewport</p>
248+
</div>
204249
<div id="download_order">
205250
<h2>8. applied rule</h2>
206251
<p><strong>Question:</strong> What is the color of text sausage for he following rule?</p>
@@ -270,45 +315,8 @@ <h2>10. download resources</h2>
270315
<p><strong>reason:</strong> .</p>
271316
<p>ref: <a href="">might add css question 18 in david shariff</a> </p>
272317
</div>
273-
<div id="div_section_article">
274-
<h2>11. only</h2>
275-
<p><strong>Question:</strong> What is the use of only?</p>
276-
<pre><code>
277-
&lt;style&gt;<br/> @media only screen and (max-width: 1024px) {<br/> margin: 0;<br/> }<br/>&lt;/style&gt;<br/>
278-
</code></pre>
279-
<p><strong>Answer:</strong> Stops older browsers from parsing the remainder of the selector</p>
280-
<p><strong>Question:</strong> Does the screen keyword apply to the device's physical screen or the browser's viewport?</p>
281-
<p><strong>Answer:</strong> Browser's Viewport</p>
282-
</div>
283-
<div id="svg_canvas">
284-
<h2>12. overflow</h2>
285-
<p><strong>Question:</strong> Does overflow: hidden create a new block formatting context?</p>
286-
<pre><code>
287-
&lt;style&gt;<br/> div {<br/> overflow: hidden;<br/> }<br/> p {<br/> float: left;<br/> }<br/>&lt;/style&gt;<br/>&lt;div&gt;<br/> &lt;p&gt;I am floated&lt;/p&gt;<br/> &lt;p&gt;So am I&lt;/p&gt;<br/>&lt;/div&gt;<br/>
288-
</code></pre>
289-
<p><strong>Answer:</strong> yes</p>
290-
<p>ref: <a href="http://css-tricks.com/the-css-overflow-property/">overflow</a> (read the link and add something from it)</p>
291-
</div>
292-
<div id="mtuli_lang">
293-
<h2>13. pre processor</h2>
294-
<p><strong>Question:</strong> What are the reasons to use preprocessor?</p>
295-
<p><strong>Answer:</strong> .</p>
296-
297-
ref: <a href="http://www.frontendjournal.com/most-common-technical-interview-question-for-frontend-developers/">most common interview questions</a>
298-
</div>
299-
<div id="standard_quirks">
300-
<h2>14. shadow DOM</h2>
301-
<p><strong>Question:</strong> What is shadow DOM?</p>
302-
<p><strong>Answer:</strong> encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable and u dont have to do iframe. if interviewer is not happy with your answer give him the links and tell him to spend a weekend on reading.</p>
303-
<p>ref: <a href="http://www.w3.org/TR/shadow-dom/#introduction">W3: shadow-DOM</a>, <a href="http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">html5rock: shadow DOM</a></p>
304-
</div>
305-
<div id="semantic_html">
306-
<h2>15. transition</h2>
307-
<p><strong>Question:</strong> What do u know about tranisition 3D?</p>
308-
<p><strong>Answer:</strong> .</p>
309-
310-
<p>ref: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">css transition</a> <a href="http://www.html5rocks.com/en/tutorials/3d/css/">transition and 3D</a></p>
311-
</div>
318+
319+
312320
<div>
313321

314322
<h2>temporary list of questions</h2>

0 commit comments

Comments
 (0)