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

This article mainly introduces the relevant knowledge of "how to use CSS box attributes". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use CSS box attributes" can help you solve the problem.

1. The problem of centering block-level elements in the container:

As we all know, block-level elements occupy the width of the entire row of the container by default. What if you set the width and height attributes on a block-level element and want the block-level element to be centered horizontally inside the container?

Here the box properties provide us with the following tips:

Set the left boundary of the block-level element to auto and the right boundary to auto to achieve the center of the block-level element in the container.

The code format is as follows:

Format 1:element {margin-left:auto;margin-right:auto;}

Format 2:element {margin:0 auto;}

Example 1: set a block-level element with the value of the id attribute box. Set its width and height to 200 pixels and the background color to red so that it is centered horizontally in the page.

# box {

Width:200px; height:200px

Background-color:#ff5857

Margin:0 auto

}

Second, the absolutely positioned block-level elements are centered horizontally and vertically in the page:

When a block-level element is set to absolute positioning, you want the block-level element to appear in the center of the page. Because different monitors have different resolutions, if you want to adapt to various monitors, you need to set the corresponding location property to 50%.

If you set the left and top attributes of the absolutely positioned block-level element to 50%, the upper-left corner of the block-level element will appear in the center of the page. Of course, we want the center of the block-level element to appear in the center of the page. How can we solve this?

Solution 1: the box properties here provide us with the following tips.

Adjust the left boundary of the block-level element to half the width of the block-level element and set it to a negative value, and set the upper boundary to half the height of the block-level element, and also to a negative value.

Example 2: set a block-level element, and the value of id attribute is box. Set its width to 400 pixels, its height to 600 pixels, and the background color to red so that it appears in the center of the page.

# box {

Width:400px; height:600px

Background-color: # ff5857

Position:absolute

Left:50%; top:50%

Margin-left:-200px

Margin-top:-300px

}

Solution 2: the box properties here also provide us with a second technique.

Set the position attribute of the block-level element in all four directions to 0 and its margin property to auto.

The CSS code in example 2 above is changed to the following format:

# box {

Width:400px; height:600px

Background-color: # ff5857

Position:absolute

Left:0;top:0;right:0;bottom:0

Margin:auto

}

Third, remove the boundaries and padding values of all HTML elements:

In page setup, especially in mobile development, it is sometimes necessary to remove all the boundaries and padding values of all elements in the HTML. This requires the following statement to be written in the first line of the linked CSS file on the page:

* {margin:0;padding:0}

Where * represents the wildcard selector in CSS and represents all the elements in HTML.

Of course, such an operation will also affect tag pairs that are inherently required to have boundaries, such as

The mark is right. This needs to be done for

Mark the pair to reset the boundary value.

Thus, the overall code is as follows:

* {margin:0;padding:0}

P {margin:10px 0;}

4. Remove the position left for bullets on the left side of the unordered list:

At design time, if you need to remove the bullet on the left side of the unordered list, you can use the list-style-type attribute, which is set to none to remove the bullet on the left. But we will also find that after using this attribute, the bullets are gone, but the location of the bullets still exists. All list items have not been successfully moved to the original location of the bullets because of the disappearance of the bullets.

Here the box properties provide us with the following tips:

Set the margin-left of the unordered list to a negative value to adjust the display of the list item to the left. A general system reserves 40 pixels for bullets in unordered lists, so set the margin-left property to-40 pixels.

Ul {

List-style-type:none

Margin-left:-40px

}

Of course, this usage also applies to ordered list tag pairs.

This is the end of the introduction on "how to use CSS box properties". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.