Summary of clever ways to style css-CSS Tutorial-php.cn

Summary of clever ways to style css

高洛峰

Release： 2017-03-07 14:29:30

Original

1292 people have browsed it

Regarding the implementation of some special styles that I have encountered before, I will make a summary today. The purpose is twofold: 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 styling techniques in the future, I will update it from time to time.

1. Center the elements horizontally and vertically (Special thanks to: Xin Life. Brother Xin’s products must be high-quality products! I admire you)

For the horizontal and vertical centering of a block element, there is no need to say much about the horizontal centering method. Generally, it can 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-%E7%BB%9D %E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85% E4%B8%AD/

The code is as follows:

html aspect:

<body>
　　　　<p class="big">
　　　　　　<p class="small"></p>
　　　　　</p>
　　</body>

Copy after login

css:

.big{   
　　　　width:500px;   
　　　　height:500px;   
　　　　border:1px solid red;   
　　　　position:relative;   
　　　　}   
　　.small{   
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;   
　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
　　　　margin:auto;   

}

Copy after login

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 Xiaoge 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 we set the float of 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;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;   

　　　　　}

Copy after login

This method has the advantage that it can be written into reset and can be called multiple times later.

The above article summarizes (recommended) some clever methods of CSS style, which is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more ingenious methods of css style, please pay attention to the PHP Chinese website for related articles!