对于一些css样式的巧妙方法进行总结(推荐)

css方面：

1. .big{   
2. 　　　　width:500px;   
3. 　　　　height:500px;   
4. 　　　　border:1px solid red;   
5. 　　　　position:relative;   
6. 　　　　}   
7. 　　.small{   
8. 　　　　width:200px;   
9. 　　　　height:200px;   
10. 　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
11. 　　　　margin:auto;   
12. 　　　　   
13. }  

在上述代码中，子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中，我们用了position的relative属性。在子级元素中，我们将它的position属性设定为absolute后，将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现，如此设定后，子级元素的margin区域会充满整个父级元素，并且左右margin值是相等的，上下margin值亦如此。但是这并不符合，当代码数值有冲突时，优先解析top值及left值的规律。因为究竟是什么原理，小ge也不得而知。。如果有大神知晓，还望不吝赐教。但是这不失为一种好的办法，希望大家活学活用。

二、after伪类清浮动

通常我们在对块元素设浮动以后，需要对其清浮动，以免布局混乱。常见的清浮动方法主要有两种：1）、在后面的子元素css中写"clear:both;"。2）在浮动元素的父级元素中写"overflow:hidden"。现在，我们可以用第三种方法，利用after伪类写一个浮动属性，这样只要有需要清楚浮动的地方，我们就给其父元素加上这样一个浮动属性就可以了。

代码如下：

1. .clearfix:after{   
2.   
3. 　　　　　content:"";   
4.   
5. 　　　　　display:table;       
6.   
7. 　　　　　clear:both;   
8.   
9. 　　　　　}  

以上这篇对于一些css样式的巧妙方法进行总结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/14/5669044.html