首页 web前端 html教程 对于一些css样式的巧妙方法进行总结。_html/css_WEB-ITnose

对于一些css样式的巧妙方法进行总结。_html/css_WEB-ITnose

Jun 24, 2016 am 11:54 AM

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

  


    

      

     

  

 

css方面: 

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

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

    二、after伪类清浮动

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

代码如下:

  .clearfix:after{

     content:"";

     display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/ 

     clear:both;

     }

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

希望这个帖子能够真正的帮到大家,在今后的学习中,我也会将我遇到的好的方法,不定期更新。最后再次感谢"鑫空间"等各位前端大神。小菜向你们看齐!!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什么。 元素?

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什么。 元素?

视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

视口元标签是什么?为什么对响应式设计很重要?

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

> gt;的目的是什么 元素?

See all articles