在做项目中学到一些CSS知识

都是很实用的

a标签 去掉 下划线text-decoration:none;

background属性 我想绝大部分元素都有这个属性

还有 background-image属性

还有background-color属性这几个属性到底有什么区别呢，我总结一下

我觉得 background包括 background-image属性和background-color属性

比如说

background:url('images/you.png') no-repeat #F4F3F3 scroll 16px 12px ;

这句话的意思是background-image是url('images/you.png')图片不平铺 背景图片的卫士是在X轴16px平移 Y轴平移 12px

background-color是#F4F3F3

CSS的优先级，解决样式的覆盖

优先级最高的就是 你直接在style里面加上样式，那么这样优先级别是最高的

其次就是ID选择器是第二

其次就是类选择器 加上的样式，

再其次就是类型选择器加上的样式

如果 你的div1没有 border-top：none的话 那么你在这个div里面的div2如果用了margin-top话时 top相对的是不是你div1

而是div1上面的这个元素

解决这个方法用的就是 不能用margin 用padding

总结 如果没有边框 那么就不能用margin

到今天我对CSS几个比较那一理解的观点我总结一下

一个是float属性，一个是position属性float顾名思义，就是浮起来的意思，div是块级元素，所以就是站了一行，如果你想要一行显示2个div那么

就得用float，

positiion属性我们最常用的就是absolute和relative属性，一个绝对 一个相对

绝对 一句话概括就是 如果position属性加了relative 那么再制定 top和left那么就是相对于没加position属性的的位子 偏移top和left

如果给一个 元素加了绝对定位，那么他就会根据 父亲元素中有 position属性的那个元素进行定位，如果父亲元素中没有一个的话，那么就会 body定位

如果你为一个元素加上padding的时候，left和right，那你你就看这个是那个元素，如果是block元素，有定义width的情况下 再加padding-left和padding-right，那么

元素真正的width就是在 原来的width基础上再加上padding的值，

什么叫block元素呢，简单的说，就是block元素里面能容纳其他元素  比如我们最常用的div就是

如果你在开发jsp的时候一个元素结束标志与另一个元素的开始标志，之间有换行了，那么再页面中默认 就会有一个空格,IE是没有的firefox是有的

如果 你前面的div是设置了float这么说 你这个div下面要用到margin  那么对的不是前面那个浮起来的div，要加clear属性，both

ul有自带的margin属性，firef是不能去掉这个margin 而IE是可以去掉默认的margin属性的

一人说 为了兼容个浏览器的用padding和margin的效果  left和top最用用padding  right和bottom用 margin

<s:iterator value="beforeSpecials" status="status">
                            <s:if test="#status.count-2==-1 ||listTrainSpecial[#status.count-1].teachDate!=listTrainSpecial[#status.count-2].teachDate">
                                <tr style="font-size: 14px;">
                                    <td style="width:120px;"><s:date name="listTrainSpecial[#status.count-1].teachDate"  nice="false" format="MM月dd日" />
                                        <a href="javascript:;" onclick="addtr(this);" title="添加一天课程"
                                                    class="aclass"><span class="spanadd"></span></a>
                                        <a href="javascript:;" onclick="deltr(this);" title="删除一天课程"
                                                    class="aclass"><span class="spandel"></span></a>
                                    </td>
                                    <td colspan="5" style="padding-left:0px;border-bottom:0px;">
                                        <table cellpadding="0" cellspacing="0" style=" table-layout: fixed;" class="innertable" >
                            </s:if>
                                            <tr>
                                                <td style="width:120px;"><s:property value="listTrainSpecial[#status.count-1].teachTime" /></td>
                                                <td style="width:150px;"><s:property value="name" /></td>
                                                <td style="width:300px;"><s:property value="content" /></td>
                                                <td style="width:80px;"><s:property value="principal" /></td>
                                                <td style="width:200px;border-right:0px;"><s:property value="listTeacher[#status.count-1].job" />
                                                    <s:property value="listTeacher[#status.count-1].title" />
                                                    <a href="javascript:;" onclick="addtd(this);" title="添加一门课程"
                                                    class="aclass"><span class="spanadd"></span></a>
                                                    <a href="javascript:;" onclick="deltd(this);" title="删除一门课程"
                                                    class="aclass"><span class="spandel"></span></a>
                                                </td>
                                            </tr>
                                            
                            <s:if test="#status.count==listTrainSpecial.size || listTrainSpecial[#status.count-1].teachDate!=listTrainSpecial[#status.count].teachDate">
                                        </table>
                                    </td>
                                </tr>
                            </s:if>
                        </s:iterator>

我在一个td里面套了一个table，结果 FF显示很正常，可是IE6就坑爹了，差一个什么属性吗，整了我半天，就是table-layout: fixed;

搞了大半个月的前台，想说IE啊超出1px和FF超出1px，就是不一样，一个智能，一个死板，可能IE这样少了很多的内核判断代码，难道打开网页的速度很快了吗

本人电脑装了3个浏览器 一个IE一个chrome一个FF，不能不测chrome，这个浏览器使用用户越来越多了

今天碰到个问题和大家分享一下我在一个td里面套了一个div，不是td可以自动换行包括自己给自己增加高度的

可是如果 你输入显示的内容是中文，那会自动换行，如果显示的是 xxxxxxxxxxxxxxxxxxxxxxxx这样连着的英文字母，就不了

就是缺一个属性word-wrap:break-word; 意思就是到达容器的边界自动换行

原来在ie6里面 div设置了高度，border是不算在这个高度里面的，比如说给一个div设置height:32px那么实际占用高度是34

而在FF里面就实际占用高度也是32

如果一个div1里面有2个div11和div12 这2个div都浮起来了，那么div1下面有一个div2，div2设置了clear：both 然后div2里面又有div21和div22，这2个div也是浮起来的

div2后面的元素也clear：both了

那么div11和div12是在同一个层，跟div1里面没有浮起来的也是在同一个层，div21和div22和div2里面的没有浮起来的元素也在同一个层

div11和div22不在同一个层，不在同一个从层就不能用margin 和padding