zoukankan      html  css  js  c++  java
  • css技巧

     1.实现position为fixed与absolute值时居中定位:

     给需要定位的元素块外加一层div盒子,外层div盒子存在于文档流中,让外层div盒子居中定位并设置position属性为relative,内部内容据此再定位。

    2.保持图片宽高比例不变形失真:

    • img标签设置宽度百分比,基数为外层框宽度,高度会自动保持比例显示;
    • background-size: 100% auto;
    • background背景属性设置:(css3)
    •     background-size:contain;         /*保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域*/

    3.盒子内文字内容突出时,省略号代之:

    white-space:nowrap; overflow:hidden;text-overflow:ellipsis;

    4.div块垂直居中:

        在此之前,你需要知道css提供了vertical-align:middle属性实现盒子垂直居中,但遗憾的是这个属性只对html的一些控件如“图片,单选,复选”等等有效果,这里,我们可以这样模拟实现,即利用父元素块的display:table属性值模拟table效果,子div块的display:table-cell模拟td效果,子块加上vertical-align:middle,这时子块里的内容起到居中效果,如果子块不设置高度和宽度,默认为与父块等同。

           
             
  • 相关阅读:
    ACM模板(Java)
    【HDU 6008】Worried School(模拟)
    【HDU 6005】Pandaland(Dijkstra)
    jQuery和js使用点滴
    springmvc入门(1)
    MyBatis延迟加载和缓存(4)
    MyBatis高级映射查询(3)
    教你如何下载微信公众号的音频文件
    MyBatis代理开发(2)
    MyBatis入门程序(1)
  • 原文地址:https://www.cnblogs.com/zhu-xingyu/p/6039852.html
Copyright © 2011-2022 走看看