1.table中<thead>固定，只有列表数据滚动

<style>
table tbody {
    display:block;
    height:195px;
    overflow-y:scroll;
}
table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}
</style>

2.图片宽度采用百分比,高度保持和宽度一致或者某比例

为什么采用背景图的方式而不采用img标签,是因为img标签的方式在移动端无法正常显示图片.

<div class="image" style="background-image: url('xxx.png'}"></div>

.image {
    width: 100%;
    padding-bottom: 100%; /* 或者padding-bottom: xx%; */
    height: 0;
    background-size: 100% 100%;
}

3. saas中要使用变量需要使用插值的方式

.app-inner {
    display: flex;
    height: calc(100% - #{$topbar-height});
}

4. less中的calc会被解析计算的问题

less语法中,对于calc计算,浏览器解析时会被进行运算: 例如:

　div {
　　width : calc(100% - 30px);
　}
　
　会被浏览器解析为:
　
　div {
　　width: calc(70%);
　}

当然这个是不行的,解决办法就是:

　div {
　　width : calc(~"100% - 30px");
　}
　
　可以正常解析为:
　
　div {
　　width : calc(100% - 30px);
　}

5. 元素尺寸小结

scrollHeigh：元素内容的全部高度，包括content、溢出的content、padding、伪元素。不包括元素的border和margin。

clientHeight：元素的可见部分高度，包括content、padding。不包括元素的border和margin。

offsetHeight：元素的实际占据高度，包括content、padding、border、滚动条。不包括伪元素。

一个div呈现的高度为div的height+padding+border。如果不想被padding和border影响高度，可以设置 box-sizing: border-box;；