A summary of some clever ways to style css. _html/css

A summary of some clever ways to style css. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:54:26

Original

981 people have browsed it

Regarding the implementation of some special styles that I have encountered before, I will make a summary today for two purposes: First, record these methods so that they can be found and used when needed in the future. The second is to carry forward the crystallization of the wisdom of these great gods, so that the majority of front-end programmers can avoid detours. This post is an update. If there are good css style skills in the future, I will update it from time to time.

1. Horizontal and vertical centering of block elements (Special thanks to: Xin Life. Brother Xin’s products must be high-quality! I admire you)

For the horizontal and vertical centering of a block element, the horizontal centering method does not need to be To say more, it can usually be achieved by using margin:auto; and other methods. As for vertical centering, although there is a vertical-align:middle attribute, it only applies to table tags, and everyone knows that the effect of table tags is difficult to control. . . Therefore, our commonly used method is to set the inline-block attribute of the child element, and set the value of its line height attribute: line-height to the same height as the parent element. Here, I want to promote a method derived from "Xin Life"

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-absolute positioning-horizontal and vertical centering /

The code is as follows:

HTML aspect:

|
width:500px;

height:500px;

border:1px solid red;

position:relative; *self The width and height of the element can be set arbitrarily*/

Height:200px;

Position:absolute;left:0px;top:0px;right:0px;bottom:0px;

margin:auto;
background -color:#cc9900;
}

In the above code, the width and height of the child elements are set arbitrarily. This element can be displayed horizontally and vertically centered 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 in all four directions to 0px. And make his margin value adaptive. From inspecting the elements, we can find that after this setting, the margin area of the child element will fill the entire parent element, and the left and right margin values are equal, as are the upper and lower margin values. However, this does not comply with the rule that when code values conflict, top and left values are parsed first. Because Xiao Cai also doesn’t know what the principle is. . If anyone knows about it, I hope he can enlighten me. But this is a good method, and I hope everyone can learn and use it.

2. After pseudo-class clear float

Usually after setting the float on the block element, we need to clear the float to avoid layout confusion. There are two common methods of clearing floats: 1) Write "clear:both;" in the subsequent sub-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 there is a place where floating is needed, we can just add such a floating attribute to its parent element.

The code is as follows:

　.clearfix:after{

　content:"";

　display:table; /*Using table is not allowed Float property to clear the float. It can also be replaced with "overflow:hidden;"*/

　 clear:both; , which can be called multiple times later.

I hope this post can really help everyone. In my future study, I will also update the good methods I encounter from time to time. Finally, I would like to thank "Xin Space" and other front-end masters again. The side dishes are on par with you! !