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

How to understand the control of the three elements in the DIV positioning unit, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Are you familiar with the control mode of DIV positioning unit? here we share with you, mainly including width, height and visibility. Before we introduce it, let's take a look at the concept of DIV positioning.

Introduction to DIV

DIV is also called integral division in programming, that is, integers that can only be quotient. DIV elements are elements that provide structure and background for block-level content in an HTML document. Everything between the start and end tags of the DIV is used to form this block, and the properties of the elements contained in it are controlled by the attributes of the DIV tag, or by formatting the block using a style sheet.

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:

Features positioned by DIV 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:

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:

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

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 news

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 understand the control of the three elements in the DIV positioning 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.