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

How to explore the use of the three elements of DIV positioning unit control, I believe that many inexperienced people do not know what to do. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Focus on the control of the DIV positioning unit. In addition to controlling the position of the upper left corner of the positioning unit, you can also control the width and height of the unit, as well as the visibility of the unit on the page.

Control of DIV positioning unit

(width, height, visiblility)

In addition to controlling the position of the upper-left corner of the positioning unit, you can also control the width and height of the unit, and the visibility of the unit on the page.

Width of DIV positioning unit:

Positioned features are still displayed from left to right when they are displayed on the page. Using the width attribute, you can set the limit on the flow of characters to the right, that is, the width of the feature.

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

When the browser receives this rule, it displays the text as specified by the rule and limits the horizontal size of the paragraph to 150 pixels.

The width attribute applies only to absolutely positioned features. You can use any of the units of length we have learned, or use a scale value to set the width, which refers to the proportion relative to the parent element. In IE4, this property can also be used for images. You can artificially widen or compress the image by setting the width.

Height of DIV positioning unit:

In theory, the height should be similar to the width, except in the vertical direction:

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

I use "theoretically" here because some browsers do not support high attributes.

Visibility of DIV location units:

With CSS, you can hide features so that they are not visible on the page. This attribute applies to both positioned and unpositioned elements.

H4 {visibility:hidden}

Options:

Visible enables elements to be seen

Hidden makes features hidden

Inherit means that it will inherit the visibility settings of the parent elements.

The value inherit is the default. This causes the cell to inherit the visibility of the parent cell. So, if a paragraph is hidden, any interline units it contains are also hidden. This inheritance can be replaced by explicitly specified visibility. For example, if the EM unit within a segment is specified to be visible, if the segment is hidden, everything else in the segment will disappear, and only the text in the EM cell will be visible.

When a feature is hidden, it still occupies the original space in the browser window. So, if you surround the text around a hidden image, the display effect will be that the text surrounds a blank area.

This attribute is useful for writing languages and using dynamic HTML, for example, you can make a paragraph or image appear only when the mouse is out of date.

After reading the above, have you mastered how to explore how to control the use of the three elements of the DIV location unit? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.