CSS网页布局开发中,会有很多小技巧,这里再扩展一下您所想要得到的知识,相信您会有很多收获!

  一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

  二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大。

  三、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

  临时解决方法:选择符{属性名:B !important;属性名:A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。

  四、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

  五、li标签前面的图标推荐使用background-image,而不是list-style-image.

  六、IE分不清继承关系和父子关系的差别,全部都是继承关系。

  七、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您,不要太疯狂了。

  八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了,也可以保持文字的可读性。

  九、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  十、与内容无关的图片请使用background.时刻记住表现与内容分离。

  十一、定义颜色可以缩写#8899FF=#89F

  十二、table在某些方面还是有用武之地的,在遇到内容为数据表格时,不要对它产生憎恨的心理。

  十三、

  十四、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) 

  table{ border-collapse:collapse; } td{ border:#000 solid 1px; }

  十五、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。

  十六、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

  十七、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效DIV STYLE=“width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> 就是比如有一行文字,很长,表格内一行显示不下。

  十八、在IE中可能由于注释带来的文字重复问题时可以把注释改为:<!–[if !IE]>Put your commentary in here…<![endif]–>

  十九、如何用CSS调用外部字体语法:@font-face{font-family:name;src:url(url);sRules}取值:name:字体名称。任何可能的 font-family 属性的值url(url):使用绝对或相对 url 地址指定OpenType字体文件sRules:样式表定义

  二十、如何让一个表单中的文本框中的文字垂直居中?

  如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

  二十一、定义A标签要注意的小问题:当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。只定义了一个a:link时,一定要记得把其它三种状态定义出来!

  二十二、并不是所有样式都要简写:当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px.我们并不一定要写成p.style1{padding:5px 6px 3px 4px}.可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。

  二十三、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。

  二十四、固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

转载于:https://www.cnblogs.com/jizonghai/archive/2012/12/07/2806629.html

[存档]Div+Css布局中经常使用的小技巧合集相关推荐

  1. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  2. div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧

    div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...

  3. div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

    本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...

  4. html布局文字设置,div css布局中css中文字体设置

    在HTML网页结构中,会用到中文字,而中文字有得多中笔墨体,有的开发者在自身电脑中下载并安装不少摩登字体.而这些中文字体CSS设置装备摆设提倡? 1.不克不及随意CSS设置装备摆设本人安装中笔墨体 假 ...

  5. MATLAB | MATLAB中绘图的奇淫技巧合集

    一些离大谱的绘图小技巧,部分内容来自https://undocumentedmatlab.com/ 更改3D坐标区轴位置 对于hAxes=gca hAxes.XRuler.FirstCrossover ...

  6. 结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现

    在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...

  7. DIV CSS布局-固定页面开度布局

    DIV CSS布局中主要CSS属性介绍: Float: Float属性是DIV CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  8. div+css布局与table布局比较

    div+css布局与table布局比较 一.背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本 以及静态图片等组成的,类似于报纸的形式,分区分块显示,ta ...

  9. Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法

    这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...

最新文章

  1. git命令合并分支代码
  2. 在这个什么都看脸的时代,如何用 GUI 提高 python 程序的颜值?
  3. 【邮箱使用】Yahoo邮箱POP3、SMTP开通以及设置方法
  4. centos7 tomcat 设置开机启动
  5. 快速入门cocos2d-x jsbinding
  6. springmvc+spring+hibernate集成cxf
  7. python列表元素去重_python 如何进行以下list 元素去重
  8. 基于IO流读取的 完成 用户登录,注册,修改,查看所有用户,删除功能
  9. jquery触发点击事件
  10. 【SQL】血缘解析 SQL parser 工具介绍
  11. iOS开发日记49-详解定位CLLocation
  12. ESP32-IDF开发实例-ADC电压采集
  13. 撞线百亿后,良品铺子峥嵘毕现?
  14. H264解码器源码(Android 1.6 版)
  15. 还在搞三层架构?了解下 DDD 分层架构的三种模式吧
  16. 最细致全面架设外网传奇教程
  17. GEE用户贡献的数据列表
  18. 怎样用excel按进行分类求和,最后再根据一列对其他列进行排序
  19. 《图书管理系统——“借书还书”模块》
  20. ios8在通用设置中文键盘无效的解决方法(中文键盘设置)

热门文章

  1. 2.1 CPU 上下文切换(上)
  2. java中pack函数_java - Java函数pack(),JFrame大小 - 堆栈内存溢出
  3. python中webdriver_浅谈python中selenium库调动webdriver驱动浏览器的实现原理
  4. python 全部缩进一行_Python(48)语言参考2:词法分析
  5. 阿里云容器网络文件系统 CNFS 1.0 发布,体验云原生时代的容器共享存储
  6. ARMS企业级场景被集成场景介绍
  7. 让评审人爱上你的8个要点
  8. 算法专家解读 | 开放搜索教育搜题能力和实践
  9. AI和物联网在零售环境中的长期应用
  10. 事务隔离级别,看这一篇就够了