Last active
August 29, 2015 14:27
-
-
Save wangkeluo/7a031ae9db3261e2ebd5 to your computer and use it in GitHub Desktop.
Revisions
-
wangkeluo revised this gist
Aug 19, 2015 . No changes.There are no files selected for viewing
-
Aug 19, 2015 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Aug 19, 2015 . 1 changed file with 17 additions and 60 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,60 +1,17 @@ `Mark.Huang @ 2015/08/19` ### css 的优先级 > CSS priority, you can refer to developer console style info, it shows priority, the topest is the highest priority, which html tag style should take precedence over CSS, multiple CSS depends on loading sequence. Seems last loaded will take effect, but mostly, they are computed result, effects may come from multiple CSS files ### what is the essential setting to make a div stay where it should be? > DIV, or in general, all html tags, except few one, are using same "rendering" principle, their position, depends on the type of positioning methods (fixed, absolute, relative, default etc), combined with other settings, it is not two dimension, but at least three dimensions, z-index controls which on the top. What I mean at least three dimensions, because you sometimes need to think about animation, which is time factor ### why is childen element out of the region of its parent in common?how to make children always inside the region of its parent element? > A bit related to Q2, normally, if you don't apply CSS, their position is "inherited". You need to separate the concepts of DOM tree and "rendering". All DOM are nested, you can tell their relationship intuitively. Not to renderinging, rendering needs to consider individual element, computed and merged all style values into final style and then pass to the rendering engine to display the result The reason why different browsers sometimes display differently, hugely due to their rendering engine, previous IE lags FF, Chrome and Safari in the rendering. To ensure child follow parent, you can use specific sytle to have combined end result, once again, I don't thin genric work very well, web site is tailored made, turn it generic to different size is asking for trouble, don't bother doing it. ### why are some "div"s created with height and width but others not? what does a div with 0 height and width means? > it is beauty of DOM, the div with height 0 or visibility none, somehow just like internal variable as a placeholder, it could be used as data storage, you can use input type hidden, or div or span, any tag you can associated data with it, in form of attribute, nested text or jquery data structure data(key, val). In addition, it's current value height 0, doesn't mean it won't change, consider javascript, it may change the dimension depends on event. Let say error, you turn div height to some value and show the error message -
Aug 19, 2015 . No changes.There are no files selected for viewing
-
Aug 19, 2015 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,60 @@ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- common.css --> <style>body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:16px 2%;color:#333;word-wrap:break-word}img{max-width:100%!important}code{margin:0;padding:.2em 0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}code:after,code:before{letter-spacing:-.2em;content:"\00a0"}pre{margin:0}pre>code{margin:0;padding:0;font-size:100%;word-break:normal;background:0 0;border:0}blockquote{margin:0;padding:0 15px;color:#777;border-left:4px solid #ddd}hr{background-color:#ddd;border:0;height:1px;margin:15px 0}ol{list-style-type:decimal}ol ol,ul ol{list-style-type:lower-latin}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-roman}table{border-spacing:0;border-collapse:collapse;margin-top:0;margin-bottom:16px}table th{font-weight:700}table td,table th{padding:6px 13px;border:1px solid #ddd}table tr{background-color:#fff;border-top:1px solid #ccc}table tr:nth-child(even){background-color:#f8f8f8}input[type=checkbox]{cursor:default;margin-right:.5em}.task-list-item{list-style-type:none}.task-list-item+.task-list-item{margin-top:3px}.task-list-item input{float:left;margin:.3em 1em .25em -1.6em;vertical-align:middle}</style> <!-- exported.css --> <style> #nav{margin:5px 10px 10px;font-size:15px} #titlearea{border-bottom:1px solid #ccc;font-size:17px;padding:10px} #contentarea{font-size:15px;margin:16px 0} .cell{outline:0;min-height:20px;margin:5px 0;padding:5px 10px;line-height:1.4} .code-cell{font-size:13px} .latex-cell{white-space:pre-wrap;} </style> <!-- User CSS --> <style> .text-cell {font-size: 14px;}.code-cell {font-size: 12px;}.markdown-cell {font-size: 14px;}.latex-cell {font-size: 14px;}</style> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script> <script type="text/javascript"> window.MathJax = { tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], processEscapes: true, processClass: 'latex-cell' }, "HTML-CSS": { preferredFont: "STIX" } }; </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/docco.min.css"> <script>hljs.initHighlightingOnLoad();</script> </head> <body class="tex2jax_ignore"> <div id="titlearea"> <h2>Travel Mart Share</h2> </div> <div id="contentarea"><div class='cell markdown-cell'><p><code>Mark.Huang @ 2015/08/19</code></p> <h3 id="css-">css 的优先级</h3> <blockquote> <p>CSS priority, you can refer to developer console style info, it shows priority, the topest is the highest priority, which html tag style should take precedence over CSS, multiple CSS depends on loading sequence. Seems last loaded will take effect, but mostly, they are computed result, effects may come from multiple CSS files</p> </blockquote> <h3 id="what-is-the-essential-setting-to-make-a-div-stay-where-it-should-be-">what is the essential setting to make a div stay where it should be?</h3> <blockquote> <p>DIV, or in general, all html tags, except few one, are using same "rendering" principle, their position, depends on the type of positioning methods (fixed, absolute, relative, default etc), combined with other settings, it is not two dimension, but at least three dimensions, z-index controls which on the top. What I mean at least three dimensions, because you sometimes need to think about animation, which is time factor</p> </blockquote> <h3 id="why-is-childen-element-out-of-the-region-of-its-parent-in-common-how-to-make-children-always-inside-the-region-of-its-parent-element-">why is childen element out of the region of its parent in common?how to make children always inside the region of its parent element?</h3> <blockquote> <p>A bit related to Q2, normally, if you don't apply CSS, their position is "inherited". You need to separate the concepts of DOM tree and "rendering".<br> All DOM are nested, you can tell their relationship intuitively. Not to renderinging, rendering needs to consider individual element, computed and merged all style values into final style and then pass to the rendering engine to display the result<br> The reason why different browsers sometimes display differently, hugely due to their rendering engine, previous IE lags FF, Chrome and Safari in the rendering.<br> To ensure child follow parent, you can use specific sytle to have combined end result, once again, I don't thin genric work very well, web site is tailored made, turn it generic to different size is asking for trouble, don't bother doing it.</p> </blockquote> <h3 id="why-are-some-div-s-created-with-height-and-width-but-others-not-what-does-a-div-with-0-height-and-width-means-">why are some "div"s created with height and width but others not? what does a div with 0 height and width means?</h3> <blockquote> <p>it is beauty of DOM, the div with height 0 or visibility none, somehow just like internal variable as a placeholder, it could be used as data storage, you can use input type hidden, or div or span, any tag you can associated data with it, in form of attribute, nested text or jquery data structure data(key, val).<br> In addition, it's current value height 0, doesn't mean it won't change, consider javascript, it may change the dimension depends on event. Let say error, you turn div height to some value and show the error message</p> </blockquote> </div></div> </body> </html>