[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都最好有標簽包裹。  這是好的習慣；  這是不好的習慣。