盒子模型仁讨,邊框(border),內(nèi)邊距(padding)

在網(wǎng)頁中 一切都是盒子(important)

盒子大小由內(nèi)容區(qū)实昨,內(nèi)邊距洞豁,邊框決定

一:內(nèi)容區(qū)(content)

?內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域,也就是元素 中的文本內(nèi)容子元素都是存在于內(nèi)容區(qū)中的。

用width height 來設(shè)置內(nèi)容區(qū)的大小

width height只適用于塊元素


二:邊框用 border屬性 (width丈挟,color闰挡,style)

border-width:10px? 20px 30px 40px; 上右下左的邊框距

border-width:10px? 20px 30px;上 左右 下的邊框距

border-width:10px? 20px 30px;上下 左右的邊框距

border-width:10px;所有邊框的邊框距

border-color:red green orange yellow;上右下左的邊框距顏色

border-color:red green orange;上 左右 下的邊框距顏色

border-color:red green;上下 左右的邊框距顏色

border-color:red;所有的邊框局顏色

border-style :solid 實(shí)線礁哄, dotted 點(diǎn)狀, dashed 虛線溪北, double 雙線

border:green solid 20px(簡(jiǎn)寫)

上下左右邊框 的邊框樣式

border-top: orange solid 20px;

border-bottom: green solid 20px;

border-left:red solid 20px?

border-right: blue solid 20px;

設(shè)置除了右邊的其他三個(gè)邊框

border:color? style? width

1? border: green solid 20px;

border-right:none;

2? border-left: red solid 20px;

border-top: orange solid 20px;

border-bottom: green solid 20px;


三:內(nèi)邊距 用padding來

內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間桐绒。

設(shè)置上左下右 的內(nèi)邊距
padding-top: 100px;

padding-left: 200px;

padding-bottom: 100px;

padding-right: 200px;

padding:10px 20px 30px;

分別指定上、左右之拨、下四個(gè)方向的內(nèi)邊距

padding:10px 20px;

分別指定上下茉继、左右四個(gè)方向的內(nèi)邊距

padding:10px;

同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蚀乔,隨后出現(xiàn)的幾起案子烁竭,更是在濱河造成了極大的恐慌抵屿,老刑警劉巖白群,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谆刨,死亡現(xiàn)場(chǎng)離奇詭異姥份,居然都是意外死亡芳杏,警方通過查閱死者的電腦和手機(jī)碾阁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門烛愧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來音念,“玉大人氯哮,你說我怎么就攤上這事际跪。” “怎么了喉钢?”我有些...
    開封第一講書人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵姆打,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我肠虽,道長(zhǎng)幔戏,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任税课,我火速辦了婚禮评抚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伯复。我一直安慰自己慨代,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開白布啸如。 她就那樣靜靜地躺著侍匙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上想暗,一...
    開封第一講書人閱讀 52,158評(píng)論 1 308
  • 那天妇汗,我揣著相機(jī)與錄音,去河邊找鬼说莫。 笑死杨箭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的储狭。 我是一名探鬼主播互婿,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼辽狈!你這毒婦竟也來了慈参?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤刮萌,失蹤者是張志新(化名)和其女友劉穎驮配,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體着茸,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡壮锻,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涮阔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片躯保。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖澎语,靈堂內(nèi)的尸體忽然破棺而出途事,到底是詐尸還是另有隱情,我是刑警寧澤擅羞,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布尸变,位于F島的核電站,受9級(jí)特大地震影響减俏,放射性物質(zhì)發(fā)生泄漏召烂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一娃承、第九天 我趴在偏房一處隱蔽的房頂上張望奏夫。 院中可真熱鬧,春花似錦历筝、人聲如沸酗昼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽麻削。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呛哟,已是汗流浹背叠荠。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扫责,地道東北人榛鼎。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像鳖孤,于是被迫代替她去往敵國(guó)和親者娱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • CSS中的居中對(duì)齊 內(nèi)容居中對(duì)齊:text-align:center 盒子居中對(duì)齊:margin:0 auto; ...
  • 什么是盒子蔫缸? CSS處理網(wǎng)頁時(shí)腿准,它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里。 我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相...
    咻咻咻滴趙大妞閱讀 923評(píng)論 0 0
  • 一個(gè)盒子我們會(huì)分成幾個(gè)部分:內(nèi)邊區(qū)(content)內(nèi)邊距(padding)邊框(border)外邊距(margi...
    Khada閱讀 245評(píng)論 0 0
  • 螢窗小嶼閱讀 179評(píng)論 0 0
  • 當(dāng)寒涼限制了人們的出行拾碌,那么最近流行的話題便成為了宿舍人討論的日常吐葱,由家國(guó)事到娛樂圈的紛紛擾擾無所不聊,事實(shí)上校翔,我...
    Autumn_3338閱讀 156評(píng)論 0 1