Mark.Huang @ 2015/08/19
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
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