JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.2.3 The CSS Box Model and Positioning Details

The margin property works in the same way.


16.2.3 The CSS Box Model and Positioning Details

The margin, border, and paddingstyle properties described above are not properties that you are likely to script very frequently. The reason that they are mentioned here is that margins, borders, and padding are part of the CSS box model, and you have to understand the box model in order to truly understand the CSS positioning properties.

Figure 16-2 illustrates the CSS box model and visually explains the meaning of the top, left, width, and height for elements that have borders and padding.

Figure 16-2 shows an absolutely positioned element nested inside a positioned container element. Both the container and the contained elements have borders and padding, and the figure illustrates the CSS properties that specify padding and border width for each side of the container element. Notice that no margin properties are shown: margins aren’t relevant to absolutely positioned elements.

Figure 16-2 contains other, more important information as well. First, width and height specify the size of an element’s content area only; they do not include any additional space required for the element’s padding or border (or margins). To determine the full on-screen size of an element with a border, you must add the left and right padding and left and right border widths to the element width, and you must add the top and bottom padding and top and bottom border widths to the element’s height.

Second, the left and top properties specify the distance from the inside of the container’s border to the outside of the positioned element’s border. These properties do not measure from the upper-left corner of the content area of the container, but from the upper-left corner of the container’s padding. Similarly, the right and bottom properties measure from the lower-right corner of the padding.

Here’s an example that might make this clearer. Suppose you’ve created a dynamically positioned container element that has 10 pixels of padding all the way around its content area and a 5-pixel border all the way around the padding. Now suppose you dynamically position a child element inside this container. If you set the left property of the child to “0 px”, you’ll discover that the child is positioned with its left edge right up against the inner edge of the container’s border. With this setting, the child overlaps the container’s padding, which presumably was supposed to remain empty (since that is the purpose of padding). If you want to position the child element in the upper left corner of the container’s content area, you should set both the left and top properties to “10px”.

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/31446.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1