1驻仅、盒模型包括哪些屬性
元素框的最內部分是實際的內容谅畅,直接包圍內容的是內邊距。內邊距呈現(xiàn)了元素的背景噪服。內邊距的邊緣是邊框毡泻。邊框以外是外邊距,外邊距默認是透明的粘优,因此不會遮擋其后的任何元素仇味。
外邊距合并
外邊距合并(疊加)是一個相當簡單的概念。但是雹顺,在實踐中對網頁進行布局時丹墨,它會造成許多混淆。
簡單地說无拗,外邊距合并指的是带到,當兩個垂直外邊距相遇時,它們將形成一個外邊距英染。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者揽惹。
當一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并四康。請看下圖:
當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開)搪搏,它們的上和/或下外邊距也會發(fā)生合并。請看下圖:
盡管看上去有些奇怪闪金,但是外邊距甚至可以與自身發(fā)生合并疯溺。
假設有一個空元素论颅,它有外邊距,但是沒有邊框或填充囱嫩。在這種情況下恃疯,上外邊距與下外邊距就碰到了一起,它們會發(fā)生合并:
如果這個外邊距遇到另一個元素的外邊距墨闲,它還會發(fā)生合并:
這就是一系列的段落元素占用空間非常小的原因今妄,因為它們的所有外邊距都合并到一起,形成了一個小的外邊距鸳碧。
外邊距合并初看上去可能有點奇怪盾鳞,但是實際上,它是有意義的瞻离。以由幾個段落組成的典型文本頁面為例腾仅。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并套利,后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和推励。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并肉迫,段落之間的上外邊距和下外邊距就合并在一起吹艇,這樣各處的距離就一致了。
2昂拂、text-align: center的作用是什么,作用在什么元素上抛猖?能讓什么元素水平居中
text-aligen: center屬性作用在塊元素上格侯,能讓塊元素里的文本、行內元素财著、圖片居中顯示联四。
3、如果遇到一個屬性想知道兼容性撑教,在哪查看?
4朝墩、IE 盒模型和W3C盒模型有什么區(qū)別?
1、ie678怪異模式(不添加 doctype)使用 ie 盒模型伟姐,寬度=邊框+padding+內容寬度
2收苏、chrome, ie9+, ie678(添加 doctype) 使用標準盒模型愤兵, 寬度= 內容寬度
5鹿霸、以下代碼的作用?兼容性秆乳?
*{ box-sizing: border-box;}
對于所有元素懦鼠,盒模型變成border钻哩,以邊框作為界限,便于計算肛冶。