zoukankan      html  css  js  c++  java
  • 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/
    声明:欢迎任何形式的转载,但请务必注明出处!!!
  • 相关阅读:
    mysql服务器上的mysql这个实例中表的介绍
    mysql的innodb存储引擎和myisam存储引擎的区别
    Ubuntu配置java环境变量
    Android_adb shell am/pm使用
    tty相关内容
    Ubuntu和windows共享文件夹
    蓝牙查询网站
    Vim折叠模式设置
    ubuntu下安装jdk
    Linux下Gcc生成和使用静态库和动态库详解
  • 原文地址:https://www.cnblogs.com/yuzhihui/p/5337073.html
Copyright © 2011-2022 走看看