Shulou(Shulou.com)06/03 Report--

Mobile phone WEBKIT engine HTML element positioning and case analysis, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

A web page is the product of a large number of HTML elements organized and typesetting under certain rules. Therefore, to use HTML to develop applications and complete applications that meet the needs of users, we need to have a certain understanding of the typesetting mechanism of the engine, so that we can flexibly manipulate various elements such as the finger arm, so that the web page can be rendered with the desired effect.

In order to simplify the typesetting logic, we use div as the typesetting control tag in the following introduction to study how to control div to complete the layout of the page.

DIV tags can divide a document into separate, different parts. It can be used as a strict organizational tool. (W3CSCHOOL)

In the AppCan application development platform, the default UI framework relies on various layout combinations of div to customize the interface.

When typesetting by the HTML engine, you can assume that all web page elements are included in the body and arranged in a streaming manner, as shown in the following figure sequence.

All elements ignore top, bottom, left, right, or z-index declarations. The DIV element, as a block element, automatically starts a new line by default, so when multiple div are laid out, each DIV occupies a separate line.

Following the example code, we set up several div to observe its effect.

Abcdef

You can see that each div takes up an entire line of the phone's screen. BODY is held up by six div elements.

We can see that the content of the div element does not actually need to occupy a single line, and if you want multiple elements to automatically fit horizontally according to their width, you can make the following adjustments.

A b cdef

When the inline-block attribute is specified for the div of an and b, the two div elements no longer occupy an entire line, and they automatically stretch out the rectangle of 8x18 according to the content and display it in one line. We extend the content of the b-div element to make it longer

A bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cdef

As shown in the figure above, the b-div is automatically displayed on the second line, so you can see that the inline-block attribute is a serial scheduling element, if it is not more than one line, it is displayed in one line, and if it is more than one line, the line is wrapped.

Let's adjust the code again to change inline-block to inline

A bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cdef

Seeing that a / b is displayed on one line, the difference between inline and inline-block is that inline forces elements to be on one line, while inline-block does not display more than one line on one line, otherwise wrapping.

The above is our commonly used div display control. The display attribute table sorted out by referring to w3cSchool is as follows

Above we explained the layout of div elements in body in the case of default browser streaming layout, but in fact, each div element can also contain other elements, and these child elements are also laid out in a streaming manner. Please see the following code and effect diagram.

An A B C cdef

As you can see from the above example diagram, the child div contained in the div is also typeset in the previous streaming manner, and because the parent DIV is supported by the child div, the layout of the child div also affects the layout of the parent div in the parent stream.

But in many cases, there will always be some troublemakers who do not want to settle themselves according to a fixed flow, but prefer to have a little personality. They use the float and position attributes to do this. The common properties of float are as follows

Loat this CSS attribute is difficult to control, good use, then you can make the layout very dazzling, not good use, the interface will be a mess. The following is an excerpt of the usage analysis of float, which has described float.

Detailed explanation of CSS floating property Float

What is CSS Float?

Float is the positioning attribute of css. In the traditional printing layout, the text can surround the picture as needed. This method is generally referred to as "text wrapping". In web design, a page element that applies the float attribute of CSS is like a picture surrounded by text in a printed layout. Floating elements are still part of the page flow. This is a significant difference from page elements that use absolute positioning. Absolutely positioned page elements are removed from the page stream, just as the text box in the printed layout is set to ignore the page surround. Absolutely positioned elements do not affect other elements, and other elements do not affect it, regardless of whether it is next to other elements or not.

Float with CSS on an element like this:

# sidebar {float: right;}

The fload attribute has four available values: Left and Right float the element in their respective directions, None (default) keeps the element from floating, and Inherit gets the float value from the parent element.

The use of Float

In addition to simply surrounding the text around the image, floats can be used to create a full page layout.

Float is also useful for small layouts. For example, this small area of the page. If we use Float on our small profile picture, the text in the box will also be automatically repositioned when the picture is resized:

The same layout can be achieved by using relative positioning on the outer container and then absolute positioning on the avatar. In this way, the text is not affected by the size of the avatar picture and does not change with the size of the avatar picture.

Clear Float

Clear is an attribute related to float. An element set to clear Float will not move up to the boundary of the Float element as set by the float, but will ignore the float and move down. As follows, a picture is worth a thousand words.

Sample code and case screenshots

Aaaa

Aaaaa

Aaaaaa

Aaaaaa

Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccc

In the above example, the sidebar floats to the right and is shorter than the main content area. The footer (footer) then jumps up to possible space as required by the float. To fix this, clear the float on the footer (footer) so that the footer (footer) stays below the floating element.

# footer {clear: both;}

Aaaa

Aaaaa

Aaaaaa

Aaaaaa

Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccc

There are also four possible values for clear. The most commonly used is both, which clearly floats on the left and right sides. Left and right can only float in one direction. None is the default value and is used only if you need to remove the specified cleanup value. Inherit should be the fifth value, but it's strange that IE doesn't support it (it's not surprising that IE has always been such a maverick-sugar with tomatoes). It is rare to clear only the floats on the left or right, but they are definitely useful.

A great collapse.

One of the more puzzling things about using float is how they affect the parent element that contains them. If the parent element contains only a floating element, its height collapses to zero. If the parent element does not contain any visible background, this problem can be difficult to notice, but it is a very important issue.

The intuitive opposite of collapse is even worse, take a look at the following:

When the above block-level elements automatically expand to accommodate floating elements, unnatural white space wrapping occurs in the text stream between paragraphs, and there is no effective way to correct this problem. For this situation, the designer will complain more than the collapse (I don't understand, isn't the page coding only after the design is completed?-Sugar with tomatoes).

To prevent weird layouts and cross-browser problems, collapse problems are almost always dealt with. We clear the float after the floating element in the container and before the end of the container.

Clear floating technology

If you know exactly what the next element will be, you can use clear:both; to clear the float. This approach is good, it doesn't need hack, and it doesn't add extra elements to make it semantic. Of course, not all things can be solved in this way, and several other tools to clear floats are needed in the toolbox.

The ◆ empty div method is literally an empty div.

Sometimes it may be used

Or some other element, but div is the most commonly used because it has no browser default style, has no special functionality, and is generally not styled by css. This method is ridiculed by pure semantics because it is only for expression and has no contextual meaning to the page. It is true that they are right from a strict point of view, but this method is effective and does no harm.

The ◆ overflow method sets the css attribute overflow on the parent element. If this attribute of the parent element is set to auto or hidden, the parent element expands to include floats. This method has a good semantics because it does not need extra elements. However, if you need to add a new div to use this method, it has no semantics as an empty div method. And keep in mind that the overflow property is not defined to clear floats. Be careful not to overwrite the content or trigger unwanted scroll bars.

The ◆ simple cleanup method uses a clever css pseudo-selector (: after) to clear floats. Instead of setting overflow on the parent element, you just need to add an extra class like "clearfix" to it. This class uses the following css:

.clearfix: after {content: "."; visibility: hidden; display: block; height: 0; clear: both

This applies something invisible after clearing the floating parent element. This is not all, and some extra code is needed to adapt to those old browsers.

Different situations require different floating cleanup methods. Take a grid with different style blocks as an example.

In order to visually connect similar blocks, you need to open new lines where necessary, this is where the color changes. If each color group has a parent element, we can use overflow or a simple cleanup method. Alternatively, use an empty div method between groups. The extra div didn't exist before, so you can try it for yourself to see which method is better.

Floating problem

Floating has been criticized for its fragility. Most of the vulnerabilities come from IE6 and its series of floating-related bug. Because more and more designers no longer support IE6, you can stop paying attention to it. But for those who want to pay attention, here's a rough idea.

The ◆ push-down is caused by the fact that the elements within the floating element (mostly pictures) are wider than the floating element itself. Most browsers render images outside the float, but no protruding parts affect other layouts. IE expands floats to include images, which have a great impact on the layout. A common example is to break beyond the main content and push the sidebar below.

◆ quick fix: make sure that the image is not causing this situation, and use overflow:hidden to remove the excess.

When ◆ double margin bug works with IE6, another thing to keep in mind is that double margin is raised if the outer margin (margin) is set in the same direction as the floating direction. Quick fix: set display:inline; to the float and don't worry, it's still a block-level element.

◆ 3 pixel spacing means that text next to a floating element is magically kicked out of 3 pixels, as if there is a strange force field around the floating element. Quick fix: sets the width or height on the affected text.

In ◆ IE7, the bottom margin bug is that when floating parent elements have floating child elements, the base margins of these child elements are ignored by the parent element. Quick fix: replace with the padding of the parent element.

Then let's move on to other elements for positioning.

The common properties of position are as follows (static is the default)

Both absolute and fixed make the element no longer follow the flow layout. Relative also causes the element to continue to follow the flow, only to position it relative to its position in the flow. Let's take a look at the effect of relative first.

An A B C cdef

In the above code, we specify that element An is 30px to the right in its flow, and this change does not affect the layout of element B in the flow.

Okay, we'll focus on the absolute and fixed properties later.

Absolute attribute

Let's have a visual experience with a piece of code and a screenshot.

A b c d e

As you can see from the figure above, we define position as absolute for the b element and specify that it is 50px from the left (this 50px is away from the screen boundary and how to position it relative to its parent element, which is described in more detail later). Because the absolute attribute is specified, the b element is no longer dependent on the stream, so the stream is arranged as acde.

There is a question in the above code, we specified the b element as absolute, but did not specify the top coordinates of b, so why is the b element displayed in the current location? It can be understood that each element can be located using the four locations of top left right bottom. When the b element is in the stream, the browser calculates the four location values of top left right bottom for it. When we specify the absolute and left attributes, the engine directly modifies the left and right attributes, but top and bottom also use the positions in the previous stream, so the b element will be displayed in this position on the current screen. If we specify the top or bottom attribute for the b element again, the b element will change position and display at the specified location. Left and bottom, top and bottom are a set of attributes. When we specify left, right is customized to width-left. If right is specified, left is obtained according to width-right. When both left and right are specified, left is processed. Top and bottom are the same.

The absolute attribute causes the element to be positioned based on * parent elements other than those relative to static positioning. How do you understand this passage? Please refer to the following code to understand the effect of using absolute for child elements

A b cccc d e

In the above code, we specify within the c element that the element ccc,ccc element uses absolute positioning and specifies its left=20px. However, from the screenshot above, we can see that the 20px specified by the ccc element is not from the left boundary of the c element 20px, but from the entire screen boundary, that is, the boundary 20px of body. This is because the default position attribute of the c element is static,body and the default position attribute is also static, so the ccc element is not positioned according to the position of c or body, but based on the position of the screen. OK, let's modify the posiiton attribute of element c to see the effect.

A b c ccc d e

In the above code, we specify that the positioning attribute of the c element is relative, so when the attribute of the ccc element is absolute, the positioning is based on the boundary of the c element. What if the c element is also absolute positioning?

A b c ccc d e

In the above code, we modify the absolute positioning of the c element, and the left margin 80px. You can see that the ccc element is relatively positioned according to the position of the c element.

Fixed attribute

Generates an absolutely positioned element, positioned relative to the browser window.

The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

This attribute controls the display of the element at a specified location on the hardware screen, and it is no longer subordinate to the flow or make the element subordinate to its parent element attribute, but directly based on the hardware screen. This property is mainly used to keep certain elements floating in the defined position of the screen when a web page is out of the browser window. Let's give an example to see his effect.

111 222 333 444 555 111 222 333...... 444 555 I am fixed

We create multiple div entries beyond the scope of the screen, then add an element of fixed and specify its location. Then scrolling the screen, you can see that no matter how much the page scrolls, the fixed element is always in the physical location specified on the screen. As you can see from the above, the fixed attribute is a critical feature in interface design, but unfortunately it is not supported on platforms below android2.2 or iOS5.0. On the AppCan platform, we provide several mechanisms to implement similar functions. You can refer to our related website for details.

Through the above description, we already know several common attributes for layout to achieve the positioning of elements. However, these attributes can not complete our interface layout requirements, but also need to be combined with other relevant positioning attributes. Let's analyze these attributes.

In the previous example, we found that the size of the div element itself is supported entirely by the height and width of its child elements, but the reality is that we want to set a size, height and width position for the div element itself, and then arrange the child elements in it. Here are several options

The div element in the flow completely ignores the attributes top, bottom, left, and right,width,height, so you cannot specify information such as size and location for the div element in the flow. In this case, if you need to adjust the height and width of div, we can use the padding property, min-height, max-height, min-width, max-width to deal with it. Let's introduce them one by one.

The padding attribute is used to specify the inner margin of an element. The width of an element can be considered as "

Width = left border width + left inner margin + content width + right inner margin + right border width ", as shown below. The margin attribute in the following figure is the interval between the element and other elements, that is, the outer margin.

The derived property of the padding attribute is padding-top padding-bottom padding-right padding-left, which sets four margins.

So how do we use padding to adjust the height and width of div? simply specify a value for Padding. As you can see from the above formula, if you want the width to be fixed, and then specify the border width and margin width, the content width must also be a fixed value. Therefore, when using padding to adjust height and width, it is often used in scenes with fixed height and width. Let me give you an example.

one hundred and eleven

In the above example, we see that we set the padding attribute to 80px, that is, all four outer margins of the element are 80px, and we specify the absolute positioning left:0px top:5px for the IMG child element. Introduce a positioning tip, the above google picture we want him to be on the left and center vertically, what should we do?

one hundred and eleven

In the above code, we specify the top position of the image as 50% of its parent element (the parent element Position should be set to non-static), but this specifies that the upper left corner of the image is 50%, and the image is still not centered. At this time, we specify the upper outer margin of the image to be-15px, that is, half the height of the image. The image will move up 15:00 to achieve the center effect. Actually, the formula is very simple, positionY=divHeight*50%-imgHeight*50%.

The following is a screenshot of an example of a complex padding application

Above we use padding to control the height and width of the element, but when the content of the element changes, padding is no longer competent to fix the height and width. In this case, we will use the min-width, max-width, min-height, and max-height properties. Let's take a look at the following min-height example to see how it works.

one hundred and eleven

two hundred and twenty two

In the above example, we set the left inner margin 80px for div to hold the picture, and the height specifies the minimum height 100px, so we can see that even if the content height changes, the div height is still 100px. But there are only two content parts in this example: 111222.What happens if the content part is higher than 100px?

Div is stretched out, how to avoid this problem? Look at the following code

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.