html、css 整理备忘杂记

1：浮动

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

3：div的内容居中

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

4：内外边距（边框）

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

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

div
{
position:absolute;
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=" 80px;">
                                    <div align="center">XXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div align="center">
                                <a href="xxx">
                                    <img src="xxx" style=" 80px;">
                                    <div align="center">XXXXXX</div>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div style="float: right">
                                <a href="xxx">
                                    <img src="xxx" style=" 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;"

设置DIV为圆形：

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

div自动换行：

　　white-space:normal; 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;}

html、css 整理备忘 杂记

html、css 整理备忘杂记