CSS核心樣式

css樣式有很多，下面是常用的核心樣式，之後有新的還會繼續更

數字型別

實際應用（在此以fireworks軟體舉例）

font:italic bolid 14px/28px "consolas","arial","simsun","microsoft yahei";

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th ul,li a h1,h2,h3,h4,h5,h6,b,strong //還可以給標籤設定整體文字樣式，讓大部分後代標籤全部去繼承 /* 設定初始化公共樣式 */

body

屬性值說明

visible

預設值，溢位部分顯示的

hidden

溢位部分隱藏

scroll

溢位部分出現滾動條，可拖動檢視；水平和垂直方向一直出現滾動條

auto

未溢位正常顯示，溢位時溢位方向出現滾動條

2.必須不設定高度

垂直方向

元素居中

.box

//原因：auto 只在水平方向有作用，水平方向的 margin 如果設定為 auto，邊距會自

動無限增大，直到撐滿整個父元素除了子元素寬度之外剩餘的區域，如果兩個水平

方向都是 auto，兩邊都要無限大，只能達到乙個平衡，兩邊距離相同，導致盒子居

中。```

.box

子元素所有的水平方向的位置所有屬性的加和等於父元素的 width 。

現象

父子元素塌陷

解決 水平方向的 margin 沒有塌陷現象

元素等級

塊級元素：大部分容器級標籤包括p標籤都是塊級元素，比如、

* 場景二：padding 區域背景圖

* 在乙個個盒子中有背景圖部分，而且有文字內容，文字會讓開背景圖區域進行載入，背景區域應該使用 padding 擠出位置。四個方向的 padding 都可能用於新增背景圖

.news li{
padding-left: 25px;
background: url(images/s2.png) no-repeat left center;

* 場景三：精靈圖技術 * 為了有效地減少伺服器接受和傳送請求的次數，提高頁面的載入速度，出現了 css精靈技術（也稱 css sprites、css 雪碧）。 * 它將乙個頁面涉及到的所有零星背景影象都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當使用者訪問該頁面時，只需向服務傳送一次請求，網頁中的背景影象即可全部展示出來。 * 通常情況下，這個由很多小的背景影象合成的大圖被稱為精靈圖。 * 技術依據 - 將網頁中需要用到的小尺寸背景圖製作成一張背景透明的 png 。 - 利用背景定位技術，將精靈圖的每個小載入到對應的標籤上 * 注意事項 - 精靈圖上放的都是小的裝飾性質的背景，插入不能往上放。 - 精靈圖的寬度取決於最寬的那個背景的標籤寬度。 - 精靈圖可以橫向擺放也可以縱向擺放，但是每個之間必須留夠足夠的空白，保證背景載入到乙個標籤內部時，不能出現多餘內容。

- 在精靈圖的最底端，盡量留一點空白，方便以後新增其他精靈圖

css3 新增背景屬性

背景縮放 background-size

background-size: cover; //背景影象完全覆蓋背景區域看，溢位隱藏

background-size: contain; //始終完整顯示在背景區域

多背景

同乙個方向，不能設定兩個偏移量屬性，如果水平方向同時設定了 left 和right 屬性，只會載入 left 屬性。垂直方向只載入 top 屬性

實際應用

絕對定位 absolute 子絕父相

實際應用中，如果以\ 為參考元素，不同解析度的瀏覽器中，絕對定位的元素位置是不同的，所以較少使用作為參考元素

如果絕對定位的參考元素是某個祖先級，參考點是盒子 border 以內的四個頂點，組合方向決定了參考點。絕對定位的元素只關心對比點和參考點之間的距離，會忽視參考元素的 padding 區域。

固定定位 fixed 始終固定

性質：固定定位的元素脫離標準流，讓出標準流位置，可以設定寬高，根據偏移量屬性可以任意設定在瀏覽器視窗的位置。固定定位的元素會始終顯示在瀏覽器視窗上。

定位應用

居中

position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;  (width的一半)

擴充套件應用

壓蓋順序

應用：輪播圖靜態結構布局

CSS核心樣式

同級css使用乙個樣式 CSS 核心樣式

css背景樣式css背景樣式

CSS樣式文字樣式

CSS核心樣式

同級css使用乙個樣式 CSS 核心樣式

css背景樣式css背景樣式

CSS樣式 文字樣式

相關推薦

CSS樣式文字樣式