相容
一、廠商字首
瀏覽器 廠商字首 瀏覽器核心
火狐 -moz- gecko
ie -ms- trident(ie核心)
谷歌，蘋果 -webkit- webkit（谷歌已經棄用）
歐朋 -o- presto（歐朋已經棄用）
blink核心 現在谷歌和歐朋
二、瀏覽器核心以及其字首
1.gecko核心 字首為-moz- 火狐瀏覽器
2.webkit核心 字首為-webkit- 也叫谷歌核心，chrome瀏覽器最先開發使用safari瀏覽器也使用該核心。國內很多瀏覽器也使用了webkit核心，如360極速、世界之窗、獵豹等。
3.trident核心 字首為-ms- 也稱ie核心
4.presto核心 字首-o- 目前只有opera採用 opera現已改用google chrome的blink
5.blink核心 blink是乙個由google和opera software開發的瀏覽器排版引擎
三、解決ie低版本相容性（css hack）
1、條件注釋
- _ * # \0 \9 \9\0針對於在不同瀏覽器上的bug的解決方案。一般都是利用各瀏覽器的支援css的能力和bug來進行的。盡量找到通用方法而減少對css hack的使用。
常用的幾個hack，主要僅針對ie瀏覽器，ie6以下不再考慮。
4、條件hack
例項1
通過上面三個例子我們可以發現：
條件注釋它的格式為
大於 gt
大於或等於 gte
小於 lt
小於或等於 lte
非指定版本 ！
這些條件幫我們更精確的篩選瀏覽器版本
5、屬性級hack
同一段文字在ie6,7,8顯示為不同顏色
.test
this is paragraph!!
一、**查詢
1、media query
使用media query的基本語法
@media media-type and|not|only (media feature)@media screen and (max-width:960px) 的意思為：當前裝置為screen（電腦、平板、手機）時，並且最大寬度為960時，顯示的樣式。
例子1）pc端
@media screen and (min-width: 992p}@media screen and (min-width: 769px) and (max-width: 991px) }@media screen and (max-width: 768px) }只需要在html的標籤中插入乙個標籤，meta標籤中可以設定具體的寬度或縮放比。
下面為示例
1）
name=」viewport」 說明此meta標籤定義視口的屬性
initial-scale=2.0 意思是將頁面放大兩倍
width=device-width 告訴瀏覽器頁面的寬度等於裝置寬度
//user-scalable=no是禁止縮放multi-column
多列有這麼幾個常用屬性
column-count 分幾列
column-gap 列間距
column-rule 列分割線的樣式
html和css學習筆記（二）
cellspacing 單元格邊框和單元格邊框之間的距離 cellpadding 單元格內容與單元格邊框之間的距離 三參為0 border cellspacing cellpadding 一般都為0，預設cellspacing cellpadding有值 catption，必須緊隨table標籤之後...
html 中 css 的響應式布局
此檔案會隨著時間不斷更新 jsp 中col sm 3 col md 6 col lg 4 col xl 2那個在前面以那個大小為主，這就就以 col sm 3 在bootstrap 中的所定義的大小 576px 為主，只要是比這個定義的數字小就發生重疊。class container class b...
學習HTML5和CSS（八）之定位
2.靜態定位 static 3.相對定位 relative 4.絕對定位 absolute 5.固定定位fixed 6.疊放次序 z index 7.四種定位總結 元素的定位屬性主要包括定位模式和邊偏移兩部分。邊偏移邊偏移屬性 描述top 頂端偏移量，定義元素相對於其父元素上邊線的距離 bottom...