[TOC] ### 1、HTML5 中的 b/strong，i/em 有什么区别？ 链接：http://www.zhihu.com/question/20961933/answer/16740551 链接：http://www.zhihu.com/question/19551271 Physical Style Elements -- 自然样式标签 ~~~ b, i, u, s, pre ~~~ Semantic Style Elements -- 语义样式标签 ~~~ strong, em, ins, del, code ~~~ 按钮内的 icon . 很多人都会用 `<span class="icon"></span>` . 但我可能会直接使用 `<i></i>` 然后在 CSS 中用 `.button i {}` 来定义 ( 这方法有利有弊, 纯属个人选择 ) . 但如果这里用 em 标签就不合适了. 至于如何选择使用两种, 我的观点是 " 准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签. 文章内 ( article, p 标签内 ) 使用语义样式标签, 排版 ( div 标签内 ) 内使用自然样式标签" ### 2、有时候HTML实体，比图片好用！ >参考：[告别图片—使用字符实现兼容性的圆角尖角效果beta版](http://www.zhangxinxu.com/wordpress/2009/11/%E5%91%8A%E5%88%AB%E5%9B%BE%E7%89%87%E2%80%94%E4%BD%BF%E7%94%A8%E5%AD%97%E7%AC%A6%E5%AE%9E%E7%8E%B0%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%9C%86%E8%A7%92%E5%B0%96%E8%A7%92%E6%95%88%E6%9E%9Cbeta/) [css3-font-face兼容性三角效果](http://www.zhangxinxu.com/wordpress/2011/11/css3-font-face%E5%85%BC%E5%AE%B9%E6%80%A7%E4%B8%89%E8%A7%92%E6%95%88%E6%9E%9C/) ### 3、`<img>`元素是块元素还是内连元素？ > 链接：http://www.zhihu.com/question/25402556/answer/30728140 img 属于行内元素，但在表现上更倾向于 inline-block，这种内容可替换(置换)的元素虽然属于 inline，但又能自由设置 height、width 等值。 img是inline元素，但是他同时也是replace元素，他有着特殊的表现： 1. 可以设置width/height; 2. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置 3. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是`<a>`里面包含的`<img>` 4. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素Eric 5. Meyer曾经很详细的解释过替换元素的概念，请参考他的《CSS权威指南》 ### 4、为什么 input 元素能用 width 属性？ > 链接：http://www.zhihu.com/question/20495297/answer/15288250 明确的来说input是属于inline-block元素，但inline-block 的概念最早是由置换元素演化而来的，和img一样属于可置换inline元素（Replaced element http://www.w3.org/TR/CSS21/conform.html#replaced-element），可置换元素拥有内在尺寸（intrinsic dimensions）：http://www.w3.org/TR/CSS21/conform.html#intrinsic > The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed. 另外可以参看各浏览器对input元素的默认样式表：http://www.iecss.com/ ~~~ input{background-color: #FFF ;border-style: inset; border-width: 2px; font-family: sans-serif; font-size: 10pt; **overflow: hidden;** padding: 1px; **zoom: 1;**} ~~~ 注意加粗的两个属性**overflow: hidden;**与**zoom:1;**这两个属性创建了BFC的同时也触发了IE8以下版本IE浏览器的hasLayout，即可定义width height。参考：http://www.smallni.com/haslayout-block-formatting-contexts/ PS：inline-block 在 CSS 2.1 中才正式确定，而低版本IE 的诞生远早于 CSS 2.1，但对于低版本IE同样支持某些特性。 可以参考一丝胸的好文：http://www.iyunlu.com/view/css-xhtml/64.html *** ### 5、字符串强制换行与超出区域大小后的隐藏 最近做项目遇到一个问题，就是从数据库得到的数据放入页面后，超出显示区域的大小，一开始时使用的是在后台对数据的个数进行截取，但是由于英文字母与汉字的差别，页面很不美观。后来在在网上查找发现了一些方法，但是仍需改进，经过不断尝试得到了想要的结果： `<div style=" height:15px; width:200px;white-space:nowrap;text-overflow:ellipsis; overflow:hidden">内容<div>` 上面的图片就是效果，第一行的第三个字段内容，‘据警方介绍，这辆...’是从数据库里直接读的（在数据库中字段内容很长的），无需做任何修改或处理。 `white-space:nowrap;` nowrap: 强制文本在一行,除非遇到br换行标签 `text-overflow:ellipsis;` 当文本超过容器,自动截取并加上省略号（Firefox不可用） `overflow：hidden;` 当文本超过容器,自动隐藏 ### 6、IE条件注释 ~~~ - gt : greater than，选择条件版本以上版本，不包含条件版本 - lt : less than，选择条件版本以下版本，不包含条件版本 - gte : greater than or equal，选择条件版本以上版本，包含条件版本 - lte : less than or equal，选择条件版本以下版本，包含条件版本 - ! : 选择条件版本以外所有版本，无论高低 <!--[if gt IE 8]>仅IE 8以下可见<![endif]--> <!--[if lte IE 8]>IE 8及以下可见<![endif]--> <!--[if ! IE 8]>非IE 8可见<![endif]--> <!--[if lt IE 8]>仅IE 8以下可见<![endif]--> ~~~ ### table与div互相嵌套注意 table嵌套div时，div必须放到td中，否则达不到预期的效果; 但是div嵌套table时，div中写table、tr、td任意一个都可以正常显示。 如果要对tr、td隐藏时，这个时候div就不起作用了，可以直接对tr、td进行隐藏，当然如果闲一行一行隐藏太麻烦了，那就试试tbody吧，把div替换成tbody将需要隐藏的tr、td放到tbody中，这样就可以显示和隐藏了。 ### 每个text node都最好有标签包裹。  这是好的习惯；  这是不好的习惯。