css一些介紹

2022-03-24 00:22:20 字數 3240 閱讀 3879

網上找資料的話還是要綜合來找,找好資料可以節約很大很大程度的麻煩**或參考:

第一部分 css血統論

1、 什麼是html血統。html血統是指的html標記(標籤)預設的語義和外觀樣式。充分理解這一點,是我們設計**,優化**(seo)的基礎。理解html血統,一定要把握以下三個方面。

2、 標記(標籤)的基本語義和對seo的影響。

比如標記在網頁裡指的是大標題,好比一篇文章的總綱要或一本書的書名。搜尋引擎在分析網頁中的標記時,給它的權重是最高的。從到,都表示標題,權重都會比較高。其次是li或dl這些標記,它們都表示目錄

html

3、 標記(標籤)的預設樣式。

html

4、 由於各個瀏覽器對html標記的預設樣式給的定義不同,而引起的瀏覽器相容性問題。這是乙個非常重要的問題,把握不好這點,就不好解決最基本的瀏覽器相容性問題。

比如ul和li標記

5、 標記和css的關係

html

6、 和div是什麼關係

css第二部分標準流。什麼是標準流。

1、 什麼叫脫離標準流的元素

html標籤的顯示方式一般會被分成兩類,一種是以塊狀顯示(display:block),另一種是元素在同一行顯示(display:inline),所有的html元素都屬於block和inline之一。

1、什麼叫塊級元素(block)。

塊級元素的特點是:

1、總是在新行上開始;

2、高度,行高、寬度以及頂和底邊距都可控制;

3、寬度預設是它的容器的100%,除非設定乙個寬度

, , , , 和 是塊元素的例子。(這個標籤本身是塊級元素,但是,工作在他裡面的那些文字框,單選、複選按鈕,下拉列表,卻多數是行內元素)

2、 什麼叫行內元素(inline)。

相反地,行內元素的特點是:

1,和其他元素都在一行上;

2,無法為乙個行內元素設定高度和寬度

3,寬度就是它的文字或的寬度,不可改變。

, , , ,

,和(還有表單元素,表單元素不是指的這個標籤本身,而是指的文字框,單選、複選按鈕,下拉列表這些元素)是inline元素。

如果想給行內元素設定高和寬,就需要把行內元素轉化為塊級元素,用做的超連結一般都這麼來做

注意:盡量不要給行內元素設背景,因為不同的瀏覽器對行內元素的背景的解釋是不同的。

注意:無論那是塊元素還是行內元素,一但成為浮動元素,就一樣了。

第三部分盒子原理

1、 如果不給乙個塊級元素設定寬度,則這個盒子的預設寬度(這個寬是指margin+border+padding+width)是它父盒子寬度(這個寬度就是指width)的百分百。這是個非常有用的特點,很多的變寬布局就是用這個特點實現的。很多大公司的面試題也會出在這裡。

2、 乙個塊級元如果不設定高度,則它的高是auto(height:auto),這個意思是自動適應其內部子元素的高度,比如子元素是50px,則它也是50px。如果設定了盒子的高度,一定要注意它的子元素如果溢位會對它的弟弟元素產生影響這一嚴重後果。因為它的弟弟元素的起始位置以它(哥哥)的高度為依據。(在ie6裡不會這樣,其它瀏覽器則會出現這一嚴重後果,這個問題,老師在講瀏覽器相容性問題(擴充套件框問題)的時候會說的很清楚,)

3、 的多數標籤元素是有預設值的,比如我們在做網頁布局的時候,往往先把body的margin設為0;在用除div標籤之外的標籤做布局的時候,一定要注意到這一點。 

html

4、 為了不使布局產生混亂,很重要的一點就是要考慮內容會溢位這樣情況。也就是說overflow是個非常重要的屬性,不會用overflow這個屬性的人,css肯定水平不高。

5、 這一屬性經常會不起作用,但是乙個盒子浮動之後,margin一般都會起作用。margin-left這一屬性在ie6中(浮動的時候)會加倍,解決這個問題只需再加乙個css屬性:display:inline既可解決。margin-top不起作用的問題

margin

6、 補充

一,在標準流下,margin-top都會不起作用。一但浮動之後,就會起作用了。

二,在其父元素中加乙個overflow:hidden,也會解決這個問題。

三,在父元素中加overflow,也可以解決父元素的高度不能適應浮動的子元素的高度的問題。

第四部分浮動(float

1、 什麼是浮動,為什麼要浮動,浮動的元素有那些特點。

2、 清除浮動(clear)是指的讓元素本身不受浮動的元素影響,而並非是不讓元素自身浮動。

3、 浮動的元素是脫離標準流的。脫離標準流的元素,就沒有塊級元素和行內元素的區別了。

1, 乙個html標記加了float:left或float:right之後,它會變成浮動元素,不再有塊級元素和行內元素的分別(block和inline),它的特點是它的父元素和他的弟弟元素會視它為不存在。

2,行內元素設定了float之後,會和塊級元素設定float一樣,它們的寬和高會自動適應內容的寬度和高度。也可以理解為元素設定了float:left或 float:righ之後,行內元素也會變成浮動的塊級元素。

3,在ie6中,給元素設定float:left或float:right後,它的margin-left或margin-right會加倍,加乙個display:inline就可以解決問題。

4,用到了float屬性,一定要考慮使用clear這個屬性。很多布局混亂的情況、或瀏覽相容性問題,就是因為沒有用好clear這個屬性。不會使用clear屬性的人,css肯定是菜鳥。

第四部分定位(position

關鍵要理解定位的依據是什麼,或者說定位的參照物是什麼

第五部分z-index詳解(又稱堆疊關係或層級關係)

1、 重點要理解什麼叫z軸方向的先後順序,理解了這一點就知道什麼叫層級關係了,也叫知道什麼是z-index了。

2、 要真正理解在什麼情況下會產生乙個新的層級關係。

第六部分瀏覽器相容性問題

1、 由於不同的的瀏覽器對html標記的預設值的解釋不同引起的

2、 其它常見相容性問題

說明:在ie9正式發布的時候,我們的課程將去掉ie6的相容性這一部分內容

CSS中Zoom屬性的一些介紹

這裡我們介紹一下 css中的zoom屬性,這個屬性一般不為人知,甚至有些css手冊中都查詢不到。其實zoom屬性是ie瀏覽器的專有屬性,firefox 等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的h aslayout屬性,清除 浮動 清除margin...

CSS中Zoom屬性的一些介紹

這裡我們介紹一下css中的zoom屬性,這個屬性一般不為人知,甚至有些css手冊中都查詢不到。其實zoom屬性是ie瀏覽器的專有屬性,firefox等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動 清除margin的重疊等...

css一些筆記

文章大部分借鑑 明凱部落格 中 在此宣告 css全稱 層疊樣式表 或 級聯樣式表 簡稱css樣式表。是對文字樣式的編輯語言。引入方法彙總如下 1 內聯樣式表 a.把樣式表規則放在 head 和 head 的中間,從而使樣式表對整個當前 html 頁面產生作用。b.直接插入方式,寫在hmtl 頁面中某...