盒模型包含有效內容區域，邊框以及外邊距部分
盒模型的寬度 = width+padding-left+padding-right+border-right+border-left+marign-left+marign-right;
盒模型高度 = height + padding-top+padidng-bottom+border-right+border-left+marign-bottom;
border: 四條
border: 1px邊寬 solid 邊形 red 邊色; 四條邊框完全一致 1px 紅色實線
border-width:邊寬
border-width:1px ;
border-width:1px 2px 0 4px; //順時針 上右下左
border-style: 邊形 solid 實線 dashed虛線 dotted小圓圈 double雙實線
border-color: rgb()/#fff122/red;
border-top:1px solid red;
border-left:2px solid blue;
border-right:2px solid blue;
border-bottom:2px solid blue;
內邊距:指的是盒子內部的間隙
fun: 設定有效內容和邊框的距離 不能為負!!!
內邊距設定會增加盒模型寬高 所以要記得內減 !!! 在width上減相應的值
sahfbewbfrew
margin:10px ; 上下左右四個都一樣 盒子發生位置變化
margin:10px 20px; 上下10px 左右20px
margin:10px 20px 30px; 10px 上 20px 左右 30px 下
margin;10px 20px 30px 40px ; 順時針
外邊距可以設定負值 只是盒子之間的距離拉近 會出現交叉現象
優先考慮內邊距,其次考慮外邊距
描述: 在垂直方向上的外邊距會發生塌陷 (子元素如果在垂直方向上設定了外邊距 ,子元素會帶父元素一
起向下移動)
當子元素設定了上外邊距，會使父元素和子元素一起向下移動
解決方法：1:給父元素設定1px上邊框，顏色白色
2，給父元素設定1px上內邊距
3，給父元素加overflow:hidden;元素身上有overflow:hidden；這個屬性時，這個元素外部不會影響元素，內部也不會影響元素
兄弟關係的兩個垂直放置的盒子，如果上面那個盒子設定了下外邊距，底下的盒子又設定了上外邊距，會出現塌陷，導致最終的外邊距不會疊加，而是取設定的最大值
解決辦法：
1，避免 將外邊距設定在乙個盒子身上
2，同事將兩個變成bfc盒子（私有領域）給兩個盒子加父盒子，父盒子身上加overflow:hidden
margin: 0 auto; 0 上下外邊距為0 auto 自動 瀏覽器計算---> 盒子水平居中
margin-left:auto;
margin-right:auto;
元素的分類
1:寬度width預設是100%,高度取決於內容高度
margin: 0 auto; 0 上下外邊距為0 auto 自動 瀏覽器計算—> 盒子水平居中
margin-left:auto;
margin-right:auto;
2:獨成一行 (霸道)
3:設定寬高,可以上下左右外邊距 ,上下左右內邊距
行內元素(display:inline)
1:寬度width高度取決於內容高度
2:併排 ,中間會出現間隙(文字特性)
3:不可以設定寬高,不可以上下外邊距 ,但是可以設定左右外邊距和四周的內邊距
a,em ,i,span…
行內塊(display:inline-block)
1:併排 又可以設定寬高
2:可以四周的內邊距和外邊距
3:中間會出現間隙( 文字特性)
盒模型基礎
盒模型屬性 盒模型有五個屬性分別為 1 width 內容寬度 2 height 內容高度 3 border 邊框 4 padding 內邊距 即邊框到內容之間的距離 5 margin 外邊距 即乙個盒子到另乙個盒子之間的距離 一 width與height 指盒子的寬和高 盒子的體積或者容積，顯示內容...
盒模型的基礎
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。即 由content padding border margin組成基本的框架 1.padding是在盒子裡面...
盒模型基礎練習
lang en charset utf 8 name viewport content width device width,initial scale 1.0 web前端基礎知識title rel stylesheet href css page2.css head css盒子模型 h1 網頁設計...