CSS Topic (ii): element size and position offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s

This is a confusing concept. After careful analysis, these values are used to locate the elements. The following describes them one by one. This article only describes the equivalence of width and left, which corresponds to height and top. This article also only introduces the performance in Firefox. I think that we should not consider the performance in IE versions, Chrome, and other browsers first. As a result, the problem is simple and easy to understand.

One-width basis

In CSS, the width attribute refers to the width of the content area of the element. It is not the space occupied by the element on the page, just like a file on windows with a size of 10 MB, however, the occupied space may reach 12 Mb. Like a traditional Chinese painting, the real place for painting and writing is not the whole of the painting. Therefore, there are at least two concepts: the width of the element content area and the width of the element. In Firefox, the content area width is specified. The element occupies the content area width, padding, and Border width. We can also understand the reason that padding does not have a negative value. Otherwise, the content will exceed the border. As the padding value increases, the content area width does not change, and the element width increases. You can also understand why the background attribute always applies to the total width of width plus padding.

So what is the concept of margin and its role. The original page edge of margin is a concept of positioning. There is no relationship between margin and the width of the element, but it only makes the distance between the element and the surrounding element. So there is a small summary: padding is the concept of the size of an element, and margin is a concept of positioning.

Offset

　　Offset shifting is the concept of relative elements of an element. The so-called offset is always offset relative to A certain position. The offset to A (5, 0) is considered to be the offset of A point to the positive direction of the X axis relative to the origin point, and the offset is 5 units. So, who are the cheaper elements? This is very similar to absolute positioning. The element is offset from its parent element, and its parent element must meet the requirement that the positioning attribute is not static, that is, positon is relative, absolute, and fixed. In addition, if the parent element does not meet the requirements, it will be searched for by the ancestor and eventually it can be the body.

In this way, you can understand the offsetLeft attribute. offsetLeft represents the left edge of the area occupied by the element to the left edge of the parent element. The CSS language is:

OffsetLeft: The pixel distance between the left outer border of the element and the left inner border of the element.

　　

Therefore, the padding of the element affects offsetLeft, and margin does not. The padding of the parent element does not affect the offsetLeft of the current element, and the margin of the parent element does.

By the way, it is very useful to explain how to determine the distance from an element to the left boundary of the window. If you use offsetLeft to determine the distance between it and its parent left boundary, you can obtain it through iteration. We generally use jQuery to directly obtain $ ("# id"). offset (). left.

So, how to understand offsetWidth is really hard to understand. It can only be imagined that when an element is used as an offset, it occupies the size of the content zone. The CSS language is:

OffsetWidth: the space occupied by the element in the horizontal direction, that is, the sum of the width, inner margin, and border of the element, (visible) horizontal scroll bar.

　　

OffsetWidth is a frequently used value, which actually reflects the space occupied by elements, while the width and height attributes only express the content area.

Client in three customer zones
The customer zone, as its name implies, is the size of the user's operable zone. In a windows window, the customer zone is a work zone, which is actually visible to users and can be used
. In the browser, the customer area expresses the area where the element can be rendered. Obviously, this area is the space occupied by the element, but the border and scroll bar are not counted, therefore, the size of the content area of the customer area plus the inner edge distance. Therefore, the difference between clientWidth and offsetWidth lies in the border and the scroll bar. It is expressed in CSS:

ClientWidth: The sum of the content area width and padding of the element.

The significance of clientWidth is mainly reflected in the document element. document. clientWidth actually reflects the window size.

Scroll

　　Attributes related to scrolling start with the scroll bar. Scroll bars are common display extension policies and are also unique advantages of electronic media. The browser must consider the height and bandwidth of the scroll bar, so attributes such as scrollWidth and scrollLeft appear to support the control of the height and width of the scroll bar.

Because the scroll-related attributes are designed for the scroll bar, these attributes will become meaningless when there is no scroll, and do not need to be considered or replaced by other attributes.

Scrollwidth is the scroll width. When a horizontal scroll bar appears, the actual width of the element cannot be seen. At this time, the width occupied by the element on the page is still offsetwidth, the width of the entire content area is covered by the scroll bar. In this case, scrollwidth is used to obtain the actual size of the element content, as if all the scrolling content is rolled out. The width displayed in this case is scrollwidth, without the border and the width of the Y-axis scroll bar, it is like the paved clientwidth. It is expressed in cssy:

Scrollwidth: The total width of the element content, or the paved width.

　　

Scrollleft represents the width hidden by scrolling. This is a useful attribute and is useful when you create a scrolling image. It is expressed in CSS:

Scrollleft: The width hidden by the horizontal scroll bar.

　　

Example: http://www.zangb.com/html/demo/css/css_positionAndDis.html

Fang Jinsong Nanjing focus technology is written in Qingliangshan, Gulou