web开发之常用css小技巧

在开发web项目时，经常会用到一些小的css知识点，所以在此特地总结下

1.修改input，内部placeholder的字体颜色

所有的input，有效

//双冒号前面加input
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #666; 
    font-size:14px;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
    color: #666;
    font-size:14px;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #666;
    font-size:14px;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color: #666;
    font-size:14px;
}

2.超链接去除下划线

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式
text-decoration:underline 下划线样式
text-decoration:line-through 删除线样式-贯穿线样式，//常见“原价”处理
text-decoration:overline 上划线样式

3. 行缩进，字与字间距，行与行间距

一般用于一些静态文本界面

text-indent
text-indent: 20px; 缩进了20px
letter-spacing:8px;，字间距为8px
line-height:3;

4.z-index

1.z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）.
2.在使用绝对定位position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性。
3.position:fixed

6.自定义输入框input

1.去除边框的代码

border-width:0px;//即可去除相应的周围的边框

2.将border设置为0px，即可去掉原来的边框
3.去除input获取焦点时的蓝色外边框：

css设置属性:outline:none;

7.如何设置头像为圆角

.header{
    padding:1px; width:80px; height:75px;
    border: 1px solid #00ffff;
    -moz-border-radius: 1000px; 
    -webkit-border-radius: 1000px; 
    border-radius:1000px;   
    vertical-align:middle;
}

8.如何在将div并排列显示

1.float:left;
需要并排的div使用float即可
2.display:inline;
需要并排的div使用display即可

注意：
无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局

9.div内包含文本超出外边距

如，

<div class="product-desc">描述描述描述
描述描述描述描述描述描述描述描述描述描述描述描述描述
</div>

引用的css样式为：

.product-desc{
    width:100%; 
    text-align:center;
    color:#E71438;
    font-size:0.6em;
    text-overflow: ellipsis;
    overflow: hidden;  white-space: nowrap;
}

10.多个div显示在同一行，导致下面的也跟着浮动

将不需要跟随浮动的部分，用div包裹，使用clear:both修饰
即便clear:both修饰，包裹的内容内部需要多个div在同一行显示，也不会造成影响
如，


//第一个
<div style="clear:both">
    <div >
        <div class="product-content">       
        </div>
    </div>
</div>

//第二个
<div style="clear:both">
    <div >
        <div class="product-content">   
        </div>
    </div>
</div>

css文件中：

clear:both

11.设置script标签

<script>
    var DEFAULT_PID = "144248588";
    function loadTaobaoPid(pid) {
        if(null == pid || "" == pid) {
            pid = DEFAULT_PID;
        }
                var finalPid = "mm_122087721_38788982_" + pid;
                initTaobao(window, document, finalPid);
    }
    function initTaobao(win, doc, pid) {
        var s = doc.createElement("script"), h = doc.getElementsByTagName("head")[0];
        if (!win.alimamatk_show) {
            s.charset = 'gbk';
            s.async = true;
            s.src = "https://alimama.alicdn.com/tkapi.js";
            h.insertBefore(s, h.firstChild);
        }

        var o = {
            pid: pid,
            appkey:"",
            unid:"",
            evid:"",
            type:"click",
            plugins: [
                {name: 'keyword'},
                {name: 'aroundbox'}
            ]
        }
        win.alimamatk_onload = win.alimamatk_onload || [];
        win.alimamatk_onload.push(o);
    }
    loadTaobaoPid("144248588");


</script>

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

12.设置html锚点

最好方法是用js的srollIntoView方法，直接用scrollIntoView:

document.getElementById("divId").scrollIntoView();
    这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。
    推介大家用第四种，我依次试了前三种，都有各种问题。

第一种方法，也是最简单的方法是锚点用标签

在href属性中写入DIV的id，如下：

<!DOCTYPE html>
<html>
<head>
<style>
div {
    height: 800px;
    width: 400px;
    border: 2px solid black;
}
h2 {
    position: fixed;
    margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。

第二种方法

是在js事件中通过window.location.hash=”divId”跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦。

第三种方法是用animate属性

当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#div1Link").click(function() {
    $("html, body").animate({
        scrollTop: $("#div1").offset().top }, {
        duration: 500,easing: "swing"});
    return false;
});
$("#div2Link").click(function() {
    $("html, body").animate({
        scrollTop: $("#div2").offset().top }, {
        duration: 500,easing: "swing"});
    return false;
});
$("#div3Link").click(function() {
    $("html, body").animate({
        scrollTop: $("#div3").offset().top }, {
        duration: 500,easing: "swing"});
    return false;
});
});
</script>

注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。　　　
$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。
另外，脚本可以进一步优化，自己来试试这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

13.关于DIV内标签设置高度无效问题

问题描述：
    父容器为DIV，将该DIV高度设置为百分比，而父容器div内部的<img/>标签高度也设置为百分比，发现无论如何修改图片高度的百分比，总是没有任何效果。
    后来将div的高度设置为固定高度，比如100px，图片的百分比才起作用。
问题原因：
    css设置容器宽度百分比，即便父容器没有固定的宽度值，也会有浏览器宽度默认值作为参考，计算标签的宽度。
    css设置容器高度百分比，父容器没有固定的高度值，而浏览器也没有默认高度，所以子容器也无法计算高度。

14.设置透明度

//css
{
    opacity:0.5;
}

15. css 如何给菜单中div每一行都有一个下划线

具体需求：

<div>菜单1</div>
<hr>
<div>菜单1</div>
<hr>
<div>菜单1</div>
<hr>

调整设置hr的宽度，即可

16. 背景半透明，汉字不透明

  1.使用opacity：
    会导致背景色与汉字的颜色一起透明，这样不好
  2.使用rgba控制：
    设置透明度：background: rgba(138, 197, 0, 0.6);
    该方式不能和opacity一起使用

17.jquery设置背景图片

$(this).css("background-image","url(on.jpg)");

18.DIV一直定位在屏幕底部

把DIV永远置于页面的底部利用绝对定位，设置底部距离为0

｛
position:fixed; 
bottom:0;
｝