CSS盒子模型

css盒子模型是由內(nèi)容區(qū) ?? 內(nèi)邊距 ?? 外邊距 ?? 邊框組成的:

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

內(nèi)容區(qū)是css盒子模型中放制內(nèi)容的區(qū)域郁稍,也就是元素中的文本內(nèi)容,子元素都是存在于內(nèi)容區(qū)中的较坛。

如果沒有為元素設(shè)置內(nèi)邊距和邊框, 則內(nèi)容區(qū)大小默認(rèn)和盒子大小是一致的。

當(dāng)內(nèi)容過多超出width和height時籽腕,可以使用overflow屬性來指定溢出處理方法。

通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大小 ?? width和height兩個屬性只適合用于塊元素纸俭。

內(nèi)邊距:

內(nèi)邊距就是指內(nèi)容區(qū)到邊框之間的空白皇耗。

默認(rèn)情況下width和height不包含padding的大小。

內(nèi)邊距分為四個方向:padding--top ?? padding--right? padding--bottom和padding--left.

邊框:

可以在元素周圍創(chuàng)建邊框揍很,邊框是元素可見框的最外部郎楼。

可以使用border屬性來設(shè)置盒子的邊框:

border:1px? solid? red;

和padding一樣万伤,默認(rèn)width和height并包括邊框的寬度。

邊框樣式:

none (沒有邊框)

dotted(點線)

dashed(虛線)

solid(實線)

double(雙線)

groove(槽線)

ridhe(脊線)

inset(凹線)

outset(凸線)

外邊距:

外邊距是元素邊框與周圍元素相距的空間箭启。

使用margin屬性可以設(shè)置外邊距壕翩。

padding和margin的區(qū)別在于:padding體現(xiàn)的是元素的“內(nèi)部結(jié)構(gòu)”,而margin體現(xiàn)的是元素之間的相互關(guān)系傅寡。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末放妈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子荐操,更是在濱河造成了極大的恐慌芜抒,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件托启,死亡現(xiàn)場離奇詭異宅倒,居然都是意外死亡,警方通過查閱死者的電腦和手機屯耸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門拐迁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人疗绣,你說我怎么就攤上這事线召。” “怎么了多矮?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵缓淹,是天一觀的道長。 經(jīng)常有香客問我塔逃,道長讯壶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任湾盗,我火速辦了婚禮伏蚊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘淹仑。我一直安慰自己丙挽,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布匀借。 她就那樣靜靜地躺著颜阐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吓肋。 梳的紋絲不亂的頭發(fā)上凳怨,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機與錄音,去河邊找鬼肤舞。 笑死紫新,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的李剖。 我是一名探鬼主播芒率,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼篙顺!你這毒婦竟也來了偶芍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤德玫,失蹤者是張志新(化名)和其女友劉穎匪蟀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宰僧,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡材彪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了琴儿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片段化。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖造成,靈堂內(nèi)的尸體忽然破棺而出穗泵,到底是詐尸還是另有隱情,我是刑警寧澤谜疤,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站现诀,受9級特大地震影響夷磕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜仔沿,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧琳状,春花似錦锐极、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奴艾,卻和暖如春净当,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工像啼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留俘闯,地道東北人。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓忽冻,卻偏偏與公主長得像真朗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子僧诚,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,969評論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案遮婶? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • 前言 總括: 對于盒子模型,BFC振诬,IFC和外邊距合并等概念和問題的總結(jié) 原文地址:從CSS盒子模型說起 知乎專欄...
    秦至閱讀 762評論 0 3
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,314評論 2 66
  • 最近在工作中遇到很多樣式的問題蹭睡,雖然是解決了但是總覺得自己知其然而不知其所以然。今天簡單的了解了盒子模型赶么,解開了我...
    魏永_Owen_Wei閱讀 445評論 0 0
  • 最近工作中需要用到docker肩豁,所以決定自己搭建一個docker環(huán)境,于是選擇在virtualbox上安裝cent...
    songleo閱讀 1,451評論 0 0