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

Today, I will talk to you about summarizing (recommending) some clever methods of css style. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Block elements are centered horizontally and vertically

For the horizontal and vertical center of a block element, it is needless to say that the way of horizontal center can be realized by margin:auto; and other methods. For vertical centering, although there is a vertical-align:middle attribute, but because it is only applicable to the table tag, and the table tag effect is not easy to control, we all understand. Therefore, our common method is to set the inline-block attribute of the child element and set the value of its row height attribute: line-height to the same height as the parent element.

For html:

XML/HTML Code copies content to the clipboard

For css:

CSS Code copies content to the clipboard

.big {width:500px; height:500px; border:1px solid red; position:relative;} .small {width:200px; / * you can set the width and height of your elements arbitrarily * / height:200px; position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px; margin:auto }

In the above code, the width and height of child elements are arbitrarily set. This element can be displayed horizontally and vertically in the parent element. In the parent element, we use the relative attribute of position. In the child element, after we set its position attribute to absolute, we set the values for all four directions to 0px. And make his margin value adaptive. From the review element, we can see that when this is set, the margin area of the child element will be filled with the entire parent element, and the left and right margin values are equal, as well as the upper and lower margin values. But this is not consistent with the rule that when there is a conflict between code values, priority is given to parsing the top value and left value. Because what exactly is the principle, little ge also does not know. If there is a great god knows, but also hope to give advice. But this is a good way, and I hope you can learn and use it.

2. After pseudo-class clear float

Usually after we float a block element, we need to clear it to avoid layout confusion. There are two common ways to clear and float: 1) write "clear:both;" in the following child element css. 2) write "overflow:hidden" in the parent element of the floating element. Now, we can use the third method, using the after pseudo-class to write a floating attribute, so that whenever we need to clearly float, we can add such a floating attribute to its parent element.

The code is as follows:

JavaScript Code copies content to the clipboard

.clearfix: after {content: "; display:table; / * clears floats with attributes that table does not allow floats. It can also be replaced with "overflow:hidden;" * / clear:both;}

The advantage of this method is that it can be written to reset and then called multiple times.

After reading the above, do you have any further understanding of summarizing (recommending) some clever methods of css style? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.