初识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;}
