盒子模型 盒子模型的四個部分：內容區、邊框，內邊距，外邊距；前三者共同決定盒子可見框的大小。 邊框 為元素設置邊框 .box1{ width:100px; height:100px; background-color red; /*設置盒子內容區寬高及顏色。*/ border-width:10px; ...
盒子模型 盒子模型的四個部分：內容區、邊框，內邊距，外邊距；前三者共同決定盒子可見框的大小。 邊框 為元素設置邊框 .box1{ width:100px; height:100px; background-color red; /*設置盒子內容區寬高及顏色。*/ border-width:10px; border-color:yellow; border-style:solid; /*設置邊框，三個樣式缺一不可，缺了就直接不顯示邊框。*/ }
border-width 使用border-width可以分別指定四個邊框的寬度。 指定四個值：按順時針設置； 指定三個值：分別設置給上 左右 下； 指定兩個值：分別設置給上下 左右； 指定一個值：四邊全為這個值。 border-width:10px 20px 30px 40px; /*則上邊框為10px，右邊框為20px，以此類推*。/ //方便起見，此規則自定義為“4321”。 //題外話：如果你也知道3421...hhh border-color 原理同4321有： border-color:red blue green; /*則上邊框為紅色，左右邊框為藍色，下邊框為綠色。*/ border-style 使用border-style來設置邊框樣式。 可選值： none 預設值，沒有邊框； solid 實線； dotted 點狀； dashed 虛線； double 雙線； border-style同4321有： border-style:solid dotted;`` /*上下邊框為實線，左右邊框為點狀。*/ border 邊框的簡寫形式 通過它可設置四個邊框的樣式、寬度、顏色（順序無要求）。 boeder:red solid 10px; /*這對四個邊起作用。*/ border-top border-bottom border-right border-left可單獨用來設置四邊。 border:red solid 10px; border-top:yellow solid 20px; /*除了上邊框為黃色實線20px，其餘三邊均為紅色實線10px*。/ border:red solid 10px; border-top:none; /*常用的去除不要的邊的方法。*/ 內邊距 內邊距指盒子的內容區與盒子邊框之間的寬度。 內邊距會影響可見框的大小； 元素的背景會延伸到內邊距； 即如果給元素添加背景，背景會應用於內容和內邊距組成的區域。 可通過padding-top padding-bottom padding-right padding-left來單獨設置四邊之一。 <style type="text/css"> .box1{ width:100px; height:100px; } .box2{ width:100%; /*創建子元素box2來占滿父元素box1的內容區， height:100%； *註意：不占內邊距*/ } </style> 外邊距 外邊距指當前盒子與其他盒子之間的距離； 不影響可見框的大小，但影響盒子的位置； 有四個方向的外邊距：margin-top margin-bottom margin-right margin-left ； 設置上、左邊距時，會改變盒子自身的位置； 設置下、右邊距時，則會改變其他盒子的位置； margin可設置auto； 若只指定左/右外邊距的margin為auto， 則會將外邊距設置為最大值； 若垂直方向設置為auto，則外邊距預設為0； 即垂直方向的盒子會緊挨在一起。 常用的使元素自動在父元素中居中的方法： 將left和right同時設置為auto。 margin 外邊距的簡寫形式 同樣符合“4321方向規則” margin: 0 auto; /*將上下外邊距設置為0，將左右外邊距設置為auto，即這也是居中的寫法。*/ 垂直外邊距的重疊 在網頁中垂直方向的相鄰外邊距會發生外邊距的重疊。 外邊距的重疊指的是兄弟元素之間的相鄰外邊距會取最大值。 假設盒1和盒2為垂直方向的相鄰兄弟元素， a、給盒1設置底面外邊距為100px，給盒2設置頂部外邊距為100px。 那麼兩個盒子之間的效果還是100px。 b、把盒1設置底面外邊距為100px，盒2的頂部外邊距設置為200px， 那麼兩個盒子之間的距離就變成了200px(取最大值)。 若父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素。 即給子元素設置上外邊距為100px時，子元素和父元素保持相對位置一起下移100px。 解決途徑： 法一：給父元素設置上邊框，把父子隔開； 法二：把父元素的內邊距設置成 “能使子元素下移到你想要位置 ”的數值。 常用去除瀏覽器預設樣式的代碼 *{ margin:0; padding:0; } 內聯元素的盒模型 內聯元素不能設置width和height； 能設置水平方向的內邊距，也能設置垂直方向的， 但垂直方向的內邊距不會影響頁面的佈局（不會擠掉，而是覆蓋）； 能設置邊框，水平、垂直效果同“內邊距”； 支持水平方向的外邊距，不支持垂直方向的。 display 可通過display樣式來修改，將一個內聯元素轉化為塊元素。 可選值：inline 將一個元素作為內斂元素顯示； block 將一個元素作為塊元素顯示； inline-block 將一個元素轉化為內聯元素，使其既有內聯元素的特點又有塊元素的特點； 既可設置寬高，又不會獨占一行。【典型：image】 none：不顯示元素，且元素在頁面中也不會繼續占有位置。 visibility 通過visibility來設置元素的隱藏和顯示的狀態。 可選值：visible 預設值，元素預設在頁面顯示； hidden 元素會隱藏，但在頁面中繼續占有位置（顯示空白）。 overflow 父元素預設將溢出內容在父元素外顯示。 通過overflow可設置父元素如何處理溢出內容。 可選值：visible 預設值 不對一處內容處理； hidden 溢出內容會被修剪，即不顯示； scroll 為父元素添加滾動條，通過滾動條可查看完整內容， 該屬性不管內容個是否溢出，都會添加水平和垂直方向的滾動條； auto 會根據需求自動添加滾動條。 ， 這些是我在看網課之後手打的筆記，然而學完整套視頻之後發現有源碼這種東西，枯了；如果你覺得這些知識點對你有一些幫助的話就給我一點回應叭，安慰我一下我這個小菜鳥呲呲。
