css技巧

一、设置等宽的表格

table-layout: fixed;

• table设置宽，则每列平分table的宽

示例

<style>
    table{
        table-layout: fixed;
        border-collapse: collapse;
         200px;
    }
    tr,td{
        border: 1px solid #eee ;
    }
</style>

<table>
    <thead>
        <tr>
            <td>三个字</td>
            <td>八字八字八字八字</td>
        </tr>
        <tr>
            <td>六个字六个字</td>
            <td>六个字六个字</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>两字</td>
            <td>两字</td>
        </tr>
        <tr>
            <td>六个字六个字</td>
            <td>六个字六个字</td>
        </tr>
    </tbody>
</table>

二、flexbox 布局

智能计算padding

.parent{
　　display: flex;
　　justify-content: space-around;//center,flex-start,flex-end，space-around,子项目在主轴上的对齐方式
　　align-items: center;//flex-start,flex-end,stretch,baseline,子项目在交叉轴上的对齐方式
　　.child{
　　　　flex: 0 1 auto;//flex-grow,flex-shrink,flex-basis的简写
　　}
}

容器属性(CSS的columns在伸缩容器上没有效果)

• flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow: flex-direction 和 flex-wrap的简写形式
• align-content: 定位多根轴线的对齐方式。flex-start | flex-end | center | space-around | space-between | stretch

项目属性(float、clear和vertical-align在伸缩项目上没有效果)

• order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。auto | flex-strat | flex-end | center | baseline | stretch

这个属性有兼容性问题，详见此页面的Known issues。如果使用的话建议配合autofixer，觉得npm麻烦，gulp-autofixer一样的。以下是我根据gulp-autofixer编译过来的

.flex-justify {
    display: flex;
    /*子项目主轴*/
    justify-content: space-between;
    /*子项目交叉轴*/
    align-items: center;
}

编译后：

.flex-justify{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

三、ntn-child使用负数选择项目

<style>
li:nth-child(-n+3){
    background: yellow;
}
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

选取到前三个li

三、calc()使用

 calc(100% - 30px);

在less中使用会解析成 calc(70%)，可以用 ~ 避免less编译：

 calc(~"100% - 30px");

四、sticky使用

css3新增的position值，表现吸顶效果

position: sticky;
top: 0px;

 五、文字+图标居中简便方法

<style>
　　.outer{
　　　　width: 500px;
　　　　height: 100px;
　　　　display: table;
　　　　border:1px solid #eeeeee;
　　}
　　.inner{
　　　　text-align: center;
　　　　display: table-cell;
　　　　vertical-align: middle;
　　}
</style>
<div class="outer">
    <div class="inner">
        <img src="//www.baidu.com/img/baidu_jgylogo3.gif" alt="" width="10px" height="10px" />
        文字+图标居中
    </div>
</div>

 六、三角形（向上的带颜色箭头）

.arr{
    width:0px;
    height:0px;
    border-left:1px dashed transparent;
    border-right:1px dashed transparent;
    border-top:1px solid color;
}

 七、禁止浏览器放大字体（使用QQ浏览器x5内核和微信浏览网页时会修改字体大小）

html{-webkit-text-size-adjust:100%;}

 八、使用浮动做三栏布局 来源

<div class="container1">
  <div class="item left">left:  100px</div>
  <div class="item right ">right  100px</div>
  <div class="item center ">中间宽度自定义</div>
</div>
<style>
  .container1 {
    height: 100px;
    border: 1px solid #000;
  }
  .item {
    height: 100%;
    border: 1px solid red;
  }
  .left{
    float: left;
     100px;
  }
  .center {
    margin: 0 100px;
     auto;
  }
  .right {
    float: right;
     100px;
  }
</style>

九、弹框蒙版

使用position四边定位强制拉伸，然后设置margin:auto;

.pop{
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;    
}

如果设置元素的宽高，那么，这个元素居中啦！

不设置的话就会铺满整个屏幕。

十、使用box-shadow/text-shadow

    box-shadow: 0 0 9px 3px rgba(255, 179, 252, .5) inset, 0 0 9px 3px rgba(255, 179, 252, .5), 0 0 0 1px #ffb3fc, 0 0 0 1px #ffb3fc inset;
    border-radius: 100px;
    border: 2px solid #fff;
     134px;
    height: 34px;
    text-shadow: 0 0 5px #ffb3fc, 0 0 10px #ffb3fc, 0 0 15px #ffb3fc, 0 0 1px #ffb3fc;
    color: #fff;

十一、利用table做弹框居中( used in vuejs)

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

十二、display:none和display:block毁坏animation（具体是transition）的问题

情况：js判断是否为微信打开网页，if(true){.show()};在safari中显示元素的transition失效;

查阅资料 show是修改display：“”，不能transition：

function showHide( elements, show ) {
    var display, elem,
        values = [],
        index = 0,
        length = elements.length;
    for ( ; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }
        display = elem.style.display;
        if ( show ) {
            if ( display === "none" ) {
                values[ index ] = dataPriv.get( elem, "display" ) || null;
                if ( !values[ index ] ) {
                    elem.style.display = "";
                }
            }
            if ( elem.style.display === "" && isHiddenWithinTree( elem ) ) {
                values[ index ] = getDefaultDisplay( elem );
            }
        } else {
            if ( display !== "none" ) {
                values[ index ] = "none";
                dataPriv.set( elem, "display", display );
            }
        }
    }
    for ( index = 0; index < length; index++ ) {
        if ( values[ index ] != null ) {
            elements[ index ].style.display = values[ index ];
        }
    }

    return elements;
}

解决：使用opacity:0;js判断使用.css("opacity","1");opacity允许过渡。

十三（10.25）、在table中实现head不动body超出滚动（当然使用div模拟也行）,我用一个table实现

.table table tbody {
    height: 360px;
    overflow-y: scroll;
　  display:block;
}

.table table tbody tr {
    border-bottom: 1px solid #dcdcdc;
}

.table table thead, .table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

有个问题就是使用了table-layout之后就不能给td单独设宽。如果设计的时候tr文字内容相差较多就不适用了，可以使用两个table。