盒子模型 盒子模型的四個部分：內容區、邊框，內邊距，外邊距；前三者共同決定盒子可見框的大小， 邊框 為元素設定邊框 .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 會根據需求自動添加滾動條， ， 這些是我在看網課之后手打的筆記，然而學完整套視頻之后發現有原始碼這種東西，枯了；如果你覺得這些知識點對你有一些幫助的話就給我一點回應叭，安慰我一下我這個小菜鳥呲呲，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63813.html
標籤：Html/Css