本節簡介:講解css樣式盒子模型中內部填充值和外邊距屬性及實際應用時值的設置技巧
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
要讓一個元素居中顯示,只需在上下加個值,左右加 auto,例如:h1{ background :#F93 ;width:300px;height:300px; margin:100px auto}
簡約的代碼: 尺寸width :300px; 顏色 background:#3cC; 內邊距padding:100px 50px 10px 30px ;
盒子模型的外邊距margin:如果margin有一個值,分別代表的是上下左右都是一樣的(margin:30px) ; 如果margin有兩個值,分別代表的是 第一個值負責:上下,第二個值負責左右(margin:30px 90px); 如果margin有三個值時,第一個值代表的是:上,第二個值代表的是:左右,第三個代表的是:下邊距; 如果margin有四個值的時候,第一個值代表上,第二個代表右,第三個代表下,第四個代表左,呈順時針方向。
部分css樣式不想被顯示,可以用 /* */ 把不顯示的代碼包裹起來。
為盒子模型增加邊距: 1、增加外邊距: margin-top(上):20px; margin-left(左邊):40px; margin-bottom(底部的):60px; margin-righ(右邊):80px ;
給指定內容定義寬高:例如: <head> <style> div {width(寬度):300px; height(高度):300px;} </style> </head>
css樣式 <style> </style>是在 <head> </head> 之間寫的。
盒子模型的內間距和外邊距: 外邊距margin ;內間距 padding ;外層的邊框 border 。
margin:30px;如果margin有一個值,分別代表是上下左右都一樣;有兩個值,分別代表的是第一個值負責上下 第二個值左右(margin:30px 90px);有三個值,第一個值是上,第二個值是有左右間距,第三個值是下邊距;有四個值,按順時針方向走,第一個代表上,第二個右,第三個下,第四個代表左;
margin外邊距 padding內間距 border邊框
如果想讓元素居中顯示 可以使用margin上下添加一個值 左右auto例如 margin:100px auto
如果margin有四個值:第一個代表上,第二個代表右,第三個代表下,第四個代表左右,按照順時針方向
如果margin有三個值,分別代表的是 第一個值負責:上,第二個值負責:所有 第三個值負責:下
如果margin有兩個值,分別代表的是 第一個值負責:上下 第二個值負責:左右
如果margin有一個值,分別代表的是上下左右都一樣的
外邊距:margin-right右邊 margin-left左邊 margin-top上邊 margin-bootom下邊
盒子與盒子的外邊距叫margin,圖片與盒子邊框的留白叫內間距padding,盒子邊框叫border