首页 > 开发 > CSS > 正文

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

2024-07-11 08:32:39
字体:
来源:转载
供稿:网友

针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路。此贴为更新帖,以后若有好的css样式技巧,小哥我会不定期更新。

一、块元素水平垂直居中(特别鸣谢:鑫生活。鑫哥出品必属精品!小弟膜拜)

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

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/

代码如下:

html方面:

XML/HTML Code复制内容到剪贴板
  1. <body>       <div class="big">  
  2.       <div class="small"></div>        </div>  
  3.   </body>     

css方面:

CSS Code复制内容到剪贴板
  1. .big{        width:500px;   
  2.     height:500px;        border:1px solid red;   
  3.     position:relative;        }   
  4.   .small{        width:200px; /*自己元素宽高可任意设定 */  
  5.     height:200px;        position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
  6.     margin:auto;           
  7. }  

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表