CSS-盒子模型 隨學筆記
阿新 • • 發佈：2021-10-27
CSS-盒子模型
頁面佈局要學習三大核心，盒子模型，浮動和定位，學習好盒子模型能非常好的幫助我們佈局頁面。 1.看透網頁佈局的本質 網頁佈局過程： （1）先準備好像相關的網頁元素，網頁元素基本都是盒子Box； （2）利用CSS設定好盒子樣式，然後擺放到相應的位置； （3）往盒子裡面裝內容。 網頁佈局的核心本質：就是利用CSS擺盒子。 2.盒子模型（Box Model）的組成 所謂盒子模型：就是把HTML頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。 CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素，包括：邊框(border)、外邊距(margin)、內邊距(padding)、和實際內容(content)。 一、邊框 border可以設定元素的邊框。邊框有三部分組成：邊框寬度（粗細）邊框樣式 邊框顏色 語法： boder:border-width||border-style||border-color 引數：border-width 定義邊框粗細，單位是px border-style 邊框的樣式 border-color 邊框的顏色 1.設定邊框（邊框粗細和顏色）<style> div { width: 300px; height: 200px; /* 邊框的粗細 一般情況下都用px*/ border-width: 5px; border-color: pink; } </style> </head> <body> <div></div> </body>
2.style：
引數：none 無邊框。與任何指定的border-width值無關 hidden 隱藏邊框。IE不支援 dotted 在MAC平臺上IE4+與Windows和UNIX平臺上IE55+為點線。否則為實線 dashed 在MAC平臺上IE4+與Windows和UNIX平臺上IE55+為虛線。否則為實線 solid 實線邊框 double 雙實線邊框 groove 根據border-color的值畫3D凹槽 ridge 根據border-color的值畫菱形邊框 inset 根據border-color的值畫3D凹邊 outset 根據border-color的值畫3D凸邊<style> div { width: 300px; height: 200px; /* 邊框的粗細 一般情況下都用px*/ border-width: 5px; /* border-style: solid; 實線*/ /* border-style: dotted; 點線*/ border-style: dashed; /* 虛線 */ border-color: pink; }</style> </head> <body> <div></div> </body>
3.邊框的簡寫
<style> /* 邊框簡寫 沒有順序*/ ul { border:1px solid red; } </style> </head> <body> <ul></ul> <ol></ol> </body>
4.邊框分開寫法
<style> /* 邊框分開寫法 */ ol { border-top: 5px solid pink; border-bottom: 5px dashed green; border-left: 5px dashed green; border-right: 5px dashed green; /* 等效果 利用了層疊性 只是層疊了上邊框*/ /* border: 5px solid green; border-top:5px solid pink; */ } </style> </head> <body> <ol></ol> </body>
5.表格細線邊框
border-collapse屬性控制瀏覽器繪製表格邊框的方式。他控制相鄰單元格的邊框。 語法：border-collapse:collapse; 注意：collapse有摺疊的意思； border-collapse:collapse;表示相鄰邊框合併在一起。<style> table, th, td{ border: 1px solid black; border-collapse: collapse; font-size: 14px; text-align: center; } </style> </head> <body> <table align="center" cellpadding="2" cellspacing="0" > <thead> <tr> <th>排名</th> <th>關鍵詞</th> <th>趨勢</th> <th>今日搜尋</th> <th>最近七日</th> <th>相關連結</th> </tr> </thead> <tbody> <tr><td>1</td><td>鬼吹燈</td><td>↓</td><td>345</td><td>123</td><td>12321</td> </tr> </tbody> </body>
6.邊框影響盒子的實際大小
邊框會額外增加盒子的大小，因此我們有兩種方案解決： 1.測量盒子大小的時候，不量邊框； 2.如果測量的時候包含了邊框，則需要width/height減去邊框寬度。 二、內邊距 padding屬性用於設定內邊距，即內容與邊框之間的距離 引數： padding-left 左內邊距 padding-right 右內邊距 padding-top 上內邊距 padding-bottom 下內邊距 1.設定內邊距<style> div { width: 200px; height: 200px; background-color: seagreen; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; </style> </head> <body> 盒子的內容是content 盒子的內容是content 盒子的內容是content 盒子的內容是content 盒子的內容是content </div> </body>
2.padding屬性的簡寫
padding屬性（簡寫屬性）可以有一到四個值： padding:5px; 一個值，代表上下左右都有5px內邊距 padding:5px 10px; 兩個值，代表上下內邊距是5px，左右內邊距是10px padding:5px 10px 20px; 三個值，代表上內邊距是5px，左右內邊距都是10px，下內邊距20px padding:5px 10px 20px 30px; 四個值，代表上是5px，右0是10px，下是20px，左是30px<style> div { width: 200px; height: 200px; background-color: seagreen; /* 簡寫：padding: 5px; */ /* padding: 5px 10px;*/ /*padding: 5px 10px 20px*/; padding: 5px 10px 20px 30px; } </style>
3.padding影響盒子的實際大小
padding也會影響盒子的實際大小 如果盒子本身已經有了寬度和高度，此時在指定內邊距，會撐大盒子。 解決方案：如果保證盒子跟效果圖大小一致，則讓width/height減去多出來的內邊距大小即可 ； 如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小。 三、外邊距 argin屬性用預設值外邊距，即控制盒子和盒子之間的距離。 引數：margin-left 左外邊距 margin-right 右外邊距 margin-top 上外邊距 margin-bottom 下外邊距 1.設定外邊距<style> div { width: 200px; height: 200px; background-color: pink; } .one { margin-bottom: 20px; /* margin-top: 20px; 與上面效果等價*/ } </style> </head> <body> <div class="one">1</div> <div class="two">2</div> </body>
2.margin的簡寫
margin簡寫方式與padding一致： margin:5px; 一個值，代表上下左右都有5px外邊距 margin:5px 10px; 兩個值，代表上下外邊距是5px，左右外邊距是10px margin:5px 10px 20px; 三個值，代表上外邊距是5px，左右外邊距都是10px，下外邊距20px margin:5px 10px 20px 30px; 四個值，代表上是5px，右0是10px，下是20px，左是30px 3.外邊距合併 使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。 （1）相鄰塊元素垂直外邊距的合併 當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下邊距margin-bottom，下面的元素有上邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併。 解決方案：儘量只給一個盒子新增margin值。 （2）巢狀塊元素垂直外邊距的塌陷 對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素上也有外邊距，此時父元素會塌陷較大的外邊距值。 解決方案： 1.可以為父元素定義上邊框； 2.可以為父元素定義上內邊距； 3.可以為父元素新增overflow:hidden;<style> .father { width: 300px; height: 300px; background-color: pink; margin-top: 50px; /* border: 1px solid transparent; */ /* padding: 1px; */ overflow: hidden; } .son { width: 100px; height: 100px; background-color: royalblue; margin-top: 100px; } </style> </head> <body> <div class="father"></div> <div class="son"></div> </body>
4.外邊距的應用
外邊距可以讓塊級盒子水平居中，但是必須滿足條件： （1） 盒子必須指定了寬度（width）； （2）盒子左右的外邊距都設定為auto。 注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素新增text-align:center即可。 5.清除內外邊距 網頁元素有很多都帶有預設的內外邊距，而且不同的瀏覽器也不一致，因此我們在佈局前，首先要清除下網頁元素的內外邊距。 注意：行內元素為了照顧相容性，儘量只設置左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內塊元素就可以了。<style> /* 這句話是我們css的第一行程式碼 */ * { margin: 0;/*清除外邊距*/ padding:0;/*清除內邊距*/ } </style> </head> <body> 123 <ul> <li>abcd</li> </ul> <span>行內元素儘量只設置左右的內外邊距</span> </body>