CSS核心內容整理 - (上)

時間 2019-11-07

標籤 css 核心內容整理欄目 CSS 简体版

原文原文鏈接

一. HTML標記與文檔結構

文本用閉合標籤,引用內容用自閉合標籤.常見的塊級標籤:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行內標籤則有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等.
css

下面這是一個最小的完整HTML模板,一個基本頁面必然包含這些標籤.html

<!DOCTYPE html>
 <html>
   <head>  
     <meta charset="utf-8" />
       <title>An HTML Template</title>
   </head>
   <body>
     <!-- 這裏是網頁內容 -->
   </body>
 </html>

搜索引擎會給title標籤中的文字內容賦予很高的權重,這些文字也會做爲網頁標題出如今搜索結果列表中.不要讓"歡迎訪問"之類的廢話佔據你的title標籤.使用簡潔明確的文字以及讀者在搜索你的網頁內容時會使用的關鍵詞. 所謂「文檔流」的效果,也就是 HTML 元素會按照它們各自在標記中出現的前後順序,依次從頁面上方「流向」下方.瀏覽器

幾乎全部 HTML 元素的 display 屬性值要麼爲 block,要麼爲 inline。最明顯的一個例外是 table 元素,它有本身特殊的 display 屬性值.框架

塊級元素(好比標題和段落)會相互堆疊在一塊兒沿頁面向下排列,每一個元素分別佔一行。而行內元素(好比連接和圖片)則會相互並列,只有在空間不足以並列的情況下才會折到下一行顯示。佈局

塊級元素盒子會擴展到與父元素同寬,而行內元素盒子會"收縮包裹"其內容,而且儘量包緊.post

DOM是從瀏覽器的視角來觀察頁面中的元素以及每一個元素的屬性,由此得出這些元素的一個Tree.字體

二. CSS工做原理

除了咱們咱們知道的行內樣式,嵌入樣式,引用樣式以外,還有一種在樣式表中連接其餘樣式表的方法,使用@import指令,@import url(css/style.css)這一命令必須出如今樣式表其餘命令以前.搜索引擎

選擇器是CSS工做的核心:url

<section>     
    <h2>An H2 Heading</h2>
    <p>This is paragraph 1</p>
    <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
</section>

section h2 {} 或者 section p {} 這就是後代選擇器,經過空格分離,只要後者是前者的後代元素便可.若是想更確切,還有 section > p {} 子選擇器以及 h2 + p {} 兄弟選擇器(這裏選中的是p).spa

h2 ~ a {} 同級元素選擇器,只要有同一個父節點便可,這裏選中的是a.

注意 * 號除了通配選擇符還有一個頗有意思的用法,就是構成非子選擇符,section * a {} 任何是section的孫子元素,而非子元素的a標籤都會被選中.

"標籤名.類名" 這樣方式能夠更準確的選定元素,相似的用法還有 ".A類名.B類名" 這樣的方式選中的是class = "A B"的元素,屬性也有"標籤名[屬性]"或者"標籤名[屬性='屬性值']"這兩種方式選擇.

ID這個屬性也能夠用在頁內導航連接中,好比經過一個超連接,點擊跳轉到同一頁的另外一個位置.

<a href = "#info">info</a>這樣寫時href開頭是#,它表示這個連接的目標在當前頁面中,於是不會觸發瀏覽器加載頁面.

要避免CSS編寫過程當中可能級可能出現的"類氾濫".什麼意思呢?就是說不要像使用ID同樣爲每一個類都指定一個不一樣的類名,而後再爲類編寫規則.這樣作極可能會給每一個標籤都重複寫一樣的樣式,實際上繼承和上下文選擇符能讓不一樣的標籤共享樣式,從而提高CSS代碼的質量.

僞類的使用也許在CSS的初級階段很少,但一旦你深刻CSS,你會發現僞類無處不在.僞類這個叫法源自它們與類類似,但實際上並無類會附加到標記中的標籤上.僞類分兩種,UI僞類和結構化僞類,前者會在HTML元素處於某個狀態時(好比鼠標滑過)爲該元素應用CSS,後者則是元素存在某種結構化的關係時(好比一組中的第一個元素)爲元素加上CSS.

a::link{} a::hover{} a::visited{} a::active{} input::focus{} ul::first-child{} ul::last-child{} ul::nth-child(3)

繼承!!!

一提及CSS中還有繼承我想好多人是驚訝的,包括本身早些時候也認識不到原來這就是CSS中的繼承.若是咱們給body加上一些字體樣式,咱們會發現只要是body的後代元素就會繼承這些字體樣式,這些能夠繼承的樣式一般是文本或者字體的.

繼承涉及到樣式的權重,一個HTML有不少個樣式來源的時候,應該聽從哪個樣式.

CSS繼承的規則雖然很繁瑣,但基本上只要記住三條規則就夠了,它們適用全部狀況.

規則一: 包含ID的選擇符賽過包含類的選擇符,包含累的選擇符賽過包含標籤名的選擇符.

規則二: 若是幾個不一樣來源都爲同一個標籤的同一個屬性定義了樣式,行內樣式賽過嵌入樣式,嵌入樣式賽過連接樣式.在連接樣式表中,具備相同特指度的樣式,後聲明賽過先聲明.

規則二賽過規則一.也就是選擇符更明確的(特指度高),不管它寫在哪裏,都會勝出.

規則三: 設定的樣式賽過繼承的樣式,此時不須要考慮特指度.

三. 定位元素

盒模型的概念是整個CSS定位佈局的核心,這些盒子按照可見版式模型(visual formatting model)在頁面上佈局.可見的頁面版式主要由3個屬性控制:position控制頁面上元素間的位置關係,display控制元素是堆疊、並列仍是根本不顯示,float提供控制的方式.

盒模型的3大屬性就是padding、border、margin,它們的按照top、right、bottom、left的順時針順序提供縮寫.若是有一個方向沒寫,就會自動使用對邊的值.

這裏面外邊距(margin)的垂直疊加是須要注意的,由於這和咱們通常對盒模型的理解不一樣.垂直方向上的外邊距會疊加,這個規則十分重要.假設有3個P段落,而且都應用了以下的樣式:

p {      
    height:50px;
    border:1px solid #000;  
    backgroundcolor:#fff;  
    margin-top:50px;  
    margin-bottom:30px;
}

按照咱們所想那麼相鄰的兩個P,由於上面的p有一個margin-bottom:30px,下面的P有一個margin-top:50px,那麼看上去在頁面上顯示它們應該有50+30=80px的間距.但其實是50px,由於在垂直方向上,像這樣上下邊距相遇時,它們會相互重疊,直到一個元素的外邊距碰到另外一個元素的border爲止.因此其實是較寬的外邊距決定了兩個元素的垂直間距.

盒模型原理:

盒模型結論一：沒有（就是沒有設置 width 的）寬度的元素始終會擴展到填滿其父元素的寬度爲止。添加水平邊框、內邊距和外邊距，會致使內容寬度減小，減小量等於水平邊框、內邊距和外邊距的和。

盒模型結論二：爲設定了寬度的盒子添加邊框、內邊距和外邊距，會致使盒子擴展得更寬。實際上，盒子的 width 屬性設定的只是盒子內容區的寬度，而非盒子要佔據的水平寬度。

總之，你要記住一點：設定了元素的 width 屬性後，再給元素添加邊框、內邊距和外邊距，元素的行爲與默認的 auto狀態下會有大相徑庭的表現。

浮動和清除:

浮動元素脫離了常規文檔流以後,原來緊跟其後的元素就會在空間容許的狀況下提高到與浮動元素持平的位置. 在你浮動一張圖片或者其餘元素時，你是在要求瀏覽器把它往上方推,直到它碰到父元素（也就是 body元素）的內邊界。後面的段落（帶灰色邊框）再也不認爲浮動元素在文檔流中位於它的前面了，於是它會佔據父元素左上角的位置。不過，它的內容（文本）會繞開浮動的圖片。

浮動元素脫離了文檔流，其父元素也看不到它了，於是也不會包圍它。這種狀況有時候並不是咱們想要的,三種圍住浮動子元素的方法:

<section>  
    <img src="images/rubber_duck2.jpg">
    <p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the page.</footer>

img跑了出去,section和footer都跑到img右側了,這樣的效果可不行.

(1) 方法一：爲父元素添加 overflow:hidden

方法很簡單，缺點是不太直觀，即爲父元素應用 overflow:hidden，以強制它包圍浮動元素。實際上，overflow:hidden 聲明的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden以後，包含元素依然保持其設定的寬度，而超大的子內容則會被容器剪切掉。除此以外，overflow:hidden還有另外一個做用，即它能可靠地迫使父元素包含其浮動的子元素。

(2) 方法二：同時浮動父元素

浮動 section之後，無論其子元素是否浮動，它都會牢牢地包圍（也稱收縮包裹）住它的子元素。所以，須要用 width:100%再讓 section 與瀏覽器容器同寬。另外，因爲 section如今也浮動了，因此 footer會努力往上擠到它旁邊去。爲了強制 footer依然呆在 section下方，要給它應用 clear:left。被清除的元素不會被提高到浮動元素的旁邊.

(3) 方法三：添加非浮動的清除元素

爲父元素的最後添加一個非浮動的子元素，而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素，並且清除會讓這個子元素位於（清除一側）浮動元素的下方，所以包含元素必定會包含這個子元素——以及前面的浮動元素。

這個方法雖然聽着比較繞口,可是這種方式在各個CSS框架都有出現,是一種比較流行的寫法.這裏也介紹的是比較流行的寫法:

首先給section添加一個類clearfix,而後定義這個類:

.clearfix:after {  
    content:".";
    display:block;  
    height:0;  
    visibility:hidden;  
    clear:both; 
}

它只添加了一個清除的包含句點做爲非浮動元素（必須得有內容，而句點是最小的內容）。規則中的其餘聲明是爲了確保這個僞元素沒有高度，並且在頁面上不可見。使用clear:both意味着section中新增的子元素會清除左、右浮動元素（位於左、右浮動元素下方）。這裏固然能夠只用left，但both也適用於未來圖片float:right的狀況。

最後這種定義.clearfix:after來清除浮動的方式很是常見,並且能夠適應不少種狀況相比於overflow:hidden以及父元素的浮動這兩種方式要好一些.

position定位

position是CSS盒模型定位的核心,它的應用使元素能夠在常規文檔流中從新定位,static,relative,absolute,fixed.

static靜態定位: 塊級元素在頁面中自上而下堆疊,維持默認的文檔流.

relative相對定位: 光設置這個屬性還看不出來有什麼不同，由於你只設置了它的定位方式是「相對定位」。到底相對哪裏定位呢？相對的是它原來在文檔流中的位置（或者默認位置）。接下來，可使用 top、right、bottom和 left屬性來改變它的位置了。但多數狀況下，只用 top和 left就能夠實現咱們想要的效果.

使用相對定位的關鍵是什麼呢？就是要考慮到元素原來的空間。

absolute絕對定位: 絕對定位元素默認的定位上下文是 body元素。經過 top 和 left 設定的偏移值，決定元素相對於 body 元素（標記層次中的祖先容器），而不是相對於它在文檔流中的位置偏移多遠——這一點與相對定位的元素不一樣。因爲絕對定位元素的定位上下文是 body，因此在頁面滾動的時候，爲了維護與 body元素的相對位置關係，它也會相應地移動。

fixed固定定位: 從徹底移除文檔流的角度來講它與絕對定位相似,不過它的定位上下文是瀏覽器的窗口,所以不會隨頁面滾動而滾動.

定位上下文: 經過postition設置的元素能夠經過left或top等進行元素偏移,相較於偏移的這個元素就是定位上下文.絕對定位時默認的參照物,也就是定位上下文是body,可是其實任何被設置了relative或者absolute的偏移元素的祖先元素均可以是該元素的參照物.