CSS 框模型

CSS 框模型概述

CSS 框模型概述

1、padding屬性

按照上、右、下量蕊、左的順序分別設(shè)置各邊的內(nèi)邊距,各邊均可以使用不同的單位或百分比值:

h1 {padding: 10px 0.25em 2ex 20%;}

或者

h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

百分?jǐn)?shù)值是相對于其父元素的 width 計(jì)算的艇挨,所以残炮,如果父元素的 width 改變,它們也會改變雷袋。

2吉殃、border邊框

border-style 屬性定義了 10 個不同的非 inherit 樣式辞居,包括 none

這兩種方法是等價的:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

border-width屬性為邊框指定寬度

p {border-style: solid; border-width: 15px 5px 15px 5px;}

下面的規(guī)則與上面的例子是等價的:

p {
    border-style: solid;
    border-top-width: 15px;
     border-right-width: 5px;
    border-bottom-width: 15px;
    border-left-width: 5px;
}

border-color屬性楷怒,它一次可以接受最多 4 個顏色值

    p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
    }

邊框顏色值 transparent。這個值用于創(chuàng)建有寬度的不可見邊框

輪廓 outline 繪制元素周圍的一條線瓦灶,

邊框外圍鸠删,突出元素

outline設(shè)置輪廓的樣式顏色 寬度

outline-style

outline-width

outline-color

輪廓的寬度不計(jì)算元素尺寸

3、CSS 外邊距

margin

h1 {margin : 10px 0px 15px 5px;}

h2 {

margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

4贼陶、CSS 尺寸 (Dimension)
屬性允許你控制元素的高度和寬度刃泡。同樣巧娱,它允許你增加行間距。

height(max min)

width(max min)

line-height

normal(默認(rèn))

number:設(shè)置數(shù)字烘贴,此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距

length:設(shè)置固定的行間距禁添。

百分比:基于當(dāng)前字體尺寸的百分比行間距。

注意 :效果要通過改變?yōu)g覽器大小查看

5桨踪、CSS 外邊距合并

外邊距合并指的是老翘,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距锻离。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者铺峭。

示例圖:

當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并汽纠。


當(dāng)一個元素包含在另一個元素中時(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開)卫键,它們的上和/或下外邊距也會發(fā)生合并。

假設(shè)有一個空元素虱朵,它有外邊距莉炉,但是沒有邊框或填充。在這種情況下碴犬,上外邊距與下外邊距就碰到了一起呢袱,它們會發(fā)生合并:

如果這個外邊距遇到另一個元素的外邊距,它還會發(fā)生合并:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末翅敌,一起剝皮案震驚了整個濱河市羞福,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蚯涮,老刑警劉巖治专,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異遭顶,居然都是意外死亡张峰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門棒旗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喘批,“玉大人,你說我怎么就攤上這事铣揉∪纳睿” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵逛拱,是天一觀的道長敌厘。 經(jīng)常有香客問我,道長朽合,這世上最難降的妖魔是什么俱两? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任饱狂,我火速辦了婚禮,結(jié)果婚禮上宪彩,老公的妹妹穿的比我還像新娘休讳。我一直安慰自己,他們只是感情好尿孔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布衍腥。 她就那樣靜靜地躺著,像睡著了一般纳猫。 火紅的嫁衣襯著肌膚如雪婆咸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天芜辕,我揣著相機(jī)與錄音尚骄,去河邊找鬼。 笑死侵续,一個胖子當(dāng)著我的面吹牛倔丈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播状蜗,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼需五,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了轧坎?” 一聲冷哼從身側(cè)響起宏邮,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缸血,沒想到半個月后蜜氨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捎泻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年飒炎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笆豁。...
    茶點(diǎn)故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡郎汪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出闯狱,到底是詐尸還是另有隱情煞赢,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布扩氢,位于F島的核電站耕驰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏录豺。R本人自食惡果不足惜朦肘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望双饥。 院中可真熱鬧媒抠,春花似錦、人聲如沸咏花。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昏翰。三九已至苍匆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棚菊,已是汗流浹背浸踩。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留统求,地道東北人检碗。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像码邻,于是被迫代替她去往敵國和親折剃。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案像屋? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • Tags:web css [TOC] CSS 框模型 CSS 框模型概述 元素框的最內(nèi)部分是實(shí)際的內(nèi)容怕犁,直接包圍內(nèi)...
    宋志宗閱讀 550評論 0 0
  • CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距己莺、邊框和 外邊距的方式因苹。 內(nèi)邊距、邊框和外...
    五秋木閱讀 330評論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,055評論 0 1
  • ? ? ? 今天的行情特別好款筑,因?yàn)楦鞔笾笖?shù)都是大幅上漲的,平均股價(880003)漲了2.41%腾么,漲幅已經(jīng)是特別特...
    股小咖閱讀 268評論 0 0