html、css杂记

1：浮动

<div style="float: left">

2：清除浮动，把父div撑起来

<div style="clear:both"></div>

3：div的内容居中

<div align="center">XXX</div>

或<div style="text-align:center">  xxx </div>

4：内外边距（边框）

//淡灰色的边框效果
border:2px solid #ededed;

---

5.0:div完美自适应动态上下左右居中，多用于信息提示框效果。

div
{
position:absolute;
width:500px;
height:260px;　　
top:50%;
left:50%;
margin-left:-250px;
height:-130px;
z-index:1000;
} 

　　文字居中：text-align:center; height:22px;line-height:22px;设置显示文字的标签的高和line-height的高一样就行了！

5：让3个DIV水平居中平均分配

                <table width="100%">
                    <tr>
                        <td>
                            <div style="float: left;">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div align="center">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div style="float: right">
                                <a href="xxx">
                                    <img src="xxx" style="width: 80px;">
                                    <div align="center">XXXXXX</div>
                                </a>
                            </div>
                        </td>
                           <div style="clear:both"></div>
                    </tr>
                </table>

6：<span> 标签被用来组合文档中的行内元素

---

7：设置div的圆角

style="border:1px solid #0099FF; border-top-right-radius:22px;"

aaarticlea/png;base64,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" alt="" />

---

设置DIV为圆形：

style="border-radius:50%;background-color:#4795FF;width:111px;height:111px;“

div自动换行：

　　white-space:normal; width:200px;

　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

---

8：css设置字体大小

p {font-size:0.875em;}

---

9：    //解决：手机输入键盘弹出时，把底部固定的导航条顶上去的问题
    $('input').focus(function(){
        $('.navbar-fixed-bottom').hide();
    });

$('input').blur(function(){
        $('.navbar-fixed-bottom').show();
    });

---

10：Input标签自定义属性

<input type="text" name="s01" data_info="自定义数据信息" />  
获取值：var id = $('#S01').attr('data-info');

---

11： 如何让div中的div处于右下角

<img style="position:absolute;right:0px;bottom:0px;" src="xxx"/>

// 相对于父级元素的绝对定位

12：input 不保存输入的缓存记录

<input type="text" id="password" onfocus="this.type='password'" autocomplete="off"/>

注释：① autocomplete="off"　不让浏览器记录历史输入。

　　　　 ② 一般我们都是将密码框类型设置为‘password’，现在我们将它改为‘text’，在获取焦点后再改变它的类型。（360兼容模式，不支持）

　　　　　　这样浏览器就不会提示记住登陆了。

　　

13：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 （无效果标签  无用）

　　

p {font-size:0.875em;}