前端一些技巧

1.ul外div高度自适应

一种给ul加css overflow: hidden;
另一种给外div加 display:table;

2.div居中

margin:0 auto;

3.textarea 100%

<div style="width:100%;">
    <textarea id="txtShareNote" name="txtShareNote" style="width:100%;" rows="5">123</textarea>
</div>

4.设置背景图片大小

background-size:100% 15px;

5.textarea去掉链接边框色、不可拖动

textarea{outline:none;resize:none;}

6.内容不居中

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

7.善用一些定位

position: absolute;
position:relative;
overflow: hidden;
overflow: auto;

8.让div充满整个页面

position:absolute;

9.让table 100%宽度显示

display:table;

10.定位 外层relative，内层absolute

.imgclear{
    width:20px;
    position:absolute;
    right:3px;
    bottom:3px;
    float:right;
    display: none;
}
.mr-flightno{
    position:relative;
}
<div class="mr-flightno">
    <input type="text" id="txtFlightNo" name="txtFlightNo" placeholder="航班号" />
    <img class="imgclear" src="~/Content/images/close.png" id="btnclear4" onclick="clearinput('4')" />
</div>

11.最上层弹框滚动，下面的页面跟着滚动

$('html,body').css({'overflow':'hidden','height':'100%'});

参考：http://blog.csdn.net/wsxc451/article/details/51880641

12.解决发布网站，css、js缓存问题

通过设置时间戳版本号，v=20170317

13.div里有图片和文字，如何让文字居中显示

文字不居中，是由图片导致
img{
    vertical-align:middle;
}
单独的文字居中则用line-height解决
height:35px;
line-height:35px;

14.文字左右加横线

.title {
    text-align: center;
    color: white;
}

.title span {
    display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
    font-size: 18px;
    color: white;
    position: relative; /*定位横线（当横线的父元素）*/
}

.title span:before, .title span:after {
    content: ''; /*CSS伪类用法*/
    position: absolute; /*定位背景横线的位置*/
    top: 52%;
    background: white; /*宽和高做出来的背景横线*/
    width: 12%;
    height: 2px;
}

.title span:before {
    left: 22%; /*调整背景横线的左右距离*/
}

.title span:after {
    right: 22%;
}