前端基礎第七天,盒子模型
剛開始寫部落格,排版不是很好被吐槽,看來我需要好好整理學習一下排版了
今天主要學習盒子模型(一種思維方式,萬物皆盒子)
盒子模型
由四部分組成,內容content,邊框,borter,內邊距,padding,外邊距,margin
下面我們就依次來介紹一下
一.內容:content
內容自然就是我們的文字,理解性記憶就好
二.邊框:borter
1.屬性
邊框的寬度border-width:數字+px;
邊框的樣式borter-style:取值;solid實線,bashed虛線,dotted點線(其中solid最常用)
邊框的顏色borter-color:顏色;可以為關鍵字,也可以為#加16進位制的顏色
2.連寫形式(最常用,一定要記得)
border:10px solid red;代表為,邊框寬度為10的顏色為紅色的實線
注意點:書寫順序不要變,也不要省略
層疊問題,把單獨的樣式寫出來
3.給單方向設定border
border-方位名詞:數字+px;
上:top;右:right;下:bottom;左:left;
4.細線表格(合併邊框)
border-collapse:collapse;
border會撐大盒子
三.內邊距,padding
盒子邊框與內容之間的距離
padding:數字+px;
1.取值(記憶方法,先從上開始賦值,然後順時針賦值,如果沒有賦值就看對面的)
一個值:上右下左
兩個值:上下和左右
三個值:上,左右和下
四個是:上右下左
2.給單方向設定padding
padding-方位名詞:數字+px;
上,top;右,right;下,bottom;左,left
盒子大小的計算公式
組成部分:border+padding+內容
自動內減(記住哦)
box-sizing:border-box;
四.外邊距margin
盒子與盒子之間的距離
1.取值(記憶方法,先從上開始賦值,然後順時針賦值,如果沒有賦值就看對面的)
一個值:上右下左
兩個值:上下和左右
三個值:上,左右和下
四個是:上右下左
2.給單方向設定margin
margin-方位名詞:數字+px;
上,top;右,right;下,bottom;左,left
3.margin單方向的應用
上下應用
margin-top;讓盒子下移
margin-bottom;讓下面的盒子下移
左右應用
margin-left;讓盒子右移
margin-right;讓盒子左移