文档章节

css常用属性知识点

IT-sticker
 IT-sticker
发布于 2016/04/25 15:35
字数 1263
阅读 4
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

一个是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; 意思就是到达容器的边界自动换行

本文转载自:http://blog.csdn.net/zhejingyuan/article/details/8831328

IT-sticker
粉丝 0
博文 85
码字总数 1862
作品 0
珠海
程序员
私信 提问
6张思维导图,帮你搞定html、css(css画QQ企鹅)

先给大家看一张喜欢的图片,缓解下心情,最近敲敲代码累的时候都会看看这几个小活宝,每次都忍不住伸手去摸一下屏幕,可爱到爆,不由自主的就笑了出来。这个是电影《鼠来宝》系列的海报图。不...

范小饭_
2016/12/30
0
0
34岁!100天!学会Java编程(Day20-Day28)—Web前端编程

什么是Web前端? 引子:Web编程深似海 原计划用8天时间进行Web前端的学习,结果拖延了,原因自然是对这部分内容学习的难度估计不足。我的方法还是试图一开始了解web编程的全貌,结果发现整个...

魏小筠
2017/11/25
0
0
CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。

本文转载于:猿2048网站CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。 1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表 或者 内部样式表 —— ...

前端老手
08/30
13
0
一个初级的前端工程师需要知道些什么?

一个初级的前端工程师需要知道些什么? 按照我的想法,我把前端工程师分为了入门、初级、中级、高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么...

MyDear宸
2017/05/11
0
0
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
2018/10/28
39
0

没有更多内容

加载失败,请刷新页面

加载更多

在每个GROUP BY组中选择第一行?

顾名思义,我想选择以GROUP BY分组的每组行的第一行。 具体来说,如果我有一个如下的purchases表: SELECT * FROM purchases; 我的输出: id | customer | total---+----------+------ 1...

技术盛宴
32分钟前
5
0
python 安装与使用总结

https://www.jetbrains.com/pycharm/download/#section=mac

T型人才追梦者
36分钟前
5
0
每个开发人员都应该知道的11个Linux命令

本文主要挑选出读者有必要首先学习的 11 个 Linux 命令,如果不熟悉的读者可以在虚拟机或云服务器上实操下,对于开发人员来说,能熟练掌握 Linux 做一些基本的操作是必要的! 事不宜迟,这里...

武培轩
44分钟前
7
0
window.onload与$(document).ready()

JavaScript的window.onload和jQuery的$(document).ready()方法有什么区别? #1楼 关于在Internet Explorer中使用$(document).ready()的警告。 如果在整个文档加载之前 HTTP请求被中断(例如,...

javail
48分钟前
8
0
对比yml配置文件与properties的区别

我们在日常编码中少不了配置文件,说到配置文件就不得不说起yml和properties这两种后缀的配置文件 接下来我带大家简述一下他们具体有什么区别 - yml格式的文件 server: port: 9090 spring: a...

理性思考
51分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部