1.盒模型是css布局的基石
他規定了網頁元素如何顯示以及元素之間的相互關係
css定義所有的元素都可以擁有項盒子模型一樣的外形和平面空間
包括：邊框（border）
外邊距（margin）
內邊距（padding）
內容區（content）
盒模型的型別：
1.標準模式
2.怪異模式
1.overflow：屬性指定如果內容移除乙個元素的框
取值：visible/hidden/scroll/suto
visible:預設值，內容不會被裁剪掉，會呈現在元素框之外
hidden:內容會被剪裁，其餘的內容不可見
scroll:內容會被剪裁，滾動條顯示其餘的內容
atuo:如果內容被剪裁，則被瀏覽器以滾動條顯示其餘內容
2.overflow-x:指定如果他溢位了元素的內容區域是否剪裁左邊或右邊邊緣的內容
3.overflow-y:指定如果他溢位了元素的內容區域是否剪裁上邊和下邊邊緣的內容
4.text-overflow:指定當文字溢位包含他的元素：
clip:修剪文字
elipsis:顯示勝率符號來代表被修剪的文字
注意：text-overflow必須和overflow：hidden;white-space:nowarp;一起使用
元素的邊框：是圍繞元素的內容和內邊距的一條或多條線
屬性允許你規定元素邊框的樣式、寬度、顏色
border：用於把針對四個邊的屬性設定在乙個宣告中
border-style:用於設定元素所有邊框樣式，或者可以為單個邊框設定特有的樣式、
border-width:用於設定邊框的寬度
border-left:用於將左邊框的所有屬性設定到乙個宣告中
topbottom
right
border-style:取值：
soild/dashed/double/none
注意：如果要設定盒子的邊框，必須制定邊框的線型，只有設定了線型才能是指相對應的屬性（顏色和寬度）
padding：
填充，元素碧娜狂和元素內容之間的區域，稱之為內邊距
用法：用來調整內容在容器中位置關係，或者理解調整子元素在父元素中的位置
注意：padding屬性需要新增在父元素上，padding值是額外載入元素原有大小上的值；
如果想保證元素大小不變，需要充元素的寬或高上減掉後在加上padding值
屬性值的四種方式：
1.四個值：上、下、左、右
2.三個值：上、左右、下：
3.兩個值：上下、左右；
4.乙個值：四個方向；
說明：可以單獨設定乙個方向上的填充：
如：padding-top;
margin:盒子與盒子之間的距離
屬性：margin-top：上邊界
margin-right:右邊界
margin-bottom:下邊界
margin-left:左邊界
屬性值表示的四種方式（和padding一樣）
說明：
在瀏覽器中橫向居中：
同樣可以單獨設定方向邊界
1.當兩個盒子縱向排列的時候，他們的距離為兩個盒子之間最大的那個外邊距
2.當兩個和子橫向排列時，他們的距離是兩個和子的外邊距之和
計算公式：
寬：左右的margin+左右的border+左右的padding+內容width
高：上下margin+上下border+上下padding+內容height
例如：乙個盒子的margin為 20px;
border為1px;
padding 為10px；
content的寬：200px;高50px;
寬：20*2+1*2+10*2+200=262px;
高：20*2+1*2+10*2+50=112px;
注意：設定padding和margin會撐大盒子，任何解決？
根據外邊距、內邊距、邊框的大小重新計算盒子中的內容寬度和高度
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...