css的一些用法

1. & > 等使用

   
   
   Paste_Image.png

  <div class="search-employee">
                <div>
                    <input type="text" placeholder="输入员工工号" ng-model="keyword"/>
                </div>
                <div ng-click="search();">搜索</div>
                <div class="clear"></div>
            </div>


        .search-employee {
            float: left;
            margin: 0 15px;
            > div {
                &:first-child {
                    float: left;
                    input {
                        width: 150px;
                        height: 40px;
                        margin: 0;
                        padding: 9px 15px;
                        border-right: none;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
                &:nth-child(2) {
                    float: left;
                    width: 50px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    background-color: #f96484;
                    color: #fff;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                    cursor: pointer;
                }
            }
        }

点击在下方展示 选择 的 css

Paste_Image.png

    .date-plugin {
        position: absolute;
        top: 55px;
        left: 270px;
        z-index: 10;
        display: none;
    }

1. less 全部清除

box-sizing: content-box; 默认值，width height 不包含 pading border 与margin 的值，也就是说，当width = 100，则实际的width 还需要加上 上述三个
border-box; width = 100 ，已经包含了 pading border ，但是不包含margin

* {
box-sizing: border-box;
}

2. less 的宽度

width: e("calc(90% - 14px)");

3. 左右滚动条

http://www.w3school.com.cn/tiy/t.asp?f=css3_overflow-xy
overflow-x:scroll; //hidden

4. 段落中文本不换行

white-space: nowrap

5. 溢出部分 的处理

http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow
overflow:ellipsis // 点点点
text-overflow:clip // 没有点点,直接 裁剪
overflow-y:scroll;

6

height: calc(~"100%" - @paddingHeight * 2);

7. css 元素前面 与 后面 加上 固定的 东西

&:before {
width: 0px;
height: 0px;
position: absolute;
content: "";
border: 12px solid #FFFFFF;
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
left: 0;
top: e("calc(50% - 12px)");
}

8 . td colspan

http://www.w3school.com.cn/tags/att_td_colspan.asp
<td colspan="13" class="noData even">没有查询到任何数据</td>

9 . input 禁止使用

<input type="text" ng-disabled="customerNameDisabled" ng-class="{true:'base-input-style disabled', false:'base-input-style enabled'}[customerNameDisabled]" ng-model="customerName" placeholder="客户姓名">

10. ng-src

<img src="http://static.bokao2o.com/images/s3backend/checkbox_unchecked.png" ng-src="{{selfSrc}}" />

11 .控制 input 输入 源头的处理

<input type="text" ng-model="pay.payMoney" onkeypress="onlyNumber(this.value)" />

12. view 展示 移动的效果

@keyframes popup {
0% {top:100%; opacity: 0;}
100% {top:-70px; opacity: 1;}
}

@keyframes close_popup {
0% {top:-70px; opacity: 1;}
100% {top:100%; opacity: 0;}
}

>.billModal.ng-hide {
animation: close_popup 0.2s;
-webkit-animation: close_popup 0.2s;
}

13.input 获取 焦点 样式

>input[type='text']:focus {
border: @themeColor 1px solid;
background-color: #ffffff;
}

14. 滚动条优化

 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   background-color: #F5F5F5;
 }
 /*定义滚动条轨道 内阴影+圆角*/
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 6px;
   background-color: #F5F5F5;
 }
 /*定义滑块 内阴影+圆角*/
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
   background-color: #999;
 }

15.图片铺满

 body {
   height: 100%;
   background: url(../login/img/index_bg.jpg) no-repeat center 0;
   background-size: cover;
 }

16.首行缩进

span{
text-indent: 2em;
}

17.遮罩的 父级 与 子级 的透明度的传递问题

.mask {
background-color: rgba(0, 0, 0, .5); //mask 的子级不会变透明
}
.mask {
background-color: #000;
     opacity: 0.5; //mask 的子级也会变的透明
}

18.媒体查询

// 媒体查询  屏幕 大于 xxx便执行
 @media only screen and (min-width: 1700px) {
   .text-page {
     p {
       font-size: 16px !important;
       // background-color:red;
     }
   }
 }