Positioning and layout of code guides for designers

Source: Internet
Author: User
Tags relative

Before said what is CSS, also introduced the CSS box model, the following naturally to enter the core content of CSS, positioning and layout. Actually finish this part, CSS has nothing to say, the rest are some details or very intuitive things. Yes, the most abstract part of the understanding, CSS is not any difficulty to speak of.

If your drawing habits are good (good meaning to have a more complete implementation here: Http://hao.uisdc.com rules), and have a good grouping of layers, then you have completed the design of your initial version of the work. According to your cut version, the elements of a good code, your page is done. However, the actual page is not as quiet as the PSD design manuscript, it is possible that this part should be fixed at the top of the screen, that part of the content of a little time, so to learn the CSS "layout language."

 General Flow

The default behavior of the block-level elements and the inline elements that we usually talk about is their performance in the regular stream. There is a CSS attribute named display that modifies their representation. By default, the Display property value of a block-level element is blocks, and the attribute value of the inline element is inline, and if you change the Display property value of a a element to block, the a element behaves like a chunk element. In addition, there is a special property value of Inline-block, as the name implies is like inline elements such as the arrangement of block-level elements, in general, when you want to arrange some block-level elements, you can change their display property value to Inline-block ( No question: Why not just change it to inline?

  Relative positioning

The general tutorial puts relative positioning and absolute positioning together in front of or behind the float, and one of the reasons I choose to arrange the content is that I want to emphasize that the relative positioning element is still in the regular stream (in fact, the http://www.w3.org is also the same as the directory).

Position:relative elements have the ability to position themselves relative to each other, and the user can go up or down (top, bottom, left, right) four property values (but usually only the top and down, because negative numbers are allowed here. To "push" this element visually. The most important feature of relative positioning is that the ontology of the element is still there, and the user is not necessarily (up or down or about 0, the element is still there), the positioning mode is "relative to the original position", so it is called relatively positioning. And its true positioning of the application, usually not in the large frame layout, but some small place, small details of the fine-tuning, and its more common usage, will be mentioned below again.

Of course, a super ordinary and no characteristics of conventional flow block-level elements can not meet our demand for a rich layout, so there has been a big killing device--float.


When we change the float property of an element to left or right, the element becomes a floating block level element.

First it is still a block-level element (if it is originally an inline element, then it also becomes a block-level element)--with padding, border, margin, can be set wide. Second, it floats:

It's off the regular stream.

Its width becomes the width of its contents

It's squeezed into a bunch of directions you've set.

What does this mean:

The width of the floating element becomes the minimum width required for its contents. What if there is a regular block level element inside this element? It depends on how wide the regular block element is (it doesn't define width, that's 100%).

The regular elements behind a floating element cannot see him (because they are not in the same "stream"), and the parent element of the floating element cannot see him (ignoring), only the lines are visible-the text will be arranged around them.

The floating elements are arranged one after the other in the specified direction, if the horizontal position is not enough, then the next line, if both the horizontal position and the vertical position are still left, will give priority to upward.

Floating elements do not intersect the internal and external boundaries between the parent element and the floating element. That is, floating elements and the padding, margin regions of their parent elements do not overlap.

The top edge of a floating element does not exceed the top of the line box generated by the element before it appears in the source code.

Almost all of the possible problems with floating layouts can be found in the above few. Give me a chestnut:

  Two-Column layout

Weibo is the most typical two-column layout (the new V6 login after the first page into three columns, but the user page is still two columns ...), this two-column layout solution is simple, two fixed-width div, floating left, or one to the left, one to the right.

And in many game websites, in order to make the most of the advantage of the big screen, and the page design to the left has a fixed-width navigation, the right full screen occupied, in this case, the above writing is not established. No matter how the two elements float, the width is no way to just fill the entire screen, although the width of the CSS in the property can use a percentage of the value, but when you set it to 100%, it fell again. The best thing to do at this point is to set the left column (the first Div) to float and give a fixed width (such as 200px). At this point two div elements at the same height, but the right div can not see the left side, the content is still starting from the upper left corner, at this point, as long as the margin-left assigned to this div 200px, you will be the right div left 200px empty out, The basic of the two-column layout is complete.

Clear Float (clear-fix)

Some people think that clear fix is not suitable for clearing the float, because the float still remains (the element is still floating), and the term is supposed to "clear the negative effects of the float", but in Chinese circles, from the beginning of the Clearfix method, it is called clear float ... So there's no way to ╮(╯▽╰)╭.

The adverse effects it amended are mainly directed towards the second article above. The parent element of a floating element does not see it: if all the child elements in a block-level element are floating, the element itself will not have a height, and when the background and borders need to be set, the problem is always like a ghost. The solution is also very mature:

There is also a "real" purge attribute--clear, it also appears in the previous example, which sets whether the left or right side of the element can be adjacent to a floating element-if there is a floating element in the specified direction, then the element is arranged downward (how much hate someone else ...)

Absolute positioning

There is also a more specific way of positioning, known as absolute positioning, in fact, we PS file layers are absolute positioning. The Position:absolute element becomes an absolute positioning element, relative positioning is relative to the element itself, and the absolute positioning is to the element itself--absolutely nothing to do with itself.

Absolutely positioned elements are completely out of the ordinary stream, which can be said to be "which element cannot see it". And it still needs a location of the "origin", the World wide range of position attributes of the nearest absolute positioning elements of the relative, absolute or fixed ancestor elements of the upper-left corner of the content box (there is a special case, that the ancestor element is an inline element, this is not expanded here to explain, Basically not met), as the origin of absolute positioning of the element. So, in fact, relative positioning elements (position:relative) are often used to create the containing blocks of an absolutely positioned element (containing block), and if you have an absolutely positioned element, and its position is not what you expected, it is the location datum problem. And its position is the same, is by the value of the upper and lower to specify.

  Fixed positioning

Position:fixed elements are fixed positioning elements, in essence it is also an absolute positioning, this element will be fixed in the browser window fixed position, many sites at the top of the fixed navigation, the lower right corner of the fixed ads and so on are in this way positioning.

Locating relationships

If an element is an absolutely positioned element (position is absolute or fixed), the Float property is not valid for it, and the element becomes a block-level element.

When the position of an element is not static (Position:static is the element in the most common regular stream), they can overlap (as is the case with PS layers, layer overlap is common).

Elements that appear after the source code overwrite the elements that appear first

Floating elements override regular flow elements

An absolute anchor element overrides a floating element

With Z-index you can ignore the three rules above Z-index properties can specify the stacking order before the layer, the larger the value, the more "front" (stacked on top of all layers), and if you find that an element is not covered by any means, check its Z-index attribute value. Maybe we can find the answer.

 Flexible box (telescopic box model)

The Display:flex element will apply the telescopic box model, which is a real model for layout in CSS. There are still a few articles about the model, and a lot of problems, since from 09 to now, it has undergone 3 major changes, which involves a large number of mobile phone and IE version compatibility issues, resulting in many sites are unwilling to take this layout.

Use this model layout for layout The coolest thing is that we don't have to work hard to calculate the width and then specify the width for the element, all of which are allocated according to all available space and content, so that the number of elements that are not fixed can be perfectly distributed. There are two ways of allocating space:

1. Distribute in proportion to the width of the box

2. Distribution in proportion to the remaining space

If the above description is a bit unclear, click here (http://bennettfeely.com) There is a demo, you can change the value of the properties on the left to see the results. If your project is only for the latest iphone (iOS7 and above), you can consider your front end to try to use this model to layout (I have been tested on the vast majority of the online spread of compatible code, annihilated, the main domestic have UC browser this big kill device).


Display sets the model that the element is applied to, and position the positioning mode of the element, which together form the basis of the CSS positioning and layout. In addition, the consortium also put forward a telescopic box model to meet the complex and changeable layout requirements, and start recommending vendors to achieve, if you need to, in the future I can open an article to talk about this part of the content.

Positioning and layout in the entire CSS is the most difficult to grasp, here I mentioned content is only the most easy to happen, for the first entry into the code door designers, is basically enough. But many front-end engineers (not just Virgo) have some sort of code cleanliness, and care about nested inclusion relationships in code, such as the link between the code-level relationship and the content hierarchy mentioned in this article by a great God (www.zhangxinxu.com), Not willing to add an extra element just for the sake of layout, it is necessary to master various CSS layouts and their features at this time. You can choose where you want to go, depending on your level.

Finally, on the related tutorials, in addition to the school series (www.w3school.com), I also recommend Csdn's Standard series (http://bbs.csdn.net). The former is very strong and has many examples, suitable for beginners for the purpose of application-oriented learning, the latter is recommended to those who want to step into the front-end engineers, in-depth understanding of the definition of the box model and positioning, but also have a lot of sample code to learn.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.