資訊專欄INFORMATION COLUMN
摘要：也能用于內(nèi)聯(lián)元素這是規(guī)范所允許的的和屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效例如和。解決方法把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把更換為。
CSS 邊距屬性定義元素周圍的空間。通過使用多帶帶的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。也可以使用簡寫的外邊距屬性同時(shí)改變所有的外邊距?！猈3School
邊界，元素周圍生成額外的空白區(qū)?！翱瞻讌^(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。——CSS權(quán)威指南
margin屬性為給定元素設(shè)置所有四個(gè)（上下左右）方向的外邊距屬性。這是四個(gè)外邊距屬性設(shè)置的簡寫。四個(gè)外邊距屬性設(shè)置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負(fù)數(shù)。
margin : [| | auto ]{1,4}
指定一個(gè)固定的寬度?？梢詾樨?fù)數(shù)
百分比相對(duì)于該元素的包含塊的寬度（相對(duì)于該塊的百分比）。該值可以為負(fù)數(shù)。
瀏覽器會(huì)自動(dòng)選擇一個(gè)合適的margin來應(yīng)用。它可以用于將一個(gè)塊居中。
margin始終是透明的(父元素設(shè)置背景, margin區(qū)域可見的)
在margin屬性中一共有兩類參考線，top和left的參考線屬于一類，right和bottom的參考線屬于另一類。top和left是以外元素為參考，right和bottom是以元素本身為參考。margin的位移方向是指margin數(shù)值為正值時(shí)候的情形，如果是負(fù)值則位移方向相反。
總結(jié)：
1: margin-top和 margin-left 值得偏移相對(duì)于相鄰元素margin或border; 如果沒有相鄰元素則包含容器的content邊為及基準(zhǔn)
2: margin-bottom和 margin-right 相對(duì)于自身進(jìn)行偏移
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
合并幾種情況 W3Shool CSS外邊距合并
margin 在塊級(jí)元素下, 他的特性可以完全體現(xiàn), 上下左右任你設(shè)定。
margin也能用于內(nèi)聯(lián)元素,這是規(guī)范所允許的 margin的top和bottom屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效, 例如和。
IE6中雙邊距Bug：
發(fā)生場合：當(dāng)給父元素內(nèi)第一個(gè)浮動(dòng)元素設(shè)置margin-left（元素float:left）或margin-right（元素float:right）時(shí)margin加倍。
解決方法：是給浮動(dòng)元素加上display:inline;CSS屬性；或者用padding-left代替margin-left。
原理分析：塊級(jí)對(duì)象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動(dòng)的同時(shí)，還設(shè)置了它的外邊距就會(huì)出現(xiàn)這種情況。也許你會(huì)問：“為什么之后的對(duì)象和第一個(gè)對(duì)象之間就不存在雙倍邊距的Bug”？因?yàn)楦?dòng)都有其相對(duì)應(yīng)的對(duì)象，只有相對(duì)于其父對(duì)象的浮動(dòng)對(duì)象才會(huì)出現(xiàn)這樣的問題。第一個(gè)對(duì)象是相對(duì)父對(duì)象的，而之后對(duì)象是相對(duì)第一個(gè)對(duì)象的，所以之后對(duì)象在設(shè)置后不會(huì)出現(xiàn)問題。為什么display:inline可以解決這個(gè)雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然后，float:left等浮動(dòng)屬性可以讓inline元素haslayout，會(huì)讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個(gè)display inline的元素上。
IE6中浮動(dòng)元素3px間隔Bug：
發(fā)生場合：發(fā)生在一個(gè)元素浮動(dòng)，然后一個(gè)不浮動(dòng)的元素自然上浮與之靠近會(huì)出現(xiàn)的3px的bug。
解決方法：右邊元素也一起浮動(dòng)。
原理分析：IE6瀏覽器缺陷Bug。
IE6/7負(fù)margin隱藏Bug：
發(fā)生場合：當(dāng)給一個(gè)有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)margin時(shí)，超出父元素部分不可見。
解決方法：去掉父元素的hasLayout；或者賦hasLayout給子元素,并添加position:relative;
原理分析：IE6/7獨(dú)有的hasLayout產(chǎn)生問題。
IE6/7下ul/ol標(biāo)記消失bug：
發(fā)生場合：當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫margin-left，前面默認(rèn)的ul/ol標(biāo)記會(huì)消失。
解決方法：給li設(shè)置margin-left，而不是給ul/ol設(shè)置margin-left。
原理分析：IE6/7瀏覽器Bug
IE6/7下margin與absolute元素重疊bug：
發(fā)生場合：雙欄自適應(yīng)布局中，左側(cè)元素absolute絕對(duì)定位，右側(cè)的margin撐開距離定位。在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級(jí)元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法：把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把div更換為span。
原理分析：這是由于IE6/IE7瀏覽器將inline水平標(biāo)簽元素和block水平的標(biāo)簽元素沒有加以區(qū)分一視同仁渲染了。屬于IE6/7瀏覽器渲染Bug。
IE6/7/8下auto margin居中bug：
發(fā)生場合：給block元素設(shè)置margin auto無法居中
解決方法：出現(xiàn)這種bug的原因通常是沒有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個(gè)width能夠解決，但根據(jù)本人親測，加with此種方法是無效的，如果沒有Doctype即使給元素添加width也無法讓block元素居中。
原理分析：缺少Doctype聲明。
IE8下input[button | submit] 設(shè)置margin:auto無法居中
發(fā)生場合：ie8下，如果給像button這樣的標(biāo)簽（如button input[type="button"] input[type="submit"]）設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無法居中。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug。
IE8百分比padding垂直margin bug：
發(fā)生場合：當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時(shí)候，就好像父元素被設(shè)置了margin一樣。
解決方法：給父元素加一個(gè)overflow:hidden/auto。
原理分析：IE8瀏覽器Bug。
海玉 W3C
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1635.html
摘要：當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間基于文檔流，理解定位模式相對(duì)定位，即相對(duì)于元素在文檔流中位置進(jìn)行偏移。絕對(duì)定位，即完全脫離文檔流，相對(duì)于屬性非值的最近父級(jí)元素進(jìn)行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測試?yán)樱篽ttps...
? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。 ? css布局篇已經(jīng)講個(gè)2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動(dòng)等知識(shí)點(diǎn)。今天呢，我們把css布局篇做一個(gè)結(jié)尾，最后...
摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應(yīng)。代碼如下效果如下所示乍一看實(shí)現(xiàn)了三列布局，但是題目要求等高，這個(gè)可就麻煩了。 題目 最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應(yīng)。要求三欄的高度隨最高的一欄展示 解題 step1 常規(guī)拿到這個(gè)面試題，首先想到的是三個(gè)盒子左浮動(dòng)右浮動(dòng)...
摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應(yīng)。代碼如下效果如下所示乍一看實(shí)現(xiàn)了三列布局，但是題目要求等高，這個(gè)可就麻煩了。 題目 最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應(yīng)。要求三欄的高度隨最高的一欄展示 解題 step1 常規(guī)拿到這個(gè)面試題，首先想到的是三個(gè)盒子左浮動(dòng)右浮動(dòng)...
摘要：垂直居中相關(guān)知識(shí)總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在上提問了個(gè)問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識(shí)總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識(shí)之前，在SF上提問了個(gè)問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對(duì)我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對(duì)定...
閱讀 3320·2021-09-02 15:41
閱讀 2842·2021-09-02 09:48
閱讀 1383·2019-08-29 13:27
閱讀 1171·2019-08-26 13:37
閱讀 847·2019-08-26 11:56
閱讀 2493·2019-08-26 10:24
閱讀 1655·2019-08-23 18:07
閱讀 2627·2019-08-23 15:16
