Elements of CSS control positioning

Core Tip:In addition to controlling the position of the upper left corner of the positioning element, you can also control the width and height of the elements and the visibility of the elements in the page.

In addition to controlling the position of the upper left corner of the positioning element, you can also control the width and height of the elements and the visibility of the elements in the page.

Width

The elements that are positioned are still displayed from left to right as they appear on the page. By using the width attribute, you can set the limit of the character's flow to the right, that is, the width of the setting element.

DIV {position:absolute; left:200px; top:40px; width:150px}

When the browser receives this rule, it displays the text in accordance with the rules, and limits the maximum horizontal size of the paragraph to 150 pixels.

Width attributes apply only to elements of absolute positioning. You can use any of the length units we have learned, or use proportional values to set the width, and the proportional value refers to the ratio of the parent element.

In IE6, this property can also be used for images. You can artificially widen or compress images by width setting.

Height

Theoretically, the height should be similar to the width setting, except in the vertical direction:

DIV {position:absolute; left:200px; top:40px; height:150px}

Here I use "theoretically", because the most commonly used browsers do not support height attributes. (You can only set elongated images in IE 4 height.) ）

Visibility of

With CSS, you can hide elements and make them invisible on the page. This property applies to both positioned and not positioned elements.

H4 {Visibility:hidden}

I'd like to show you an example, but, because I want to make it invisible, what do you see in this example?

Options:

Visible enables elements to be seen

Hidden the elements to be hidden

Inherit means that it will inherit the visual setting of the parent element.

When an element is hidden, it still occupies the original space in the browser window. So, if you surround text with a hidden image, it will be displayed with text surrounding a blank area.

This property is useful when writing languages and using dynamic HTML, such as you can make a paragraph or image appear only when the mouse is slippery.

Communicator does not support visibility properties. Only IE 4 of users can enjoy its beauty!