盒模型的一些解析

盒模型分類

盒模型分爲兩類: 普通盒模型(box-sizing: content-box), 怪異盒模型(box-sizing: border-box).
普通盒模型和怪異盒模型的區別就是 設置width, height的時候是給什麼區域設置的. eg:

content-box設置 width:100px; height:100px; 那麼不管你怎麼更改 border padding的值,都不會影響到內容區的值.換句話說, 你設置padding 和 border值時候,會改變盒子的總尺寸
border-box(邊框盒子)相對於上面的,這個更好理解.字面意思: 給盒子設置 width和 height的時候設置的是盒子的總尺寸, 那麼這時候你再去改變 border padding值,就會影響到內容區content的尺寸.

盒子的基本標籤就先不說了

如今說說你們都懂的inline, block, inline-block的特性, 但每每忘記在哪使用, 或者是知道在哪用可是沒注意到爲何這麼用

inline

行內元素要居中的時候, 得給父元素設置text-align:center;行內元素也有細分的:有興趣的同窗能夠看看

• 行內元素先後都能跟內容,就是能夠同行顯示.
• 行內元素不能設置寬高.
  那麼有些同窗就好好奇了,不設置高度能夠,不設置寬度的話,我元素和元素間的空格怎麼辦??用 一個個敲嗎?hmmm,能夠試試用margin,寬度不能設置,那就用margin外邊距 把別的元素頂開
• 在結構上:行內元素不能放塊元素
  凡事都有特列的,a標籤這個跳轉連接就能夠放個塊元素.其實你們也常常見到,就好比去淘寶買東西,不是隻能點圖片或者文字他才跳轉.點擊整個區域任意部分,他都會跳轉.
• 內邊距只對內聯元素產生影響,無視塊元素
  這個說的是行內元素的margin-top, margin-bottom不會生效. 要注意的是這個padding, 他是會"生效"的 可是不會影響上下的佈局. 這裏說的"生效"意思是: 若是你給span 設置一個background-color會發現背景顏色會衍生到另外一行,可是並不對擠開別的元素(換句話說就是不會影響佈局,不佔位置)

• 便籤之間的空格解析:
  這個也挺頭疼的,那怎麼去除便籤間的空格解析呢?
  咱們能夠給父元素設置font-size:0;,可是這麼作的話就得給子元素從新設置font-size值, 由於這個屬性是能夠繼承的.

  咱們還可使用margin:負值值去調節.這個比改變font-size靠譜多了.

block

• 獨佔一行, 這個屬性同時也帶來不設置寬度的話,默認寬度是100%. 這個100%不是相對於可視窗口的,100%是相對於父元素寬度的百分百,也能夠理解爲繼承父元素的寬度.(怎麼好理解怎麼來)
• 高度是由內容撐開的 這個應用會在inline-block裏面一塊兒講到.很方便的一個東西(一個小技巧)
• 能夠設置內外邊距(那麼這個內外邊距的設定加上邊框就能夠看上面的兩種盒模型了)
• 塊元素比行內元素好的是,塊元素能夠包含全部元素.可是p標籤開始搞特殊了,這個p標籤感受就跟行內元素同樣,不能放塊元素.非要放個div進去的話,就會致使瀏覽器的fail silence把這個默認爲是2個p標籤包圍1個div標籤.

inline-block

相對來講inline-block 會比上面那兩個用的多一點. 畢竟還沒學float position的時候,仍是要靠inline-block佈局的.

• 看這個單詞就大概理解了.inline 和 block加了個連字符.所以本質上是具有了inline元素的性質和塊元素的性質.
• 支持寬高. 能夠隨意的給width height至關因而上面的盒模型
• 上下左右margin值都有效,可是不能像block那樣用auto居中.margin:0 auto,那有些同窗想要居中的話怎麼辦???? 這時候用到的是inline的性質,給父元素設置一個text-align: center(說下怎麼去理解這個margin: auto 不生效, 行內元素的話是由多個的行內元素組成,auto廣泛是100%的意思,block使用的時候左右兩邊100%就是居中, 可是多個行內元素auto到中間互相擠兌就放不下,因此不能用也無效)
• 標籤間有解析空格: 處理方法和inline同樣
• 上下左右padding 生效, 也佔空間(這是和inline的區別),參考上面的盒模型理解
• img標籤能夠理解爲inline-block 可是img是inline元素(怎麼回事呢?)
• 若是不去設置寬高的話,inline-block的寬高就由內容撐開

inline-blcok 最後一個性質使用

不去設置內容的話就能夠由裏面的元素撐開,還在頭疼每次作小demo(案例)的時候,由於1px,2px的測量偏差,致使內容換行 或者是要用調試臺去調的剛恰好?

這時候能夠用寬高由內容撐開.給最外面的大盒子先設置成display:inline-block.而後只管往裏面放你須要的元素tag/element,設置margin padding值,最外面的大盒子總會被撐開的. 全弄完了以後就能夠打開調試臺,看看你這個盒子多大, 而後設置固定的width值 或者是改回display:block

那麼block,inline-block的height也是由內容撐開所以一樣也能夠先不設置(-->這裏圖文並茂)