国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS那些事

LinkedME2016 / 2423人閱讀

摘要：今天跟大家分享一下中一些比較重要和比較容易被忽略的東西，開始吧。當為時，塊級元素的寬度會填滿整個包含塊。也就是說上下外邊距的值也是以父元素的寬度為標準的。

今天跟大家分享一下CSS中一些比較重要和比較容易被忽略的東西，開始吧。

樣式優先級

當你在不同地方不同的選擇器中對同一個元素屬性添加了不同的樣式的時候，該如何判斷最后哪個樣式會作用到元素上呢？判斷的依據就是樣式的優先級。樣式優先級的判斷分為三個步驟：

首先，根據樣式的來源和重要性進行分組，一共可以分成五組(優先級從高到低)

用戶自定義樣式中帶!important的樣式

作者樣式中帶!important的樣式

作者樣式

用戶自定義樣式

瀏覽器樣式

然后，如果在第一步中無法分出勝負，那么就根據選擇器的權重進行判斷。
每種CSS選擇器都有各自的權重，權重從大到小排列分別是：

ID選擇器

類選擇器，偽類選擇器，屬性選擇器

標簽選擇器，偽元素選擇器

在計算樣式優先級的時候除了考慮選擇器的權重以外，當然還需要考慮內聯樣式和外聯樣式，很明顯內聯樣式的優先級比外聯的高，那么它的權重也大。綜合這兩種情況我們就有下面這樣的計算方式：

行內樣式 1,0,0,0
ID選擇器 0,n,0,0
類選擇器，偽類選擇器，屬性選擇器 0,0,n,0
標簽選擇器，偽元素選擇器 0,0,0,n

在上面n代表對應選擇器的個數。根據這個方法，每組選擇器都會有一個這樣的四位數來表示權重，哪個選擇器的數字權重越大它們的樣式優先級就越高。比如下面幾組選擇器的權重

div .one{} 0,0,1,1
div #one{} 0,1,0,1
div a[href="one"] #one{}0,1,1,2

在這一步計算樣式優先級的時候有兩個特殊情況，一個是通配符選擇器它的權重是0,0,0,0，另一個是繼承的樣式沒有優先級，也就是說它連0都沒有。這兩個特殊情況就會造成一種現象：

#out *{
    color:green;
}
#out #in{
    color:black;
}


    

        
TEST

上面代碼的結果是字體顏色為綠色而不是很多人想的黑色。在這段代碼中，TEST有兩個color樣式，一個是#out *中的，一個是從#in中繼承的，最后前者取得了勝利，就是因為繼承的樣式沒有優先級，它連通配符都不如。所以說在重置樣式的時候使用通配符不是一個好的習慣，因為它可能會帶來一些奇怪的現象。

最后，如果第二步之后還是沒辦法區分出優先級的話，那么就很簡單了，后出現的優先級更高。

在平時的開發中，我們應該善用樣式的優先級規則，不能一味的通過增加選擇器權重來覆蓋樣式，這樣長久之后會使得代碼變得無法維護。

參考

http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

http://css-tricks.com/specifics-on-css-specificity/

http://snook.ca/archives/html_and_css/understanding_c

塊級元素

塊級元素通常獨占一行并且在正常流中垂直擺放，可以設置高度和寬度。塊級元素在格式化的時候可以分為水平格式化和垂直格式化。
在水平方向上，元素的所有橫向寬度之和要等于包含塊的寬度，也就是要滿足下面的等式：
margin-left+border-left-width+padding-left+width+padding-right+border-right-right+margin-right=包含塊的width。
當width為auto時，塊級元素的寬度會填滿整個包含塊。當margin-left和margin-right出現auto時，會根據上面公式計算使得margin-left=margin-right，這也就是設置margin為auto時可以實現居中效果的原因。
在垂直方向上，情況就比水平方向上要復雜，因為可能會出現外邊距疊加的現象。
當height為auto時，跟水平方向不同，height會根據內容的高度來計算。而margin-top和margin-bottom為auto時，會被設置為0。

下面來說說垂直方向上外邊距疊加的情況。首先，什么是外邊距疊加？

外邊距疊加是指在正常流中毗鄰的兩個以上塊級元素在垂直方向上的外邊距發生疊加的現象。

根據上面的定義我們可以發生外邊距疊加需要下面幾個條件：
1. 元素必須在正常流中，也就是說position不為absolute或fixed，并且沒有浮動的元素
2. 元素必須是塊級元素，很明顯在行內元素上設置上下外邊距是沒有效果的
3. 發生外邊距疊加的元素必須是毗鄰的，也就是說兩個元素是相鄰的兩個兄弟元素或者是父子關系的元素，而父子關系中必須是父元素和它的第一個子元素或者最后一個子元素。總結起來就是下面四種情況：

父元素的margin-top和它第一個子元素的margin-top

父元素的margin-bottom和它最后一個子元素的margin-bottom

元素的margin-bottom和它相鄰的兄弟節點的margin-top

元素自身的margin-top和margin-bottom

下面來看前三種情況：DEMO
很明顯，父元素#out的上外邊距和第一個子元素#first的上外邊距發生了重疊；然后#first的下外邊距和它的兄弟#last的上外邊距發生了疊加；最后，父元素#out的下外邊距和最后一個子元素#last的下外邊距發生了疊加。
對于外邊距疊加，我覺得下面參考中smallni的總結很好，我就借用他的總結一下：

父元素和它的第一個子元素

父元素沒有創建BFC

父子元素之間沒有非空內容

父元素沒有padding-top和border-top

父元素和它的最后一個子元素

父元素沒有創建BFC

父子元素之間沒有非空內容

父元素沒有padding-bottom和border-bottom

父元素的height為auto，min-height為0

兄弟元素之間

兄弟元素都不是float元素

兄弟元素都不是absolute元素

兄弟元素都不是inline-block元素

根據上面的總結，我們也可以得出防止外邊距疊加的方法：對于父子元素之間的情況，大多數情況下都是采用讓父元素創建BFC的方式，對于BFC的概念大家可以google一下，這個也是CSS中一個很重要的概念，當然還有一個辦法就是添加padding或border；而對于兄弟元素之間的情況，破壞那三條中間任意一條就可以了。
講了外邊距疊加，那在發生外邊距疊加的時候，元素之間的外邊距該怎么計算了，這也需要分幾種情況討論。
+ 如果發生疊加的外邊距都是正值，那么就取兩者中間最大的那個作為最后的邊距
+ 如果發生疊加的外邊距都是負值，那么就取兩者絕對值較大的那個然后進行負向位移
+ 如果發生疊加的外邊距有正有負，那么就把負值中間絕對值最大的那個和正值中最大的相加，最后得出的就是最后的邊距
最后在進行計算的時候，所有相鄰的外邊距應該一起參與計算，不能分別進行計算然后再加起來。比如下面的情況：


    

           
A

    





    

           
B

正確的計算A和B之間邊距的方法應該是，取出所有負值然后找絕對值最大的也就是-120，然后在找出正值中最大的200，最后把這兩個邊距相加得出80，也就是最后A和B之間的邊距。

參考

http://www.smallni.com/collapsing-margin/

http://www.w3help.org/zh-cn/kb/006/

行內元素

行內元素在擺放的時候不會產生換行，也就是說行內元素在空間足夠的情況下會出現在同一行中。行內元素有幾個比較重要的概念：
1. 對于行內元素設置高度和寬度是無效的
2. 內容區：由內容高度所決定的區域
3. 行內框：對于非替換元素(,...)高度由line-height決定，對于替換元素()高度由內容和內外邊距決定
4. 內容區的上下加上line-height與font-size差值的一半就形成了行內框
5. vertical-align是根據行內框進行對其的
記住上面幾個概念，對于行內元素的布局應該就能明白了。

邊距和邊框 外邊距

外邊距是什么我就不多說了，這里提幾個比較容易誤會的地方。
首先，當外邊距是百分比時，它是根據父元素的寬度進行計算的，上下邊距也是根據這個值進行計算。也就是說上下外邊距的值也是以父元素的寬度為標準的。
其次，大家有時候書寫margin屬性的時候都喜歡使用縮寫的方式，寫兩個寬度或者一個，可是如果寫上三個的話會怎么樣呢？瀏覽器對于外邊距的計算有下面幾個規則：

當缺少下邊距時，使用上邊距

當缺少左邊距時，使用右邊距

當缺少右邊距時，使用上邊距

用上面這三條規則就可以很好的解釋邊距縮寫的原理了。這個原則對于所有邊距和邊框的縮寫都適用。

內邊距

對于內邊距唯一要說的就是IE盒模型和W3C的盒模型的區別，在IE中padding和border是包括在元素width和height中的，而W3C的盒模型是不包括這兩個的。還有一個問題就是內邊距為百分比時的計算和內邊距一樣，都是以父元素的寬度為標準。

邊框

邊框有一個特點就是元素的背景會延續到邊框，也就是說邊框是覆蓋在元素背景之上的。

浮動和定位 包含塊

元素的包含塊就是包含元素的那個元素，但是對于不同的元素情況會不一樣：

浮動元素的包含塊是最近的塊級元素祖先的內容區域

絕對定位元素的包含塊是最近的有定位的祖先。如果這個祖先是塊級元素，那么包含塊就是塊級元素的邊框區域；如果是行內元素，那么包含塊就是行內元素的內容區域。

相對定位和static定位的元素的包含塊就是最近的塊級元素或者行內元素的內容區域

浮動

浮動元素會形成塊級元素

浮動元素和塊級元素重疊時，塊級元素的背景在浮動元素下，而內容在上

浮動元素和行內元素重疊時，行內元素在上
看DEMO
從上面例子很容易看出浮動元素和塊級元素重疊的時候不同的現象。

絕對定位

對于絕對定位在橫向方向上也有一個計算公式：
left+(margin-left)+(border-left-width)+(padding-left)+width-(padding-right)+(border-right-width)+
(margin-right)+right=包含塊width
這個公式在同時指定了絕對定位并且還指定了外邊距的情況下非常有用。

如果絕對定位不指定偏移，那么元素會怎么布局呢？很多人認為是相對于包含塊進行定位，其實不是這樣的。如果不指定偏移的話，元素會根據原來正常流中的位置進行定位。
DEMO
如果你在上面添加一個left偏移，你會發現它是在正常流的情況下發生偏移的，只有同時指定了兩個方向的偏移，才會根據包含塊進行定位。

如果絕對定位的元素沒有指定width和height那么我們可以通過設置偏移來對元素進行拉伸。
DEMO
通過修改偏移，你就可以控制元素的大小。

在同時具有margin和偏移的時候該怎么給元素定位呢？

非替換元素

如果left,right,width都為auto，那么按照正常流方式進行布局，并且把值為auto的margin-left和margin-right設為0

如果left,right,width都不為auto

如果margin-left和margin-right都為auto，那么根據公式把兩個設為相同的長度；如果計算出的長度為負數，那么就把margin-left設為0

如果margin-lef或margin-right其中有一個為auto,那么根據公式計算出auto的值

其他情況，首先把值為auto的margin設為0

如果left不為auto，width根據內容計算值，其他值根據公式進行計算

如果width不為auto，首先按照正常流定位，然后根據公式計算margin的值

如果right不為auto，width根據內容計算，其他值根據公式進行計算

如果left,width不為auto，right根據公式計算

如果left,right不為auto，width的值根據公式計算

如果width,right不為auto，left根據公式計算

替換元素

寬度由內容區決定

如果left和right為auto，那么根據正常流定位

如果left或right為auto，則把對于的值為auto的margin改為0

如果此時，margin都是auto，那么根據公式計算平方剩余長度

如果這時候left還是auto，那么根據公式計算left的值
上面這些計算原則就可以解釋一個現象，就是之前在網上看到一種絕對居中的方法：
DEMO
這個方法把絕對定位元素的偏移都設為0，然后通過margin:auto來實現居中，這個方法用上面的原則就可以說通了。

相對定位

相對定位相對來說就比較容易了。就兩個點：
+ 偏移是根據元素本來在正常流中的位置計算的
+ 相對定位會影響其他元素的定位，相對定位元素會占據它原來的空間

PS:這篇博客大家看得可能有點痛苦，貌似現在SegmentFault不支持CodePen，不知道大家有沒有什么辦法可以做到。

博客地址:http://lakb248.github.io

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110902.html

相關文章

  • 關于CSS的那些事

    摘要：關于背景圖片的那些小技巧背景圖片太大沒辦法居中顯示怎么辦想完整顯示圖片如何按比例縮放想要在頁面上顯示兩個空格，應該怎么寫代碼在代碼里寫才行。 CSS簡介 想要制作出好看又高大上的網頁，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格...

    smallStone 評論0 收藏0

  • css基礎—字體那些事

    摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    Youngs 評論0 收藏0

  • css基礎—字體那些事

    摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

    pkhope 評論0 收藏0

  • CSS居中那些事

    摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現居中的。設置方法改變塊級元素的為類型設置為行內元素顯示，然后使用來實現居中效果。 做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態，從來沒有系統的學習或總結過，結果現在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結一下，高手繞路。...

    dingding199389 評論0 收藏0

  • 瀏覽器渲染的那些事(一)

    摘要：瀏覽器的主要概念瀏覽器主要分為這及部分。瀏覽器會解析，事實上，有三個的類對應這三類文檔。瀏覽器的錯誤處理相當統一，雖然這不是當前規范的一部分。 今天在推特看到一篇文章《當頁面渲染時，瀏覽器發生了什么》，于是找了些資料，分享一下所得。 瀏覽器的主要概念 showImg(https://segmentfault.com/img/bVvOAv); 瀏覽器主要分為這及部分。 User In...

    cucumber 評論0 收藏0

發表評論

0條評論

LinkedME2016

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<