美文网首页
css调试样式整理

css调试样式整理

作者: 青苹果和梨 | 来源:发表于2017-03-03 21:28 被阅读0次

    之前项目开发,零零散散笔记了些开发的知识,一直没有想整理总结,现在写博客整理吧


    css篇

    1.如何让div中的内容垂直居中

    内边距(padding)法

    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    
    2.如何让div显示边框样式呢?

    .divcss5{border:1px solid #F00}

    3.CSS3 圆角(border-radius)

    -moz用于Firefox
    -webkit用于Safari和Chrome。
    例如

    #round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
    }
    
    4.web手机字体自适应

    css方法

    @media screen and (min-width: 320px) {
    html {font-size: 12px;}
    }
    @media screen and (min-width: 360px) {
    html {font-size: 14px;}
    }
    @media screen and (min-width: 400px) {
    html {font-size: 16px;}
    }
    @media screen and (min-width: 440px) {
    html {font-size: 18px;}
    }
    @media screen and (min-width: 480px) {
    html {font-size: 20px;}
    }
    @media screen and (min-width: 640px) {
    html {font-size: 26px;}
    }
    

    标签就可用:font-size: 1.0rem,然后字体size就会根据屏幕适应了。

    5.规定段落中的文本不进行换行:
    p{
    white-space: nowrap
    }
    

    <small>normal默认。空白会被浏览器忽略。
    nowrap文本不会换行,文本会在在同一行上继续,直到遇到标签为止。
    pre-wrap保留空白符序列,但是正常地进行换行。
    pre-line合并空白符序列,但是保留换行符。
    <small>

    相关文章

      网友评论

          本文标题:css调试样式整理

          本文链接:https://www.haomeiwen.com/subject/mvgrgttx.html