html在布局上, 有乙個非常重要的模型, 那就是盒子模型, 在盒子模型中把標籤內容理解為乙個物品, 而css樣式理解為包容著這個物品的盒子, 一般的塊級標籤都具有盒子模型的特徵, 你可以在css中對這個盒子進行設定, 以達到自己布局的目的, 我這裡繪製了個簡圖, 只寫了內填充和外邊距, 因為我感覺其他的屬性更好用文字和**理解. 同樣的在學習這個的過程中, 要勤於**試驗, 測試, 否則是非常不便於掌握的知識.
首先盒子, 什麼是盒子, 就是包含著內容的盒子, 也就是第乙個黑色框, 這個盒子和內容(橘色塊)間是內填充(padding)(綠色), 盒子和盒子間的間距稱之為外邊距(margin)(紫色), 盒子有邊框(border)(藍色), 這三個部分都有四個方向的屬性, 比如內填充的padding-top, padding-left, padding-right, padding-bottom, 這個數值影響著內容的位置, 應該看起來還算明確吧(作圖能力較為拙計).
盒子介紹完了, 簡單說說各種屬性, 方便大家測試學習, 後面不像前面介紹標籤那麼仔細了, 因為本人的能力有限, 有些東西自己能夠理解, 但是表達起來可能就不是那麼形象了, 所以大家看著一點點測試就好了.
盒子模型的邊框是有其寬度, 線條型別, 顏色的, **如下:
div{
border-width:2px;
border-style:solid;
border-color:red;
這段**也可以簡寫為
div{
border:2px solid red;
border-style(邊框樣式), 常見的有三種, dashed(虛線), dotted(點線), solid(實線)
border-color(邊框顏色), 這個所有的設定顏色都是一樣, 可以使用顏色英文名字, 也可以使用顏色的十六進製制值.
border-width(邊框寬度), 一般跟隨的是畫素值, 不過也有型別值thin, medium, thick, 不過非常不常用, 簡單說下.
之前也說過border也有四個方向上的屬性, 所以假如你需要單獨只為乙個邊設定邊框, 而不是四個邊, 那麼在設定的時候就不要了寫border, 而是border-bottom.
css樣式表**如示例:
div{
width:200px;
height:100px;
border:1px solid red;
margin:10px;
padding:20px;
那麼計算這個div塊的寬度應該由外至內, 兩個外邊距 + 兩個邊框 + 兩個內填充 + 乙個內容標籤, 答案應該是 2 * 10px + 2 * 1px + 2 * 20px + 200px = 262px, 這個就是這個盒子模型的完整寬度, 高度同理, 不再贅述.
元素內容和邊框之間的內填充是可以單獨設定距離的, 填充可以通過兩種**設定形式設定, 分別演示.
完整**內填充
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
順時針簡寫填充(順序和上面順序一致, 上右下左)
div{
paddng:20px 10px 15px 30px;
這個實現的效果和上面的完整版是一樣的.
如果上右下左的填充相同, 那麼可以簡寫成乙個
div{
padding:20px;
如果上下填充一樣(10px), 左右填充一樣(20px)
div{
padding:10px 20px;
外間距和內填充一樣, 只是把padding改成margin, 上面所有設定的簡寫都適用, 所以就不重複了.
html 彈性盒模型
父元素 display flex,flex direction,justify content,align items,align content 要使用彈性盒模型需要設定display flex 設定了flex direction的乙個方向為主軸則另乙個方向就為側軸，這個需要分清 1 flex d...
html盒模型基礎。
一 引入 在 中的製作過程中，會把整個頁面劃分結構，讓開發具有層次性，在後期也方便更新和維護。劃分的結構會形成乙個乙個的板塊，這樣劃分出來的一塊一塊的板塊我們簡稱為盒子。把劃分出來的整個 盒子結構也就叫做盒模型。在了解盒模型的基礎上，可以更好的去排版網頁結構，方便編寫 的介面。二 盒子的布局介紹 把...
html中的盒模型
盒模型 包括內容區，補白，邊框，邊界 外邊距 也就是 border padding margin 內容寬度。其中padding的用法 1.padding是新增在父元素 盒子 上的 2.padding 調整子元素在父元素裡面的位置關係 3.padding會把盒子撐大 4.想讓盒子保持原來的大小 在寬高...