【04】 CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。 1.2. 全局字体设置： windows 7系统：微软雅黑 Arial； windows XP及以下：新宋体，宋体，Arial MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。 font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif...
font包含font-style font-variant font-weight font-size/line-height font-family; 在书写font属性时font-style font-variant font-weight 在前，且顺序可以随意排列；font-size/line-height font-family在后，且顺序是固定的；而且font属性的声明中必须要包含font-size font-family这两个属性，否则，整个声明都是无效的。 在使用font声明时，会重置font-style font-variant font-weight font-size/line-height font-family为默...
盒模型，包括content(width+height)、padding、border、margin四部分，具体视图如下： 平时使用chrome的开发者模式进行调试的时候，每个盒模型都会像上图一样被列出来，方便我们找出bug所在。（另外，还可以直接在开发者模式里增减修改代码，实时观测页面变动，方便快捷) content：即上图padding下虚线里的部分，在盒模型里输入的内容会在里面显示。 padding：内边距，会增大盒子面积，赋值从上开始顺时...
这次给大家带来前端实战项目中20条CSS代码使用注意事项，下面就是实战案例，一起来看一下。01、谨慎使用外边距属性与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。 <p class="square red"></p><p class="square blue"></p>.square {width: 80px;height: 80px;}.red {background-color: #F44336;margin-bot...
CSS的编写是需要积累的，而一个好的css编写习惯对我们将来的成长是非常有利的，我会把我平时看到的或者遇到的会不定时的更新到这里，不时翻一下，但求有所进步。如果各位看官也有看法和建议，评论下，我也会更新进来，谢谢！1、css选择符是从右到左进行比配的，例如 #nav li，查找时先会去找到所有的li，然后再去筛选父元素，确定匹配的父元素......所以性能其实很差 所以尽量减少深度2、减少inline CSS的数量3、使用现代合法的c...
web页面前台编码时经常用到display:none样式，平常使用时发现有几点特征需要注意1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响...
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格...
很多认真的读者提出了不少的问题和建议，以下是本人看完书后的补充的一些观点： 总的来说，翻译能得85分，不像某些人说得那么差，误导读者。 1. filter在本书中有两个用途，52页中间AlphaImageLoader过滤器应该翻译为滤镜，其他的地方翻译成过滤器是比较合适的。 2. 71页原书应该有错误，a:hover伪类问题不止是IE 5.x有问题，IE6标准模式下也是有问题的。 3. 144页（原书164页）应该是原书的错误，MSBMH代码段有问题： * html #con...
提出问题： 我设置nowrap和不设置nowrap效果都一样。就是表格随着文字自动伸展，为什么？ →回答问题： TD元素noWrap属性的行为与TD元素的width属性有关。 ◆如果未设置TD宽度，则noWrap属性是起作用的。 ◆如果设置了TD宽度，则noWrap属性是不起作用的。 示例文件，点击运行按钮，查看效果： www.gxlcms.com 脚本之家wrap属性研究 测试字符串： 我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、...
本文主要来讲述一下 iframe 的用法与注意事项: 好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态. 注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值: document.getElementById(“ifr”); window.frames[“ifr”]; 要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).第一种方法只是取出了一个OBJECT而已. 如果只想改变ifram...
1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 * 不赞成 - color:#f3a; * 建议用 - color:#FF33AA; 2、display与visibility的差异 他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象...
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。网站最基本的东西是什么？ ——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！ 内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。 所以...
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。 3、如果是通过...