zoukankan      html  css  js  c++  java
  • CSS点滴整理

    scrollHeight与scrollWidth

    Chrome下body的这两个属性与其他元素有差异。

    当页面的height <= body.clientHeight时,一切正常,body.clientHeight == body.scrollHeight

    但当页面的height > body.clientHeight时,body.scrollHeight不是body的滚动高度,而是整个页面的高度

    而且在IE下,如果没有设置body的宽高样式,那么scrollHeight等于body内部元素所占高度。

    IE6下 <select>无法被其他元素覆盖(通过z-index)

    font-size:13px在IE6下无效,但font-size:12px等等却可以

    解决“高度塌陷”的方案

    <div style="border:solid 1px black;400px;display:inline-block;">
      <div style="float:left;background:lightgreen;30%;">Sgfasd fashdsss dssssss ghfasdfsdfSSSDF</div>
      <div style="float:left;background:lightgrey;20%;">SSS df  fdsdf DF</div>
    </div>
    

     重点是蓝色的部分

    文字截断(长度超出部分用省略号表示)

    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...);*/

    如果是table的话还要加上下面的
    table-layout:fixed;

    竖直居中(容器内元素)

    方案1  line-height:10px;
    方案2  padding-top:5px;padding-bottom:5px;

     IE各版本间CSS差异

    IE6不支持子元素选择器和相邻兄弟选择器 例 #main > div{} #main + div{}

    IE6不支持属性选择器 例 a[href]{}

    IE6不支持伪类

    IE6不支持Min-Height ,Min-Width,Max-Height,Max-Width  (可变的宽度和高度极限值)

    IE6不支持 display:fixed  绝对定位,且不随页面移动 (IE6+支持)

    IE6,7不支持裁剪 clip:rect


    浮动元素居中

    父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

    <!DOCTYPE html>
    <html>
    <head>
        <style type="text/css">
            .p{
                position:relative;
                left:50%;
                float:left;
            }
            .c{
                position:relative;
                float:left;
                right:50%;
            }
        </style>
    </head>
    <body>
        <div class="p">
            <h1 class="c">Test Float Element Center</h1>
        </div>
    </body>
    </html>

     CSS Hack

    添加针对所有IE的Style:

    <!--[if IE]>
    <!--
       TODO
       这类Hack不仅对CSS生效,
       对写在判断语句里面的所有代码都会生效
    -->
    <![endif]-->

    针对IE各个版本的Hack

    div{
        background:blue;
        background:blue \9;/*All IE*/
        _background:blue;/*IE6*/
        +background:blue;/*IE7*/
        *background:blue;/*IE6,7*/
        background:blue \0;/*IE8*/
        background:blue \9\0;/*IE9*/
    }

    利用ul和li实现元素的按序布局(例如导航

    ul
    {
        list-style: none;
        margin-left:5px;
        width: 98%;
        overflow: hidden;
    }
    li
    {
        float: left;
        width:100px;
        margin-right: -1px;
        margin-top:2px;
        height: 20px;
        line-height: 20px;
        position: relative;
        overflow: hidden;
        border: 1px solid #B3B3B3;
        padding-left:2px;
        display:inline-block;
    }

     在CSS文件中引用其他CSS文件.可用于简单的CSS文件整理

    main.css

    @import url("ligerui-common.css");
    @import url("ligerui-dialog.css");
    @import url("ligerui-form.css");

     给定一个元素,如果相邻的两个border颜色不相同时,效果只是两条垂直的不同色的线而已;但如果border-width足够大的话,将会有意想不到的效果,如下:

     

     如果上下(左右)border的宽度等于height(width)的话,就会出现下面的效果:

     

     再进一步  如果让上下border的颜色变成透明的,则成了一个箭头!而且还没用图片!

     


    textarea 的resize问题

    在Chrome下,textarea是可以通过拖动右下角的三角来调整大小。如下图

    但有些时候我们不希望这个输入框可以被用户随意摆弄
    解决方法:
    text{resize:none;}


    让文字包围图片

    • 将<img>的属性align设置成"left"或"right"
    • 给<img>添加样式float:left;或float:right;

  • 相关阅读:
    matlab学习笔记之求解线性规划问题和二次型问题
    matlab学习笔记之基础知识(一)
    jQuery中获取特定顺序子元素(子元素种类不定)的方法
    几种常见网页布局设计
    jQuery中删除节点方法remove()、detach()、empty()分析
    jQuery实现复选框全选、全不选、反选问题解析
    window.onload和$(document).ready()比较
    redis+php微博功能的redis数据结构设计总结(四)
    redis+php实现微博功能(三)
    redis+php实现微博功能(二)
  • 原文地址:https://www.cnblogs.com/TiestoRay/p/2607016.html
Copyright © 2011-2022 走看看