What position in CSS style layouts

Source: Internet
Author: User

Alas, page layout and design development, for a has been engaged in background development for the cock Silk, is really a time-consuming, laborious, very difficult thing.


Tonight you want to do this by overlapping multiple sheets, or by marking a different position in a picture and then assigning a hyperlink. It took a whole night to figure out a few of the following CSS property usages.


"1" set the label to float, and discuss with colleagues:

HTML tags have block-level and row-level (as for those that are block-level, can be Baidu), each block level will occupy the HTML document line (the reason is a line, because the block level will be followed by a newline). If the block-level label is set to float, the label: (1) is detached from the original parent label. (2) can be displayed on one line.


The "2" position is set to fixed.

Fixed is relative to the entire browser. Interested students can experiment, the size of a label set to fixed, zoom the browser, so that the browser to create a scrollbar (up or down), when the scrollbar is pulled, is set to a fixed label will not change its position.


The "3" position is set to absolute.

Absolute is relative to the nearest father tag. Still the experiment above, when the scroll bar is pulled, the label that is set to absolute will also change with the location of the HTML document.


The "4" position is set to relative.

The relative is relative to the original position of the label.


The following combination tonight I do is a test diagram, to see the effect:


(1) Line A is absolute

(2) B line is fixed.

The main purpose of the above diagram is to mark the position of the make1~8 in the disc, and then give the hyperlink, the specific code is:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


Other than that

"1" Questions about Roundmakebox centering:

left:50% is the left edge of the label moved to 50% (half) of the parent tag, then why margin-left-250px it again?

Because when I left50%, the left edge of the label is 50%, but the entire label does shift to the right. Our so-called label centering, is to want the center position of the label at the center of the parent tag, left50% is obviously more mobile label general position, the original label is 500px, so it margin-left-250px.


"2" about the pixel position of each A in maker, how is it obtained?

After figuring out the absolute of position, the rest is the measurement position (with what test?) I am using the ruler, do not know whether there are other better ways).


Well, the above is my understanding, I do not know whether to express clearly, or I understand the deviation, crossing need to go to the experimental test.


What position in CSS style layouts

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.