HTML----盒子

盒子

內(nèi)容區(qū)域設(shè)定:width:寬度的設(shè)定各聘,height:高度的設(shè)定寓娩。寬度和高度的設(shè)定可以是個體的數(shù)值(帶單位),也可以是百分比設(shè)置堕仔。

內(nèi)邊距(padding)的設(shè)定:

.盒子的內(nèi)邊距為上右下左四個方向

.內(nèi)邊距的設(shè)定用來控制盒子中裝載的內(nèi)容到盒子邊緣(邊框)之間的距離擂橘。

.盒子的內(nèi)邊距占據(jù)的是盒子里面的空間,最小為0摩骨,不允許出現(xiàn)負(fù)值通贞。

內(nèi)邊距(padding)復(fù)合屬性:

padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距

外邊距(margin)的設(shè)定:

盒子的外邊距分為上右下左四個方向
外邊距的設(shè)定用來控制盒子外圍四周的距離,不屬于本身范疇
外邊距的主要用途是控制盒子的位置(如用的比較多的margin:0 auto恼五,表示盒子居中昌罩,即上下為0,左右自動)灾馒,所以可以出現(xiàn)負(fù)值茎用。

外邊距(margin)復(fù)合屬性:

margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:左外邊距

邊框(border)的設(shè)定:

.大部分的元素對象在默認(rèn)情況下是沒有邊框的
.要設(shè)定邊框,必須同時設(shè)定3個要素:寬度睬罗、樣式轨功、和色彩。(如border:1px solid red)

邊框(border)復(fù)合屬性

1傅物、邊框按方向分類的擴展屬性

.border-top:上邊框

.border-right:右邊框

.border-bottom:下邊框

.border-left:左邊框

2夯辖、邊框按屬性要素分類的擴展屬性

.border-width:邊框?qū)挾?
.border-style:邊框樣式

.border-color:邊框色彩

3、邊框樣式的設(shè)定

none: 無輪廓董饰。border-color將被忽略蒿褂,border-width計算值為0,除非邊框輪廓為圖像卒暂,即border-image啄栓。

hidden: 隱藏邊框。IE7及以下尚不支持

dotted: 點狀輪廓也祠。IE6下顯示為dashed效果

dashed: 虛線輪廓昙楚。

solid: 實線輪廓

double: 雙線輪廓。兩條單線與其間隔的和等于指定的border-width值

web前端開發(fā)盒子模型的計算:

標(biāo)準(zhǔn)盒子的尺寸計算
.盒子自身的尺寸:內(nèi)容的寬高+兩側(cè)內(nèi)邊距+兩側(cè)邊框
.盒子在頁面中占位的尺寸:內(nèi)容的寬高+兩側(cè)內(nèi)邊距+兩側(cè)邊框+兩側(cè)外邊距

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末诈嘿,一起剝皮案震驚了整個濱河市堪旧,隨后出現(xiàn)的幾起案子削葱,更是在濱河造成了極大的恐慌,老刑警劉巖淳梦,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件析砸,死亡現(xiàn)場離奇詭異,居然都是意外死亡爆袍,警方通過查閱死者的電腦和手機首繁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來陨囊,“玉大人弦疮,你說我怎么就攤上這事≈┐祝” “怎么了胁塞?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長堂湖。 經(jīng)常有香客問我闲先,道長,這世上最難降的妖魔是什么无蜂? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任伺糠,我火速辦了婚禮,結(jié)果婚禮上斥季,老公的妹妹穿的比我還像新娘训桶。我一直安慰自己,他們只是感情好酣倾,可當(dāng)我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布舵揭。 她就那樣靜靜地躺著,像睡著了一般躁锡。 火紅的嫁衣襯著肌膚如雪午绳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天映之,我揣著相機與錄音拦焚,去河邊找鬼。 笑死杠输,一個胖子當(dāng)著我的面吹牛赎败,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蠢甲,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼僵刮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起搞糕,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤勇吊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后寞宫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萧福,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡拉鹃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年辈赋,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膏燕。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡钥屈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坝辫,到底是詐尸還是另有隱情篷就,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布近忙,位于F島的核電站竭业,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏及舍。R本人自食惡果不足惜未辆,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锯玛。 院中可真熱鬧咐柜,春花似錦、人聲如沸攘残。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽歼郭。三九已至遗契,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間病曾,已是汗流浹背牍蜂。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留知态,地道東北人捷兰。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像负敏,于是被迫代替她去往敵國和親贡茅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,500評論 2 359

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,759評論 1 92
  • 盒子模型 CSS 在處理網(wǎng)頁的時候會認(rèn)為每個元素都是一個盒子顶考,一個盒子分為以下幾個部分:1赁还、內(nèi)容區(qū):content...
    鬼會畫符閱讀 2,301評論 0 0
  • 什么是盒子呢? CSS處理網(wǎng)頁時驹沿,它認(rèn)為每個元素都包含在一 個不可見的盒子里艘策。為什么要想象成盒子呢?因為如果把所有...
    HDhandi閱讀 393評論 0 0
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,317評論 2 66
  • 一渊季、CSS入門 1朋蔫、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,600評論 0 6