如何巧妙的使用css样式

今天就跟大家聊聊有关对于一些css样式的巧妙方法进行总结(推荐)，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了顺城免费建站欢迎大家使用！

一、块元素水平垂直居中

对于一个块元素的水平垂直居中，水平居中的方式不必多说，一般用margin:auto;等方法即可实现。而对于垂直居中，尽管有vertical-align:middle属性，但是由于其只适用于table标签中，而table标签效果不好控制的特点大家都懂。。。因此，我们一般常用的方法是：将子级元素设定inline-block属性，并将其行高属性：line-height的值设定为与父级元素相同的高度。

html方面：

XML/HTML Code复制内容到剪贴板

```
  
　　　　  
　　　　　　
```

css方面：

CSS Code复制内容到剪贴板

.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;   
　　　　   
}

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

二、after伪类清浮动

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

代码如下：

JavaScript Code复制内容到剪贴板

.clearfix:after{   
  
　　　　　content:"";   
  
　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/    
  
　　　　　clear:both;   
  
　　　　　}

这种方法有个好处，即可以将其写入reset中，之后可以多次调用。

看完上述内容，你们对对于一些css样式的巧妙方法进行总结(推荐)有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

分享标题：如何巧妙的使用css样式
链接分享：http://abwzjs.com/article/ihpdch.html

如何巧妙的使用css样式

其他资讯