分類：**ie盒子模型 標準w3c盒子模型
盒子模型：content(內容) padding border margin
padding：外邊距
border：邊框
margin：外邊距
.box{
width:200px；
height:200px;
/*div的內容的寬高width，height(內容區域)+border+padding-------ie盒子模型*/
/*width和height : div的內容區域的寬高，並不是盒子的寬度和高度------標準盒子模型*/
/*真實占有寬高 width(height)+padding+border+margin---左邊或者右邊*/
padding:15px 10px 5px 9px;/*上 右 下 左*/
padding:10px 20px;--------上下10px 左右20px*/
/*padding：會改變盒子的大小。可通過 box-sizing 來解決盒子的自適應問題，恢復盒子的本來大小*/
/*margin:10px 20px 30px 40px; 上 右 下 左*/
margin-bottom(上乙個元素盒子的樣式), margin-top(下乙個元素盒子的樣式)---------兩div發生合併(以最大的邊距為準)
當兩個盒子巢狀時， 有三個div巢狀；
當最外面的div設定margin-top：50px，第二個設定也設定margin-top:20px，，則第二個設定的margin-top將會被取代,值大的有效
當盒子巢狀時，
解決方案：1.給父級盒子元素設定乙個邊框---border：1px solid #333;
2.給父元素設定乙個-------overflow:hidden;
-->
box-shadow:1px 2px 3px 4px #ccc inset；
1px 從原點開始，沿x軸正方向的長度（倘若為負值，為沿x軸負方向的長度）；
2px 從原點開始，沿y軸正方向的長度；（倘若為負值，為沿y軸負方向的長度）；
3px 陰影的模糊度，只允許為正值；
4px 陰影擴充套件半徑；
#ccc 陰影顏色；或者 rgba( , , ,0.3)
inset 設定為內陰影（如果不寫這個值，預設為**影）；
所謂內**影，其實就是指的是陰影在div的外面一圈還是在div的裡面一圈，如下圖
opacity:0----1;透明度
rgba(255,255,250,0.3);---------rgba(顏色，顏色的透明度)
邊框圓角：
border-radius:10px 20px 30px 40px;-------上 右 下 左
border-radius:50%; -------邊框為乙個圓
文字樣式設定 盒子模型
1，文字樣式設定 段落首行縮排text indent 該屬性是用於設定每個段落首行縮排數量值的屬性，如果是用於中文布局，一般會使用 2em 的數值和單位來為每個段落的首行縮排 兩個字元 例如 文字裝飾性 下劃線 text decoration 文字字母大小寫轉text transform 該屬性有以...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...