• CSS相关知识和经验的碎片化记录


    1、子DIV块中设置margin-top时影响父DIV块位置的问题

      解决办法1:若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden;
      解决办法2:在子DIV块中用padding-top代替margin-top。

    2、在IE浏览器上div元素块不能对ActiveX控件界面进行遮挡的问题

      解决办法:在div元素块中添加子元素iframe,并设置其相应的样式和属性,如:

    <div id="preLoadMask" class="ui_preLoadMask">
      <iframe style="position:absolute;z-index:-1;100%;height:100%;top:0;left:0;scrolling:no;filter:alpha(opacity=0);opacity:0.5;" frameborder="0"></iframe>
    </div>

    3、使div在浏览器窗口居中

    .cls {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: auto; /*重要,IE兼容模式*/
        margin-top: -16px;
        margin-left: -16px;
    }

    4、通过CSS样式让页面的内容不能被选中

    body{
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }

     5、不同浏览器下p等元素中的文本(中文)无法自动换行导致溢出问题

    解决办法1(缺点:不支持火狐):

    word-wrap: break-word;
    word-break: break-word;

    解决办法2(缺点:英文单词被拆分):

    word-wrap: break-word;
    word-break: break-all;

    解决办法3:

    word-wrap: break-word;
    word-break: normal;

    word-break:break-all;所有浏览器都支持;

    word-wrap:用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象;

    word-break:用来标明怎么样进行单词内的断句。

    详细参考:你真的了解word-wrap和word-break的区别吗?

    6、多个div等元素横向排列,显示横向滚动条

    <!DOCTYPE html>
    
    <html>
    <header></header>
    <body>
        <div style="500px;height:100px;background:yellow;  overflow-x: scroll;overflow-y: hidden;white-space: nowrap;">
        
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            <div style="50px;height:50px;background:red;  display:inline-block;">
                123
            </div>
            
        </div>
    </body>
    </html>

     注意父元素的 white-space: nowrap; 样式和子元素的 display:inline-block; 样式

    ......

    作者:yuzhihui
    出处:http://www.cnblogs.com/yuzhihui/
    声明:欢迎任何形式的转载,但请务必注明出处!!!
  • 相关阅读:
    (转)tomcat与地址栏图标之研究(多浏览器)
    (转)Android学习笔记---SQLite介绍,以及使用Sqlite,进行数据库的创建,完成数据添删改查的理解
    (转) Tomcat部署Web应用方法总结
    (转)mysql账号权限密码设置方法
    (转) mysql的连接,创建账号,修改密码
    (转)mysql各个主要版本之间的差异
    (转)浅析Mysql的my.ini文件
    (转)如何在Windows上安装多个MySQL
    [笔记]线段树学习笔记
    [教程]对拍程序(linux)+ 考试(做题)生成数据 + 提交注意事项
  • 原文地址:https://www.cnblogs.com/yuzhihui/p/5337073.html
Copyright © 2020-2023  润新知