CSS基礎彙總

時間 2019-11-10

標籤 css 基礎彙總欄目 CSS 简体版

原文原文鏈接

1. css的出現是爲了是內容和表現分離。分爲三種：css

內聯：不推薦瀏覽器

嵌入：沒有利用瀏覽器緩存機制。緩存

外聯：服務器

2. css優先級：①id優先級高於class②後面的樣式覆蓋前面的③指定的高於繼承④行內樣式高於內部或外部樣式ide

總結：單一(id)的高於共用的(class)，有指定用指定，無指定繼承離他最近的。佈局

3. 塊級元素：段落<p>、標題<h1><h2>…、列表<ul><ol><li>、表格<table>、表單<form>、DIV<div>、BODY<body>spa

行內元素：表單元素<input>、超連接<a>、圖片<img>、<span>、斜體<em>3d

塊級元素的特色是：每一個塊級元素都是重新的一行開始，並且其後的元素也須要新起一行顯示。orm

能夠用css的display:inline將塊級元素改變爲內聯元素，也能夠用display:block將內聯元素改變爲塊元素。blog

4. Ie6有一個著名的3像素bug：當浮動元素和非浮動元素相鄰的時候，3pxbug就會出現。

要解決這個bug就要在#side這個div上加上_margin-right:-3px;這個前面加上下劃線，只針對ie6生效，ie7和ff還正常。

5. Css選擇器能夠進行分組（好比把標題都設成加粗紅色，二級黑色h1,h2,h3,h4,h5,h6 { color:red;font-weight:bolder;} ）

6. 僞類：目前ie6僅支持a的僞類，其餘的不支持。

超連接的僞類：a:link {color: #FF0000} /* 未訪問的連接 */
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */

（四種狀態的順序必定不能顛倒，不然有些不生效。）

7. 相對定位和絕對定位

定位標籤：position 包含屬性：relative（相對） absolute（絕對）

① position:relative; 若是對一個元素進行相對定位，首先它將出如今它所在的位置上。而後經過設置垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。（再一點，相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框）

② position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。絕對定位使元素脫離文檔流，所以不佔據空間。普通文檔流中元素的佈局就像絕對定位的元素不存在時同樣。（由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其餘元素並能夠經過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）

③ 父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置再也不相對於瀏覽器左上角，而是相對於父容器左上角

④ 相對定位和絕對定位須要配合top、right、bottom、left使用來定位具體位置，這四個屬性只有在該元素使用定位後才生效，其它狀況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即便用上又使用下，或即便用左，又使用右

8. 浮動後父容器高度自適應:

當一個容器內元素都浮動後，它的高度將不會隨着內部元素高度的增長而增長，因此形成內容元素的顯示超出了容器。以下圖：

要解決這個問題，須要使用如下樣式

overflow:auto; zoom:1;

overflow:auto;是讓高度自適應， zoom:1;是爲了兼容IE6而寫。

9. CSS Hack

因爲不一樣瀏覽器對css的解析不同，所以致使展現的效果也不同，爲了兼容不一樣的瀏覽器，就要針對不一樣的瀏覽器寫不一樣的css代碼，這個過程就叫作css hack 。上面的這個例子就是所謂的css hack.

10. IE6的雙倍邊距bug

這又是IE6一個著名的bug，也是咱們常常遇到的。如上例，當浮動後設置左側外邊距時後，最左側將顯示爲雙倍邊距，好比設置爲20，而在IE6下卻顯示40px，解決這個問題只需應用一個樣式，記住就能夠了。display:inline;

11. CSS Sprites技術