css常用属性知识点
2016-04-25 00:00
615 查看
一个是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">
&n
3ff0
bsp; <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; 意思就是到达容器的边界自动换行
一个是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">
&n
3ff0
bsp; <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; 意思就是到达容器的边界自动换行