初识html、css时随笔记录

css部分样式

圆框效果：border-radius:5px;

固定样式：position:fixed;悬浮窗在IE6中position：absolute其余浏览器可以用fixed；

使table中的表格横线出现一次：border-collapse:collapse;

使两个td的线消失：cellspaceing="0" cellpadding="0";

input添加图片居中方式：align="absmiddle";

文本框textarea的宽和高不随便改动添加样式：resize:none;

图片和文字居中：vertical-align:middle;

css为了各个浏览器的兼容最好重置margin和padding  *{margin:0；padding:0;};

单行字调试同样的高度：line-height:28px;

鼠标的样式呈现手型：cursor:pointer;

文字首行缩写：text-indent:-9999px; text-indent:2em;首行缩进两个字符；

断句的样式：word-wrap:break-word(遇到长单词一行不够另起一行);nomal(正常显示); word-break:break-all(直接断词，允许单词内换行)；keep-all(只能在半角空格或者连字符处换行);英文单词一般不折行显示，如果让其单词内折行必须要用word-break:break-all;

文字显示一行文字太多显示省略号：{overflow:hidden;text-overflow:ellipsis(clip默认的无省略号);white-space:nowrap（文本不自动换行）;}

　　使用这个样式的时候一定注意：

　　1、一定给容器宽度；

　　2、如果少了overflow：hidden;文字会横向撑到容器外；

　　3、如果少了white-space:nowrap;文字会把容器向下撑，即使定义了高度也不会出现省略号，多余的会被裁切掉；

　　4、如果少了text-overflow:ellipsis;就没有省略号了；

　　如果是table使用除了上面的之外一定要给table定义table-layout:fixed;只有定义了表格布局算法为fixed下面的td定义的才起作用；

css的编写顺序一般是：显示>盒模型>排版>字体>边框>背景   display、长、宽、边距、字体大小颜色，边框、背景等；

弹框的阴影效果：box-shadow:0 0 21px rgba(0,0,0,0,35);box-show(横向阴影，竖向阴影，模糊距离，阴影的尺寸，阴影的颜色，insert外部阴影改为内部阴影);

html部分随笔

手机页面必须添加的（网页自适应）：<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
<meta name="format-detection" content="telephone=no" />;

input上传文件：<input class="" type="file"/>;谷歌和火狐浏览器对上传文件鼠标移动出现小手的样式处理：font-size:0px;

dl、dt、dd、dl表示列表，dt标题，dd表示内容；

<a href="#"></a>a标签在IE6下href为空的时候这个链接毫无反应，一般空的情况下填写#；

显示图片加载不出来的时候设置默认图片：onerror="Javascript:this.src=''";

<input />设置默认有搜索的词：placehoder="";

鼠标放上去显示省略号的字加title就好如<div class="" title="">我很长我很长我很长、、、、、</div>

自己随手总结的浏览器兼容问题

1、margin加倍问题

　　{float:left;margin:5px}IE下距离为10px; 解决办法{float:left;display:inline;margin:5px;}IE下就是5px;

2、IE下不认识min-height或者min-width

　　{min-width:600px;width:e-xpression(document.body.client.width<600?"600px":"auto");}没有测试过一般没用

3、DIV浮动IE文本产生3px的BUG

　　

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
</div>
<style>
#box{float:left;width:800px;}
#left{float:left;width:50%;}
#rigth{width:50%;}
</style>

*html #left{margin-right:-3px;}这样处理就不会有3px的距离；

4、float的div闭合

　　在IE浏览器中一定要清除float的浮动，否则会带来不可预知的样式错误；

5、文本和文本框对齐样式

　　vertical-align:middle;

6、居中一般用{margin:0 auto}　　IE中在body居中，父级元素定义：text-align:center；

7、长文字自动换行

　　IE：word-wrap:break-word;

8、li在浏览器的用法

　　一般都会在li上添加：list-style：none；黑点就会消失；

　　在IE6如果li不对齐可以用: overflow:hidden;

　　在IE6下让不显示的隐藏为：overflow:hidden;zoom:1;

　　在IE中图片显示带边框可以用：fieldset,img{border:none};

　　在IE6中用sapn{display:block;}还是不显示块状的话，增加一个width就可以显示；

　　在IE6使用position:absolute时默认值要加入left:0px即可；

9、margin-top作用于父类div

　　如果两个容器嵌套时，外层容器和内层容器之间没有别的元素，firfox、IE8会把内层的margin-top作用于父类元素

　　解决办法：1、如果内层容器只有一个元素，没有图片或者其他东西，用padding-top可以代替margin-top;

　　　　　　　2、在子容器加float；

　　　　　　　3、在父类元素中添加overflow:hidden属性子元素的margin就不会折叠；

　　　　　　　4、设置父类元素display：inline-block子元素垂直margin不折叠；

10、opacity在IE6不起作用，处理方法.opacity{opacity:0.3;filter:alpha(opacity:40);zoom:1;}