任務9-1

1驻仅、盒模型包括哪些屬性

CSS 框模型

元素框的最內部分是實際的內容谅畅,直接包圍內容的是內邊距。內邊距呈現(xiàn)了元素的背景噪服。內邊距的邊緣是邊框毡泻。邊框以外是外邊距,外邊距默認是透明的粘优,因此不會遮擋其后的任何元素仇味。

外邊距合并

外邊距合并(疊加)是一個相當簡單的概念。但是雹顺,在實踐中對網頁進行布局時丹墨,它會造成許多混淆。
簡單地說无拗,外邊距合并指的是带到,當兩個垂直外邊距相遇時,它們將形成一個外邊距英染。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者揽惹。
當一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并四康。請看下圖:


CSS 外邊距合并實例 1

當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開)搪搏,它們的上和/或下外邊距也會發(fā)生合并。請看下圖:
CSS 外邊距合并實例 2

盡管看上去有些奇怪闪金,但是外邊距甚至可以與自身發(fā)生合并疯溺。
假設有一個空元素论颅,它有外邊距,但是沒有邊框或填充囱嫩。在這種情況下恃疯,上外邊距與下外邊距就碰到了一起,它們會發(fā)生合并:
CSS 外邊距合并實例 3

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

這就是一系列的段落元素占用空間非常小的原因今妄,因為它們的所有外邊距都合并到一起,形成了一個小的外邊距鸳碧。
外邊距合并初看上去可能有點奇怪盾鳞,但是實際上,它是有意義的瞻离。以由幾個段落組成的典型文本頁面為例腾仅。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并套利,后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和推励。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并肉迫,段落之間的上外邊距和下外邊距就合并在一起吹艇,這樣各處的距離就一致了。


CSS 外邊距合并的實際意義

2昂拂、text-align: center的作用是什么,作用在什么元素上抛猖?能讓什么元素水平居中

text-aligen: center屬性作用在塊元素上格侯,能讓塊元素里的文本行內元素财著、圖片居中顯示联四。

Paste_Image.png

3、如果遇到一個屬性想知道兼容性撑教,在哪查看?

http://caniuse.com/

4朝墩、IE 盒模型和W3C盒模型有什么區(qū)別?

1、ie678怪異模式(不添加 doctype)使用 ie 盒模型伟姐,寬度=邊框+padding+內容寬度
2收苏、chrome, ie9+, ie678(添加 doctype) 使用標準盒模型愤兵, 寬度= 內容寬度

5鹿霸、以下代碼的作用?兼容性秆乳?

*{ box-sizing: border-box;}
對于所有元素懦鼠,盒模型變成border钻哩,以邊框作為界限,便于計算肛冶。


2397444-eb0aa2d3dd1825f4.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末街氢,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子睦袖,更是在濱河造成了極大的恐慌珊肃,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扣泊,死亡現(xiàn)場離奇詭異近范,居然都是意外死亡,警方通過查閱死者的電腦和手機延蟹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進店門评矩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人阱飘,你說我怎么就攤上這事斥杜。” “怎么了沥匈?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵蔗喂,是天一觀的道長。 經常有香客問我高帖,道長缰儿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任散址,我火速辦了婚禮乖阵,結果婚禮上,老公的妹妹穿的比我還像新娘预麸。我一直安慰自己瞪浸,他們只是感情好,可當我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布吏祸。 她就那樣靜靜地躺著对蒲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贡翘。 梳的紋絲不亂的頭發(fā)上蹈矮,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機與錄音床估,去河邊找鬼含滴。 笑死,一個胖子當著我的面吹牛丐巫,可吹牛的內容都是我干的谈况。 我是一名探鬼主播勺美,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碑韵!你這毒婦竟也來了赡茸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤祝闻,失蹤者是張志新(化名)和其女友劉穎占卧,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體联喘,經...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡华蜒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了豁遭。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叭喜。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蓖谢,靈堂內的尸體忽然破棺而出捂蕴,到底是詐尸還是另有隱情,我是刑警寧澤闪幽,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布啥辨,位于F島的核電站,受9級特大地震影響盯腌,放射性物質發(fā)生泄漏溉知。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一腕够、第九天 我趴在偏房一處隱蔽的房頂上張望着倾。 院中可真熱鬧,春花似錦燕少、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至材诽,卻和暖如春底挫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背脸侥。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工建邓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人睁枕。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓官边,卻偏偏與公主長得像沸手,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子注簿,可洞房花燭夜當晚...
    茶點故事閱讀 45,585評論 2 359

推薦閱讀更多精彩內容

  • 一契吉、盒模型包括哪些屬性 **1、盒模型是css中元素大小的呈現(xiàn)方式诡渴,每個元素都有盒模型捐晶。它包括元素內容(eleme...
    鴻鵠飛天閱讀 337評論 0 0
  • 1.盒模型包括哪些屬性? 答:從外到內包括外邊距<margin>邊框 填充 內容<content>妄辩。 margin...
    浩天天閱讀 237評論 0 1
  • 回答 盒模型包括哪些屬性惑灵?1 content:內容區(qū)域; padding:內邊距眼耀; border:邊框英支; marg...
    墨燈閱讀 219評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,759評論 1 92
  • 1 . 盒模型包括的屬性 margin:外邊距:包含margin-top畔塔、margin-right潭辈、margin-...
    osborne閱讀 580評論 0 0