css盒模型詳解

時間 2019-11-16

標籤 css 模型詳解欄目 CSS 简体版

原文原文鏈接

盒模型

盒模型(框模型)是網頁佈局的基礎，每一個元素都被表示爲一個矩形的方框。css

width和height設置內容框(content box)的寬度和高度。

使用min-width、min-height、max-width、max-height能夠設置最大(小)寬度和高度,優勢是當頁面放大或縮小時，內容框會自動適應頁面。html

padding表示css框的內邊距。
border表示css框的邊界,也就是邊框。border-width、border-color分別設置邊框的厚度和顏色。
margin表示css框的外邊距。

外邊距合併(摺疊)

塊級元素的上外邊距和下外邊距有時會合並(摺疊)爲一個外邊距，其大小取其中最大者。web

相鄰元素之間：毗鄰的兩個元素之間的外邊距會合並。
父元素與其第一個或最後一個子元素之間:若是父元素與其第一個(最後一個)子元素之間不存在邊框，內邊距，行內內容，那麼這兩對外邊距之間會產生合併，此時子元素的外邊距會"溢出"到父元素的外面。
空的塊級元素：若是一個塊級元素內不包含任何內容，則該元素的上下外邊距會合並。

使用overflow: hidden;能夠避免外邊距合併，可是不建議這樣作。建議加padding。佈局

box-sizing

box-sizing屬性用於更改用於計算元素寬度和高度的默認的CSS盒子模型。spa

content-box:默認值，標準盒模型。width和height只包括內容的寬高。
width/height = 內容的寬度/高度
border-box:IE盒模型。width和height包括內容、內邊距和邊框。(若是想要使一個框佔窗口的50%可使用border-box)
width/height = border + padding + 內容的寬度/高度

display

display屬性指定用於元素的呈現框的類型3d

block(塊框):定義爲堆放在其餘框上的框（例如：其內容會獨佔一行），能夠設置它的寬高。
inline(行內框):與塊框是相反的，它隨着文檔的文字（例如：它將會和周圍的文字和其餘行內元素出如今同一行，並且它的內容會像一段中的文字同樣隨着文字部分的流動而打亂），對行內盒設置寬高無效。
inline-block(行內塊狀框):像是上述兩種的集合：它不會從新另起一行但會像行內框同樣隨着周圍文字而流動，它可以設置寬高，而且像塊框同樣保持了其塊特性的完整性，它不會在段落行中斷開。（在下面的示例中，行內塊狀框會放在第二行文本上，由於第一行沒有足夠的空間，而且不會突破兩行。然而，若是沒有足夠的空間，行內框會在多條線上斷裂，而它會失去一個框的形狀。）

溢出

overflow:當你使用絕對的值設置了一個框的大小（如，固定像素的寬/高），容許的大小可能不適合放置內容，這種狀況下內容會從盒子溢流。咱們使用overflow屬性來控制這種狀況的發生。code

auto：當內容過多，溢流的內容被隱藏，而後出現滾動條來讓咱們滾動查看全部的內容。
hidden:當內容過多，溢流的內容被隱藏。
visible:默認值，當內容過多，溢流的內容被顯示在盒子的外邊。

文字溢出省略

單行文字
white-space: nowrap:文本內的換行符無效(使文字顯示在一行)cdn

text-overflow: ellipsis:   //多出的文本變爲省略號
  overflow: hidden;
複製代碼

多行文字htm

div{
      display: -webkit-box;
      -webkit-line-clamp: 2;//第幾行省略
      -webkit-box-orient: vertical;
  }
複製代碼

文字兩端對齊

若是想要使[姓名]和[聯繫方式]兩端對齊，呈現這樣的效果:blog

代碼以下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    span{
      display: inline-block;
      width: 4em;
      text-align: justify;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%;
    }
  </style>
</head>
<body>
  <div>
    <span>姓名</span><br/>
    <span>聯繫方式</span>
  </div>
</body>
</html>
複製代碼