CSS基本知識

選擇符表示要定義樣式的物件，可以是元素本身，也可是一類元素或制定名稱的元素

在css選擇符中，大致可有10種：類選擇符、id選擇符、class選擇符、萬用字元、群組選擇符、包含選擇符、偽類選擇符、偽物件選擇符……

關於選擇符的權重問題，css中用四位數來表示權重，權重的表示式如0000

在這裡特別要注意的就是關於a標籤的偽類選擇-在使用a標籤的偽類時，不可以打亂順序

一、關於文字的css宣告

屬性值為數值型，單位有幾種常見的pt、rem、em、px（9p t= 12px \ 1em = 16px ）

也可以使用絕對大小關鍵字

xx-small ： 9px

x-small ：11px

small：13px

medium：16px

large：19px

x-large：23px

xx-large：27px

二、關於列表的css宣告

定義列表符號的樣式：list-style-type：disc（實心圓）/ circle（空心圓）/ square（實心方塊）/ none

定義列表符號的位置：list-style-position：outside（外邊）/ inside（裡邊）

三、關於背景的css宣告（邊框）

背景顏色 ： background-color：顏色值

背景圖的固定：background-attachment：scroll 滾動 / fixed（固定）

背景圖的位置：background-position：left / center / right / 數值   top/center/bottom/數值

邊框：border：線型（solid實線/dashed虛線/dotted點線/double雙線） 粗細（value） 顏色

右邊框：border-right / 左邊框：border-left / 上邊框：border-top / 下邊框：border-bottom

overflow（overflow-x / overflow-y）：visible 預設值 / hidden（隱藏，內容會被修剪其他內容不可見）/ scroll / auto / inherit

scroll - 裡面沒有內容時，也會顯示內容

auto - 有內容溢位才會出項滾動條

inherit - 規定應該從父元素中繼承 overflow屬性（一般不使用）

文字溢位

text-overflow：clip / ellipsis

clip：不顯示省略號（…）而是簡單的裁切

ellipsis：當物件內文字溢位時，顯示省略標記

white-space：normal / pre / nowrap / pre-wrap / pre-line / inherit

normal ：預設值

pre：空白會被瀏覽器保留，其行為方式類似html中的pre標籤

nowrap：文字不會換行，文字會在同一行上繼續，知道遇到

標籤為止

pre-wrap：保留空白符序列，但是正常的進行換行

pre-line：合併空白符序列，但是保留換行符

inherit：ie瀏覽器不支援此屬性，從父元素繼承whit-space

要讓文字顯示省略號：

容器寬度：width:value;

強制文字在一行顯示，white-space:nowrap;

溢位內容被隱藏overflow：hidden;

溢位文字顯示省略號：text-overflow:ellispsis

多行顯示省略：

width:value;

over-flow:hidden;

text-overflow:ellipsis;

word-break:break-all;

display:-webkit-box !important;

-webkit-box-orient:vertical;

-webkit-line-clamp:value(設定多少行顯示)

float：none / left / right

外邊距，邊框，內邊距，內容區組成

外邊距：margin / margin-left / margin-right /margin-bottom / margin-top

margin屬性在上下情況下，取最大乙個值，誰大取誰（左右無異）

margin第一級會把margin-top傳給上一級，這個是要注意的。

內邊距：padding / padding-left /padding-right

盒子模型可通過display屬性來改變預設的像是型別

display:18個屬性值  該屬性設定或檢索物件元素應該生成的盒模型的型別；

常用的：block（塊元素） / inline（內聯元素） / inline-block（行內塊元素） / none / list-item / table-header-group / table-footer-group ....

position:static / absolute /  relative / fixed

static：預設值無特定定位；

absolute：絕對定位，將物件從文件中拖離出來，受用left / right / top / bottom等屬性，相對其最接近的乙個並沒有定位設定的元素進行絕對定位，如不存在這樣的父物件，則依據body物件，而其層疊通過z-index屬性定義；

relative：相對定位，物件不可疊，在文件流偏移位置（佔文件流）

fixed：物件定位遵從定位方式（absolute）但要遵守一些規範，參照整個螢幕，低版本的瀏覽器不支援

css bug：css樣式在各瀏覽器中解析不一致的情況，不能正確顯示問題稱為css bug

css hack：css中，hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法，因為它們都屬於個人對css**的非官方的修改或者非官方的補丁，有些人更喜歡使用path（補丁）來描述這行為

filter：表示過濾的意思，它是一種對特定瀏覽器或組顯示或隱藏規則或宣告的方法，用來過濾不同瀏覽器的hack型別，使用hack帶來***，降低css**的可讀性。增加**的負擔

設定css和hack和filter有兩種方法：一是利用瀏覽器自身的bug，來隱藏或顯示樣式或宣告，利用瀏覽器對css支援的不完善，如對某些規則或語法還沒有形成支援來隱藏或顯示樣式

在這裡，我總結了一些常見的ie6的css解析bug以及hack

間隙（把img元素轉為塊狀元素）

雙倍浮向（雙倍邊距）這是最常見的乙個bug，當ie6-瀏覽器在解析浮動元素時，會錯誤地吧浮向邊界加倍顯示 （解決方法：給浮動元素新增display：inline；就是把元素設為內聯元素）

在ie6-以下版本中，部分塊元素擁有預設高度（低於18px）-解決方法，給元素新增宣告 font-size：0；overflow：hidden；height：0；

表單元素行高不一致；給表單元素設定為float

在img放入a裡面，可給img去除邊框，img在a裡，在ie瀏覽器時會有乙個邊框，就要去除border：0；

按鈕元素預設大小以及樣式不一致 - 解決方式：hack1：統一大小以及樣式；hack2：input外套乙個標籤，在這個標籤裡寫按鈕的樣式，吧input的邊框去除；hack3：如果這個按鈕是乙個，直接把作為按鈕的背景圖即可

百分比：在ie6以下版本中解析百分比，會按四捨方式計算從而導致50%加50%大於100%的情況

高度塌陷，設定float浮動之後，會造成乙個高度塌陷問題，float的bug還是比較多的，解決方式，在浮動元素最後，新增乙個空的div標籤，然後給這個空標籤新增clear：bot和；清除浮動即可，但是這個方式還是比較麻煩，所以，清楚浮動，就在浮動元素的父元素中新增乙個偽類after

div:after

滑鼠指標bug cursor屬性的hard屬性值只有ie瀏覽器識別，其他瀏覽器不是別，cursor中pointer屬性值ie6+以及其他核心瀏覽器都可以識別，統一某元素滑鼠指標形式為手型新增cursor：pointer；

透明屬性，ie瀏覽器寫法：filter：alpha（opcity=value1-100）

上面是一些簡單的css總結，稍後會總結一下css3的新屬性

CSS 基本知識

html示例 塊級元素 display block 每個塊級元素佔一行，多個塊級元素上下堆疊顯示，它的寬度預設為父元素的寬度,高度由它的內容高度決定 內容撐開 塊級元素有 6級標籤 段落 有序列表 列表項 等等行內元素 display inline 多個行內元素在一行內顯示，當同一行寬度不夠時，才到...

CSS基本知識

css又名層疊樣式表 英文全稱 cascading style sheets 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化 css 能夠對網頁中元素...

CSS樣式基本知識

外部式 css樣式表就是把css 直接寫在現有的html標籤中，如下面 style color red 這裡文字是紅色。p 注意要寫在元素的開始標籤裡，下面這種寫法是錯誤的 這裡文字是紅色。p style color red 並且css樣式 要寫在style 雙引號中，如果有多條css樣式 設定可以...