您现在的位置是：网站首页> 编程资料编程资料

对于一些css样式的巧妙方法进行总结(推荐)引用css样式的书写格式详解Web前端开发css基础样式总结(推荐)纯CSS3超酷书架样式404页面特效源码HTML CSS样式基础(必看篇)CSS更改鼠标为手状样式css样式图片、渐变、相关小知识(必看)浅谈CSS样式权值

2021-08-29 1729人已围观

简介 下面小编就为大家带来一篇对于一些css样式的巧妙方法进行总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

针对之前遇到过的一些特殊样式的实现，我今天做个总结，目的有二：一是将这些方法记录下来，以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大，让广大前端程序猿们能够少走弯路。此贴为更新帖，以后若有好的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>  
  2. 　　　　<div class="big">  
  3. 　　　　　　<div class="small">div>  
  4. 　　　　　div>  
  5. 　　body>  
  6.   

css方面：

CSS Code复制内容到剪贴板
  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伪类写一个浮动属性，这样只要有需要清楚浮动的地方，我们就给其父元素加上这样一个浮动属性就可以了。

代码如下：

JavaScript Code复制内容到剪贴板
  1. .clearfix:after{   
  2.   
  3. 　　　　　content:"";   
  4.   
  5. 　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/    
  6.   
  7. 　　　　　clear:both;   
  8.   
  9. 　　　　　}  
这种方法有个好处，即可以将其写入reset中，之后可以多次调用。

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

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

上一篇：前端必须要掌握的几个CSS3的属性详解css过渡+3D效果的简单实现css动画+照片清晰度动画的实现方法对于一些css样式的巧妙方法进行总结(推荐)css样式图片、渐变、相关小知识(必看)

下一篇：css动画+照片清晰度动画的实现方法CSS3实现的绵羊奔跑动画特效源码CSS3鼠标滑过图片标题遮罩动画特效源码 8种纯CSS3绘制打火机动画火焰效果纯CSS3实现鼠标滑过tip提示框动画特效源码jQuery和CSS3实现的汉堡包导航菜单打开动画特效源码CSS3实现可爱的小黄人动画 html5+css3绘制的滚动齿轮动画特效源码纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码浅谈CSS过渡、动画和变换

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网