一、设置等宽的表格
table-layout: fixed;
- table设置宽，则每列平分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
这个属性有兼容性问题，详见此页面的。如果使用的话建议配合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使用负数选择项目
- 1
- 2
- 3
- 4
- 5
选取到前三个li
三、calc()使用
width: calc(100% - 30px);
在less中使用会解析成width: calc(70%)，可以用 ~ 避免less编译：
width: calc(~"100% - 30px");
四、sticky使用
css3新增的position值，表现吸顶效果
position: sticky;top: 0px;
五、文字+图标居中简便方法
文字+图标居中
文字+图标居中 六、三角形（向上的带颜色箭头）
.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%;} 八、使用浮动做三栏布局
left: width: 100pxright width: 100px中间宽度自定义
九、弹框蒙版
使用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; width: 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; width: 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。