(2) 縦のマージンを結(jié)合<\/strong><\/p>\n 2つの縦のボックスが接するとき、縦方向の距離は、上のボックスの下のマージンと下のボックスの上のマージンの大きい方に等しくなります。 <\/p>\n
例 2: <\/p>\n
\r\n\r\n\r\n????\r\n????水平方向的兩個(gè)盒子<\/title>\r\n????<style>\r\n????????*{\r\n????????????margin:0;\r\n????????????padding:0;\r\n????????????border:0;\r\n????????}\r\n????????.top{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????margin-bottom:?100px;\r\n????????????background:?red;\r\n????????}\r\n????????.bottom{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????margin-top:?50px;\r\n????????????background:?green;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\r\n????<p class=\"top\">高為100px,下邊距為100px<\/p>\r\n????<p class=\"bottom\">高為100px,上邊距為50px<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">効果は次のとおりです: <\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/317e3e4cdee475e69aec60cf01f8b4b2-2.png\"><\/p>\n<p style=\"text-align: left;\">このとき、2 つの例の垂直方向は 100 ピクセル以上ではなく、約 100 ピクセル (実際には 100 ピクセル) です。 50=150px; これは正しいです。これは、2 つの垂直ボックスが接するとき、それらの垂直距離は、上のボックスの下マージンと下のボックスの上マージンの大きい方に等しいためです。 <\/p>\n<p style=\"text-align: left;\">もう 1 つの興味深い例は次のとおりです。 margin-top と margin-bottom が同時(shí)に設(shè)定された要素があるが、その內(nèi)容が空であるとします。その場(chǎng)合、2 つのマージン値も重ね合わされ、その値は2 つのうちの最大のものは、2 つのボックスのマージン値を垂直方向に重ね合わせたものに似ています。コードは次のとおりです: <\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>水平方向的兩個(gè)盒子<\/title>\r\n????<style>\r\n????????*{\r\n????????????margin:0;\r\n????????????padding:0;\r\n????????}\r\n?\r\n????????.top{\r\n????????????width:?500px;\r\n????????????height:?100px;\r\n????????????background:?red;\r\n????????}\r\n????????.middle{\r\n????????????margin-top:?100px;\r\n????????????margin-bottom:50px;\r\n????????}\r\n????????.footer{\r\n????????????width:?500px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????}\r\n?\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"top\">上面的p,高100px<\/p>\r\n????<p class=\"middle\"><\/p>\r\n????<p class=\"footer\">下面的p，高100px<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\"> 最終的な効果は次のとおりです: <\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/317e3e4cdee475e69aec60cf01f8b4b2-3.png\"><\/p>\n<p style=\"text-align: left;\">我們發(fā)現(xiàn)這時(shí)在上面的p和在下面的p之間的舉例并不是100+50=150px，而是兩者中的最大者，即100px。<\/p>\n<p style=\"text-align: left;\">那么W3C為什么會(huì)設(shè)定這樣的標(biāo)準(zhǔn)而不設(shè)定和水平方向一樣的標(biāo)準(zhǔn)呢？即margin值的疊加，實(shí)際上這也是有一定的道理的。比如我們需要設(shè)計(jì)一個(gè)由若干個(gè)段落構(gòu)成的一個(gè)頁面。我們需要設(shè)置margin-top和margin-bottom使得第一段和頁面的最上方有一段距離，使得最后一段和最下方有一段距離。下面是不疊加和疊加的效果圖：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/317e3e4cdee475e69aec60cf01f8b4b2-4.png\"><\/p>\n<p style=\"text-align: left;\">我們可以看到左邊的頁面沒有重疊，那么兩個(gè)段落之間的舉例就是最上方的兩倍間距了，而右邊的頁面發(fā)生了重疊，則所有的間距都是相等的?；蛟S這就是這樣設(shè)定標(biāo)準(zhǔn)的目的吧，誰知道呢？<\/p>\n<p style=\"text-align: left;\"><strong>第三部分：margin--在父元素和子元素之間應(yīng)用（重點(diǎn)）<\/strong><\/p>\n<p style=\"text-align: left;\">第二部分介紹了同級(jí)元素之間使用margin，而這一部分將要介紹最有意思的父元素和子元素之間margin的應(yīng)用。這一部分，我們同樣從兩個(gè)方面來討論。一方面是子元素設(shè)置水平方向上的margin值，另一方面是子元素設(shè)置豎直方向的margin值。<\/p>\n<p style=\"text-align: left;\">（1）在子元素中設(shè)置水平方向的margin值<\/p>\n<p style=\"text-align: left;\">我們可以設(shè)置margin-left來控制子元素的左邊框和父元素的左邊框之間的舉例。<\/p>\n<p style=\"text-align: left;\">例3：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{padding:0;?margin:0;?border:0;}\r\n????????.father{\r\n????????????width:?500px;\r\n????????????height:?500px;\r\n????????????background:?red;\r\n????????}\r\n????????.son{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????????margin-left:?100px;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"father\">\r\n????????<p class=\"son\">寬度為100px，margin-left為100px。<\/p>\r\n????<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">我將子元素的margin-left設(shè)置為了100px;效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" style=\"max-width:90%\" style=\"max-width:90%\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/317e3e4cdee475e69aec60cf01f8b4b2-5.png\"><\/p>\n<p style=\"text-align: left;\">即子元素的左邊框和父元素的左邊框之間的距離為100px。與在同級(jí)元素之間設(shè)置margin不同，因?yàn)橥?jí)元素之間的margin不會(huì)考慮到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果會(huì)是什么樣的呢？請(qǐng)看下面一個(gè)例子：<\/p>\n<p style=\"text-align: left;\">例4：<\/p>\n<p style=\"text-align: left;\">下面我們?cè)谏厦胬拥幕A(chǔ)上給父元素添加padding值。<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{padding:0;?margin:0;?border:0;}\r\n????????.father{\r\n????????????width:?500px;\r\n????????????height:?500px;\r\n????????????padding:100px;\r\n????????????background:?red;\r\n????????}\r\n????????.son{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????????margin-left:?100px;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"father\">\r\n????????<p class=\"son\">寬度為100px，margin-left為100px。<\/p>\r\n????<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">上面的代碼給父元素添加了100px的padding值，效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/a7832a4c683024af2d836c39cf9bd1a7-6.png\"><\/p>\n<p style=\"text-align: left;\">我們可以看到子元素舉例上方的距離為100px，因?yàn)樽釉匾欢ㄊ窃诟冈氐腸ontent的部分的，這點(diǎn)毫無疑問。<\/p>\n<p style=\"text-align: left;\">但是經(jīng)過測(cè)量可以發(fā)現(xiàn)子元素的左邊框距離父元素的左邊框之間的距離為200px，因?yàn)槠渲羞€有100px的左padding值，前面的例子因?yàn)槲覜]有設(shè)置padding值，所以沒有觀察出來，因此這就說明了在子元素中設(shè)置margin-left，其值實(shí)際上是子元素的左邊框距離父元素左padding內(nèi)側(cè)的距離。<\/p>\n<p style=\"text-align: left;\">例5：margin-right的使用和margin-left的使用是相似的，我在這里只舉一個(gè)例子。<\/p>\n<p style=\"text-align: left;\">這個(gè)例子在子元素中設(shè)置了margin-right值，如下所示：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{padding:0;?margin:0;?border:0;}\r\n????????.father{\r\n????????????width:?500px;\r\n????????????height:?500px;\r\n????????????padding:100px;\r\n????????????background:?red;\r\n????????}\r\n????????.son{\r\n????????????float:?right;\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????????margin-right:?100px;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"father\">\r\n????????<p class=\"son\">寬度為100px，margin-right為100px。<\/p>\r\n????<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">這個(gè)例子與例4的區(qū)別僅在與子元素的位置不同。效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/a7832a4c683024af2d836c39cf9bd1a7-7.png\"><\/p>\n<p style=\"text-align: left;\">通過這個(gè)例子可以說明margin-right的值是子元素的右邊框和父元素的右padding內(nèi)側(cè)的距離。只是前面的幾個(gè)例子我沒有使用padding，所以無法觀察出來。<\/p>\n<p style=\"text-align: left;\">（2）在子元素中設(shè)置豎直方向的margin值<\/p>\n<p style=\"text-align: left;\">按照前面的經(jīng)驗(yàn)，理論上來說，我們同樣可以通過設(shè)置margin-top的值使得子元素的上邊框和父元素的上padding的內(nèi)側(cè)留有一定的距離。那么我們就試試吧！<\/p>\n<p style=\"text-align: left;\">例6：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{padding:0;?margin:0;?border:0;}\r\n????????.father{\r\n????????????width:?500px;\r\n????????????height:?500px;\r\n????????????background:?red;\r\n????????}\r\n????????.son{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????????margin-top:?100px;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"father\">\r\n????????<p class=\"son\">高度為100px，margin-top為100px。<\/p>\r\n????<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">這個(gè)例子我設(shè)置了margin-top為100px，效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/a7832a4c683024af2d836c39cf9bd1a7-8.png\"><\/p>\n<p style=\"text-align: left;\">這并不是我們想要的效果啊，我們希望子元素的上部距離父元素的上部為100px，可是我們看到的卻是父元素的上部距離瀏覽器頁面的上部有100px的距離，這是為什么呢？哪里出現(xiàn)問題了呢？<\/p>\n<p style=\"text-align: left;\">實(shí)際上這是因?yàn)楫?dāng)父元素沒有設(shè)置padding值以及border值時(shí)，出現(xiàn)了一個(gè)bug--父元素的上方與子元素的上方完全重合在了一起，無法分開。所以才會(huì)導(dǎo)致上述這種父元素和子元素同時(shí)向下的情況。<\/p>\n<p style=\"text-align: left;\">對(duì)于這種問題解決方法有下面幾種：<\/p>\n<ul class=\" list-paddingleft-2\">\n<li><p style=\"text-align: left;\">方法一：給父元素添加padding-top值<\/p><\/li>\n<li><p style=\"text-align: left;\">方法二：給父元素添加border值<\/p><\/li>\n<li><p style=\"text-align: left;\">方法三：給父元素添加屬性overflow:hidden;<\/p><\/li>\n<li><p style=\"text-align: left;\">方法四：給父元素或者子元素聲明浮動(dòng)float<\/p><\/li>\n<li><p style=\"text-align: left;\">方法五：使父元素或子元素聲明為<a href=\"http:\/\/www.miracleart.cn\/code\/6074.html\" target=\"_blank\">絕對(duì)定位<\/a>：position:absolute;<\/p><\/li>\n<li><p style=\"text-align: left;\">方法六：給父元素添加屬性 overflow:auto; positon:relative；（注：此方法為后續(xù)添加，感謝博友@小精靈Pawn提供此方法）<\/p><\/li>\n<\/ul>\n<p style=\"text-align: left;\">方法一：基于例6，在父元素的css代碼中添加padding-top:1px;效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/0ccfb338b8fe6d678c4b327eee5d5aa0-9.png\"><\/p>\n<p style=\"text-align: left;\">?方法的唯一缺點(diǎn)就是增加了1px的誤差。<\/p>\n<p style=\"text-align: left;\">方法二：基于例6，在父元素的css代碼中添加border-top:1px solid transparent;效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/0ccfb338b8fe6d678c4b327eee5d5aa0-10.png\"><\/p>\n<p style=\"text-align:left;\">同樣達(dá)到了效果， 缺點(diǎn)同方法一。<\/p>\n<p style=\"text-align: left;\">方法三：基于例6，在父元素的css代碼中添加overflow:hidden;效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/0ccfb338b8fe6d678c4b327eee5d5aa0-11.png\"><\/p>\n<p style=\"text-align: left;\">同樣達(dá)到了效果，并且沒有任何誤差的存在?？胺Qperfect!!!!<\/p>\n<p style=\"text-align: left;\">方法四：給父元素或者子元素聲明float;基于例6，在子元素css代碼添加float:left;或者在父元素css代碼添加float:left;均達(dá)到效果，這里不再展示相同的圖片。<\/p>\n<p style=\"text-align: left;\">優(yōu)點(diǎn)：沒有像素的誤差。?? 缺點(diǎn)：float有時(shí)是不必要的。<\/p>\n<p style=\"text-align: left;\">方法五：給父元素或者子元素添加position:absolute;屬性。 同樣達(dá)到效果。<\/p>\n<p style=\"text-align: left;\">優(yōu)點(diǎn)：同方法四。? 且只要我們不使用top和left也不會(huì)有任何影響，所以這也是一種不錯(cuò)的方法。<\/p>\n<p style=\"text-align: left;\">方法六：給父元素添加overflow:auto;和position:relative;同樣達(dá)到效果。<\/p>\n<p style=\"text-align: left;\"><strong>第四部分：margin值的單位為%時(shí)的幾種情況<\/strong><\/p>\n<p style=\"text-align: left;\">之前我舉例子時(shí)使用margin，它的值都是以px為單位的，這個(gè)理解起來沒有問題。但是如果margin值是以%為單位呢？實(shí)際上這時(shí)候百分比（%）是相對(duì)于該元素的父元素（容器），對(duì)于同級(jí)元素和父子元素都是如此。（再次感謝 博友@小精靈Pawn 提供的建議?。』诖私ㄗh補(bǔ)充這部分內(nèi)容） 但是在同級(jí)元素中使用豎直方向的margin時(shí)會(huì)出現(xiàn)意想不到的結(jié)果，下面舉例說明。<\/p>\n<p style=\"text-align: left;\">（1）同級(jí)元素在水平方向使用值為%的margin<\/p>\n<p style=\"text-align: left;\">例7：<\/p>\n<pre><head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{\r\n????????????margin:0;\r\n????????????padding:0;\r\n????????}\r\n????????.first{\r\n????????????float:?left;\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background:?green;\r\n????????}\r\n????????.second{\r\n????????????float:?left;\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background:?red;\r\n????????????margin-left:?20%;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"first\">寬為200，無margin<\/p>\r\n????<p class=\"second\">寬為200,margin-left為20%;<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">這個(gè)例子中，設(shè)置兩個(gè)元素向左浮動(dòng)，以便于觀察兩者水平方向的margin。其中左邊p無margin，右邊p的margin-left為20%，效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/4afda3ae098dfd1684f0b60d5616ac9d-12.gif\"><\/p>\n<p style=\"text-align: left;\">從效果圖可以看出兩個(gè)p之間的間距始終為父元素（這里右邊p的父元素即為body，其寬度為瀏覽器寬度）的20%。<\/p>\n<p style=\"text-align: left;\">（2）同級(jí)元素在豎直方向使用值為%的margin<\/p>\n<p style=\"text-align: left;\">根據(jù)例7的啟發(fā)，我們可以猜想，如果在豎直方向上使用margin，且值的單位為%,那么最終兩者之間的距離將是父元素(上例中為body)的百分?jǐn)?shù)。那么究竟是不是這樣呢？看下面的例子。<\/p>\n<p style=\"text-align: left;\">例8<\/p>\n<pre><head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>margin<\/title>\r\n????<style>\r\n????????*{\r\n????????????margin:0;\r\n????????????padding:0;\r\n????????}\r\n????????.first{\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background:?green;\r\n????????}\r\n????????.second{\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background:?red;\r\n????????????margin-top:?10%;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"first\">高為200，無margin<\/p>\r\n????<p class=\"second\">高為200,margin-top為20%;<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">這里設(shè)置上面的p無margin，下面的p的margin-top為10。效果如下：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/0ee5c0d9b67d186cbf21ca067a244297-13.gif\"><\/p>\n<p style=\"text-align: left;\">我們發(fā)現(xiàn)，當(dāng)我在縮小瀏覽器的高度時(shí)，豎直方向上的間距并沒有縮?。。?！ 而當(dāng)我縮小瀏覽器的寬度時(shí)，豎直方向上的距離縮小了?。?！<\/p>\n<p style=\"text-align: left;\">這就說明：統(tǒng)計(jì)元素之間在豎直方向上使用margin，當(dāng)值的單位為%時(shí)，它是相對(duì)于父元素的寬度。<\/p>\n<p style=\"text-align: left;\">那么這里為什么不是如我們所希望的那樣相對(duì)于瀏覽器的高度呢？知乎上有大神是這樣解釋的：<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" style=\"max-width:90%\" style=\"max-width:90%\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/5907097efe49c76cc8fc447782c27c1c-14.png\"><\/p>\n<p style=\"text-align: left;\">（3）父子元素使用值為%的margin<\/p>\n<p style=\"text-align: left;\">對(duì)于父子元素，如果在子元素中使用單位為%margin，那么這個(gè)margin值是相對(duì)于父元素的寬度和高度（注意：這時(shí)的確是相對(duì)于父元素的高度?。┑摹?\/p>\n<p style=\"text-align: left;\">例9?<\/p>\n<p style=\"text-align: left;\">代碼如下：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>Document<\/title>\r\n????<style>\r\n????????*{\r\n????????????margin:0;\r\n????????????padding:0;\r\n????????}\r\n????????.father{\r\n????????????width:?500px;\r\n????????????height:?300px;\r\n????????????background:?red;\r\n????????????overflow:?hidden;\r\n????????}\r\n????????.son{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background:?green;\r\n????????????margin-top:?20%;\r\n????????????margin-left:?20%;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<p class=\"father\">\r\n????????<p class=\"son\"><\/p>\r\n????<\/p>\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: left;\">在這個(gè)例子中，我設(shè)置了margin-left的值為20%，margin-top的值為20%，父元素的width為500px,父元素的height為300px。下面看看效果吧。<\/p>\n<p style=\"text-align: left;\"><img alt=\"\" style=\"max-width:90%\" style=\"max-width:90%\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/0d09889803d6fef7ca5c780770b40238-15.png\"><\/p>\n<p style=\"text-align: left;\">從上圖可以看出子元素的margin-top值最終同樣是相對(duì)與父元素的寬度而非高度。<\/p>\n<p style=\"text-align: left;\"><strong>總結(jié)：<\/strong><\/p>\n<p style=\"text-align: left;\">這篇博文只介紹了margin的其中一部分知識(shí)點(diǎn)，但如果大家讀后能有些許收獲是再好不過的了。由于本人總結(jié)倉促，知識(shí)不足，錯(cuò)誤在所難免，希望大家如果發(fā)現(xiàn)不妥之初能提出意見，我將非常感激。<\/p>\n<p style=\"text-align: left;\">相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！<\/p>\n<p style=\"text-align: left;\">推薦閱讀：<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/www.miracleart.cn\/css-tutorial-389742.html\" target=\"_blank\">CSS3的box-sizing屬性圖文教程<\/a><\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/www.miracleart.cn\/css-tutorial-389740.html\" target=\"_blank\">在CSS邊界線消失如何處理<\/a><\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/www.miracleart.cn\/css-tutorial-389730.html\" target=\"_blank\">三種絕對(duì)定位元素的水平垂直居中的辦法<\/a><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ja/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="コミュニティ" class="head_nava head_nava-template1">コミュニティ</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/article.html" title="記事" class="languagechoosea on">記事</a>
<a href="http://www.miracleart.cn/ja/faq/zt" title="トピックス" class="languagechoosea">トピックス</a>
<a href="http://www.miracleart.cn/ja/wenda.html" title="に質(zhì)問" class="languagechoosea">に質(zhì)問</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="學(xué)ぶ" class="head_nava head_nava-template1_1">學(xué)ぶ</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/course.html" title="コース" class="languagechoosea on">コース</a>
<a href="http://www.miracleart.cn/ja/dic/" title="プログラミング辭典" class="languagechoosea">プログラミング辭典</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="ツールライブラリ" class="head_nava head_nava-template1_2">ツールライブラリ</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/toolset/development-tools" title="開発ツール" class="languagechoosea on">開発ツール</a>
<a href="http://www.miracleart.cn/ja/toolset/website-source-code" title="公式サイト" class="languagechoosea">公式サイト</a>
<a href="http://www.miracleart.cn/ja/toolset/php-libraries" title="PHP ライブラリ" class="languagechoosea">PHP ライブラリ</a>
<a href="http://www.miracleart.cn/ja/toolset/js-special-effects" title="JS特殊効果" class="languagechoosea on">JS特殊効果</a>
<a href="http://www.miracleart.cn/ja/toolset/website-materials" title="サイト素材" class="languagechoosea on">サイト素材</a>
<a href="http://www.miracleart.cn/ja/toolset/extension-plug-ins" title="拡張プラグイン" class="languagechoosea on">拡張プラグイン</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ja/ai" title="AIツール" class="head_nava head_nava-template1_3">AIツール</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="レジャー" class="head_nava head_nava-template1_3">レジャー</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ja/game" title="ゲームのダウンロード" class="languagechoosea on">ゲームのダウンロード</a>
<a href="http://www.miracleart.cn/ja/mobile-game-tutorial/" title="ゲームのチュートリアル" class="languagechoosea">ゲームのチュートリアル</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ja')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="検索" onclick="searchs('ja')"><img src="/static/imghw/find.png" alt="検索"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">日本語<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:;" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ja/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSSチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>CSSのmargin屬性について詳しく解説</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">CSSのmargin屬性について詳しく解説</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ja/member/61021.html" class="author_avatar">
<img class="lazy" data-src="/static/images/user_avatar.jpg" src="/static/imghw/default1.png" alt="php中世界最好的語言">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ja/member/61021.html" class="author_name">php中世界最好的語言</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Mar 22, 2018 pm 04:55 PM</span>
<div id="377j5v51b" class="Articlelist_txts_infos">
<span id="377j5v51b" class="Articlelist_txts_infoss on">css</span>
<span id="377j5v51b" class="Articlelist_txts_infoss ">margin</span>
</div>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p style="text-align: left;">今回はCSSのmargin屬性について詳しく解説します。CSSでmarginを使用する際の<a href="http://www.miracleart.cn/code/10182.html" target="_blank">注意點(diǎn)</a>を?qū)g際に見てみましょう。 </p>
<p style="text-align: left;">マージン屬性は非常に単純な屬性だとずっと思っていましたが、最近プロジェクトの作業(yè)中にいくつかの問題に遭遇し、マージン屬性にはまだいくつかの「落とし穴」があることに気づきました。以下に、マージン屬性の基本的な知識(shí)を紹介します。マージンとそれらの「ピット」。このブログ記事は主に次のパートに分かれています: </p>
<ul class=" list-paddingleft-2">
<li><p style="text-align: left;">margin--基礎(chǔ)知識(shí)</p></li>
<li><p style="text-align: left;">margin--兄弟要素間の応用(非親子関係) </p></li>
<li><p style="text-align: left;">margin--親要素と要素の間子要素間の適用（キーポイント） </p></li>
<li><p style="text-align: left;">margin -- margin 値の単位が % の場(chǎng)合のいくつかの狀況 </p></li>
</ul>
<p style="text-align: left;"><strong>Part 1: margin -- 基礎(chǔ)知識(shí) </strong></p>
<p style="text-align: left;"> margin の基礎(chǔ)知識(shí)を紹介します。 <a href="http://www.miracleart.cn/code/790.html" target="_blank">css ボックス モデル</a> (ボックス モデル) について話すことは避けられないでしょうか。一般的に、CSS ボックス モデルはデザインとレイアウトに使用されます。これは本質(zhì)的には、マージン、ボーダー、パディング、中央のコンテンツを含むボックスです。下の図はボックス モデルです (ここでは W3C 仕様の標(biāo)準(zhǔn)ボックス モデルについてのみ説明します。IE5 および IE6 の奇妙なモードで使用される非標(biāo)準(zhǔn)ボックス モデルについては説明しません): </p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/b5678c0ec7d8826678f9fbf62431a624-0.png" class="lazy" alt=""></p>
<p style="text-align: left;"> 導(dǎo)入したいマージンは最外層にあります。マージン（マージン）は透明である必要があるため、異なるボックスの間に一定のギャップを殘し、美しいレイアウトやその他の効果を?qū)g現(xiàn)するために使用できます。上記のボックス モデルから、マージンがすべての側(cè)面に存在することがわかります。margin-top、<a href="http://www.miracleart.cn/wiki/934.html" target="_blank">margin-right</a>、<a href="http://www.miracleart.cn/wiki/935.html" target="_blank">margin-bottom</a>、および margin-left を使用して、これら 4 つの方向のマージン値を設(shè)定できます。それぞれ。 (注: この部分の知識(shí)は比較的基本的なため、この部分ではこれ以上の紹介は行いません) </p>
<p style="text-align: left;"><strong>パート 2: margin--兄弟要素間の適用 (非親子関係)</strong></p>
<p style="text-align: left;">このパートでは主に紹介します水平方向と垂直方向のマージンを結(jié)合する問題。 </p>
<p style="text-align: left;"><strong> (1) 水平方向のマージンを結(jié)合します </strong></p>
<p style="text-align: left;"> 2 つの水平方向のボックスが接し、それらの間の最終的な距離は、左のボックスの右マージンと右のボックスの右マージンの合計(jì)になります。 </p>
<p style="text-align: left;"> 例 1: </p>
<p style="text-align: left;"> コードは次のとおりです: </p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>水平方向的兩個(gè)盒子</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????????border:0;
????????}
????????body{
????????????font-size:?0;
????????}
????????.left{
????????????width:?100px;
????????????height:?100px;
????????????background:?red;
????????????display:?inline-block;
????????????margin-right:?50px;
????????????font-size:?20px;
????????}
????????.right{
????????????width:?100px;
????????????height:?100px;
????????????background:?yellow;
????????????display:?inline-block;
????????????margin-left:?50px;
????????????font-size:?20px;
????????}
????</style>
</head>
<body>
????<p class="left">寬為100px,右邊距為50px</p>
????<p class="right">寬為100px,左邊距為50px</p>
</body>
</html></pre>
<p style="text-align: left;"> 効果は次のとおりです: </p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/b5678c0ec7d8826678f9fbf62431a624-1.png" class="lazy" alt=""></p>
<p style="text-align: left;"> この時(shí)點(diǎn)で、2 つの間の距離はちょうど 100px です。 </p>
<p style="text-align: left;"><strong><span style="color:#ff0000">追加説明: </span></strong> ご覧のとおり、2 つの p (ブロック要素) を通常のドキュメント フローから外すために、display:inline-block; 屬性も変更しました。本文のフォントサイズ 0 に設(shè)定すると、インラインブロック自體の問題を解決できます。そうしないと、2 つの p の例が 100px より大きくなります。もちろん、float を使用して 2 つの p を同じ行に表示することもできます。 </p>
<p style="text-align: left;"><strong>(2) 縦のマージンを結(jié)合</strong></p>
<p style="text-align: left;"> 2つの縦のボックスが接するとき、縦方向の距離は、上のボックスの下のマージンと下のボックスの上のマージンの大きい方に等しくなります。 </p>
<p style="text-align: left;">例 2: </p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>水平方向的兩個(gè)盒子</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????????border:0;
????????}
????????.top{
????????????width:?100px;
????????????height:?100px;
????????????margin-bottom:?100px;
????????????background:?red;
????????}
????????.bottom{
????????????width:?100px;
????????????height:?100px;
????????????margin-top:?50px;
????????????background:?green;
????????}
????</style>
</head>
<body>
????<p class="top">高為100px,下邊距為100px</p>
????<p class="bottom">高為100px,上邊距為50px</p>
</body>
</html></pre>
<p style="text-align: left;">効果は次のとおりです: </p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/317e3e4cdee475e69aec60cf01f8b4b2-2.png" class="lazy" alt=""></p>
<p style="text-align: left;">このとき、2 つの例の垂直方向は 100 ピクセル以上ではなく、約 100 ピクセル (実際には 100 ピクセル) です。 50=150px; これは正しいです。これは、2 つの垂直ボックスが接するとき、それらの垂直距離は、上のボックスの下マージンと下のボックスの上マージンの大きい方に等しいためです。 </p>
<p style="text-align: left;">もう 1 つの興味深い例は次のとおりです。 margin-top と margin-bottom が同時(shí)に設(shè)定された要素があるが、その內(nèi)容が空であるとします。その場(chǎng)合、2 つのマージン値も重ね合わされ、その値は2 つのうちの最大のものは、2 つのボックスのマージン値を垂直方向に重ね合わせたものに似ています。コードは次のとおりです: </p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>水平方向的兩個(gè)盒子</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
?
????????.top{
????????????width:?500px;
????????????height:?100px;
????????????background:?red;
????????}
????????.middle{
????????????margin-top:?100px;
????????????margin-bottom:50px;
????????}
????????.footer{
????????????width:?500px;
????????????height:?100px;
????????????background:?green;
????????}
?
????</style>
</head>
<body>
????<p class="top">上面的p,高100px</p>
????<p class="middle"></p>
????<p class="footer">下面的p，高100px</p>
</body>
</html></pre>
<p style="text-align: left;"> 最終的な効果は次のとおりです: </p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/317e3e4cdee475e69aec60cf01f8b4b2-3.png" class="lazy" alt=""></p>
<p style="text-align: left;">我們發(fā)現(xiàn)這時(shí)在上面的p和在下面的p之間的舉例并不是100+50=150px，而是兩者中的最大者，即100px。</p>
<p style="text-align: left;">那么W3C為什么會(huì)設(shè)定這樣的標(biāo)準(zhǔn)而不設(shè)定和水平方向一樣的標(biāo)準(zhǔn)呢？即margin值的疊加，實(shí)際上這也是有一定的道理的。比如我們需要設(shè)計(jì)一個(gè)由若干個(gè)段落構(gòu)成的一個(gè)頁面。我們需要設(shè)置margin-top和margin-bottom使得第一段和頁面的最上方有一段距離，使得最后一段和最下方有一段距離。下面是不疊加和疊加的效果圖：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/317e3e4cdee475e69aec60cf01f8b4b2-4.png" class="lazy" alt=""></p>
<p style="text-align: left;">我們可以看到左邊的頁面沒有重疊，那么兩個(gè)段落之間的舉例就是最上方的兩倍間距了，而右邊的頁面發(fā)生了重疊，則所有的間距都是相等的?；蛟S這就是這樣設(shè)定標(biāo)準(zhǔn)的目的吧，誰知道呢？</p>
<p style="text-align: left;"><strong>第三部分：margin--在父元素和子元素之間應(yīng)用（重點(diǎn)）</strong></p>
<p style="text-align: left;">第二部分介紹了同級(jí)元素之間使用margin，而這一部分將要介紹最有意思的父元素和子元素之間margin的應(yīng)用。這一部分，我們同樣從兩個(gè)方面來討論。一方面是子元素設(shè)置水平方向上的margin值，另一方面是子元素設(shè)置豎直方向的margin值。</p>
<p style="text-align: left;">（1）在子元素中設(shè)置水平方向的margin值</p>
<p style="text-align: left;">我們可以設(shè)置margin-left來控制子元素的左邊框和父元素的左邊框之間的舉例。</p>
<p style="text-align: left;">例3：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{padding:0;?margin:0;?border:0;}
????????.father{
????????????width:?500px;
????????????height:?500px;
????????????background:?red;
????????}
????????.son{
????????????width:?100px;
????????????height:?100px;
????????????background:?green;
????????????margin-left:?100px;
????????}
????</style>
</head>
<body>
????<p class="father">
????????<p class="son">寬度為100px，margin-left為100px。</p>
????</p>
</body>
</html></pre>
<p style="text-align: left;">我將子元素的margin-left設(shè)置為了100px;效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/317e3e4cdee475e69aec60cf01f8b4b2-5.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p>
<p style="text-align: left;">即子元素的左邊框和父元素的左邊框之間的距離為100px。與在同級(jí)元素之間設(shè)置margin不同，因?yàn)橥?jí)元素之間的margin不會(huì)考慮到padding,但是在父元素和子元素就不同了，那么如果父元素中如果有padding，效果會(huì)是什么樣的呢？請(qǐng)看下面一個(gè)例子：</p>
<p style="text-align: left;">例4：</p>
<p style="text-align: left;">下面我們?cè)谏厦胬拥幕A(chǔ)上給父元素添加padding值。</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{padding:0;?margin:0;?border:0;}
????????.father{
????????????width:?500px;
????????????height:?500px;
????????????padding:100px;
????????????background:?red;
????????}
????????.son{
????????????width:?100px;
????????????height:?100px;
????????????background:?green;
????????????margin-left:?100px;
????????}
????</style>
</head>
<body>
????<p class="father">
????????<p class="son">寬度為100px，margin-left為100px。</p>
????</p>
</body>
</html></pre>
<p style="text-align: left;">上面的代碼給父元素添加了100px的padding值，效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a7832a4c683024af2d836c39cf9bd1a7-6.png" class="lazy" alt=""></p>
<p style="text-align: left;">我們可以看到子元素舉例上方的距離為100px，因?yàn)樽釉匾欢ㄊ窃诟冈氐腸ontent的部分的，這點(diǎn)毫無疑問。</p>
<p style="text-align: left;">但是經(jīng)過測(cè)量可以發(fā)現(xiàn)子元素的左邊框距離父元素的左邊框之間的距離為200px，因?yàn)槠渲羞€有100px的左padding值，前面的例子因?yàn)槲覜]有設(shè)置padding值，所以沒有觀察出來，因此這就說明了在子元素中設(shè)置margin-left，其值實(shí)際上是子元素的左邊框距離父元素左padding內(nèi)側(cè)的距離。</p>
<p style="text-align: left;">例5：margin-right的使用和margin-left的使用是相似的，我在這里只舉一個(gè)例子。</p>
<p style="text-align: left;">這個(gè)例子在子元素中設(shè)置了margin-right值，如下所示：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{padding:0;?margin:0;?border:0;}
????????.father{
????????????width:?500px;
????????????height:?500px;
????????????padding:100px;
????????????background:?red;
????????}
????????.son{
????????????float:?right;
????????????width:?100px;
????????????height:?100px;
????????????background:?green;
????????????margin-right:?100px;
????????}
????</style>
</head>
<body>
????<p class="father">
????????<p class="son">寬度為100px，margin-right為100px。</p>
????</p>
</body>
</html></pre>
<p style="text-align: left;">這個(gè)例子與例4的區(qū)別僅在與子元素的位置不同。效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a7832a4c683024af2d836c39cf9bd1a7-7.png" class="lazy" alt=""></p>
<p style="text-align: left;">通過這個(gè)例子可以說明margin-right的值是子元素的右邊框和父元素的右padding內(nèi)側(cè)的距離。只是前面的幾個(gè)例子我沒有使用padding，所以無法觀察出來。</p>
<p style="text-align: left;">（2）在子元素中設(shè)置豎直方向的margin值</p>
<p style="text-align: left;">按照前面的經(jīng)驗(yàn)，理論上來說，我們同樣可以通過設(shè)置margin-top的值使得子元素的上邊框和父元素的上padding的內(nèi)側(cè)留有一定的距離。那么我們就試試吧！</p>
<p style="text-align: left;">例6：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{padding:0;?margin:0;?border:0;}
????????.father{
????????????width:?500px;
????????????height:?500px;
????????????background:?red;
????????}
????????.son{
????????????width:?100px;
????????????height:?100px;
????????????background:?green;
????????????margin-top:?100px;
????????}
????</style>
</head>
<body>
????<p class="father">
????????<p class="son">高度為100px，margin-top為100px。</p>
????</p>
</body>
</html></pre>
<p style="text-align: left;">這個(gè)例子我設(shè)置了margin-top為100px，效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a7832a4c683024af2d836c39cf9bd1a7-8.png" class="lazy" alt=""></p>
<p style="text-align: left;">這并不是我們想要的效果啊，我們希望子元素的上部距離父元素的上部為100px，可是我們看到的卻是父元素的上部距離瀏覽器頁面的上部有100px的距離，這是為什么呢？哪里出現(xiàn)問題了呢？</p>
<p style="text-align: left;">實(shí)際上這是因?yàn)楫?dāng)父元素沒有設(shè)置padding值以及border值時(shí)，出現(xiàn)了一個(gè)bug--父元素的上方與子元素的上方完全重合在了一起，無法分開。所以才會(huì)導(dǎo)致上述這種父元素和子元素同時(shí)向下的情況。</p>
<p style="text-align: left;">對(duì)于這種問題解決方法有下面幾種：</p>
<ul class=" list-paddingleft-2">
<li><p style="text-align: left;">方法一：給父元素添加padding-top值</p></li>
<li><p style="text-align: left;">方法二：給父元素添加border值</p></li>
<li><p style="text-align: left;">方法三：給父元素添加屬性overflow:hidden;</p></li>
<li><p style="text-align: left;">方法四：給父元素或者子元素聲明浮動(dòng)float</p></li>
<li><p style="text-align: left;">方法五：使父元素或子元素聲明為<a href="http://www.miracleart.cn/code/6074.html" target="_blank">絕對(duì)定位</a>：position:absolute;</p></li>
<li><p style="text-align: left;">方法六：給父元素添加屬性 overflow:auto; positon:relative；（注：此方法為后續(xù)添加，感謝博友@小精靈Pawn提供此方法）</p></li>
</ul>
<p style="text-align: left;">方法一：基于例6，在父元素的css代碼中添加padding-top:1px;效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0ccfb338b8fe6d678c4b327eee5d5aa0-9.png" class="lazy" alt=""></p>
<p style="text-align: left;">?方法的唯一缺點(diǎn)就是增加了1px的誤差。</p>
<p style="text-align: left;">方法二：基于例6，在父元素的css代碼中添加border-top:1px solid transparent;效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0ccfb338b8fe6d678c4b327eee5d5aa0-10.png" class="lazy" alt=""></p>
<p style="text-align:left;">同樣達(dá)到了效果， 缺點(diǎn)同方法一。</p>
<p style="text-align: left;">方法三：基于例6，在父元素的css代碼中添加overflow:hidden;效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0ccfb338b8fe6d678c4b327eee5d5aa0-11.png" class="lazy" alt=""></p>
<p style="text-align: left;">同樣達(dá)到了效果，并且沒有任何誤差的存在。堪稱perfect!!!!</p>
<p style="text-align: left;">方法四：給父元素或者子元素聲明float;基于例6，在子元素css代碼添加float:left;或者在父元素css代碼添加float:left;均達(dá)到效果，這里不再展示相同的圖片。</p>
<p style="text-align: left;">優(yōu)點(diǎn)：沒有像素的誤差。?? 缺點(diǎn)：float有時(shí)是不必要的。</p>
<p style="text-align: left;">方法五：給父元素或者子元素添加position:absolute;屬性。 同樣達(dá)到效果。</p>
<p style="text-align: left;">優(yōu)點(diǎn)：同方法四。? 且只要我們不使用top和left也不會(huì)有任何影響，所以這也是一種不錯(cuò)的方法。</p>
<p style="text-align: left;">方法六：給父元素添加overflow:auto;和position:relative;同樣達(dá)到效果。</p>
<p style="text-align: left;"><strong>第四部分：margin值的單位為%時(shí)的幾種情況</strong></p>
<p style="text-align: left;">之前我舉例子時(shí)使用margin，它的值都是以px為單位的，這個(gè)理解起來沒有問題。但是如果margin值是以%為單位呢？實(shí)際上這時(shí)候百分比（%）是相對(duì)于該元素的父元素（容器），對(duì)于同級(jí)元素和父子元素都是如此。（再次感謝 博友@小精靈Pawn 提供的建議??！基于此建議補(bǔ)充這部分內(nèi)容） 但是在同級(jí)元素中使用豎直方向的margin時(shí)會(huì)出現(xiàn)意想不到的結(jié)果，下面舉例說明。</p>
<p style="text-align: left;">（1）同級(jí)元素在水平方向使用值為%的margin</p>
<p style="text-align: left;">例7：</p>
<pre class="brush:php;toolbar:false"><head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????.first{
????????????float:?left;
????????????width:?200px;
????????????height:?200px;
????????????background:?green;
????????}
????????.second{
????????????float:?left;
????????????width:?200px;
????????????height:?200px;
????????????background:?red;
????????????margin-left:?20%;
????????}
????</style>
</head>
<body>
????<p class="first">寬為200，無margin</p>
????<p class="second">寬為200,margin-left為20%;</p>
</body>
</html></pre>
<p style="text-align: left;">這個(gè)例子中，設(shè)置兩個(gè)元素向左浮動(dòng)，以便于觀察兩者水平方向的margin。其中左邊p無margin，右邊p的margin-left為20%，效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/4afda3ae098dfd1684f0b60d5616ac9d-12.gif" class="lazy" alt=""></p>
<p style="text-align: left;">從效果圖可以看出兩個(gè)p之間的間距始終為父元素（這里右邊p的父元素即為body，其寬度為瀏覽器寬度）的20%。</p>
<p style="text-align: left;">（2）同級(jí)元素在豎直方向使用值為%的margin</p>
<p style="text-align: left;">根據(jù)例7的啟發(fā)，我們可以猜想，如果在豎直方向上使用margin，且值的單位為%,那么最終兩者之間的距離將是父元素(上例中為body)的百分?jǐn)?shù)。那么究竟是不是這樣呢？看下面的例子。</p>
<p style="text-align: left;">例8</p>
<pre class="brush:php;toolbar:false"><head>
????<meta charset="UTF-8">
????<title>margin</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????.first{
????????????width:?200px;
????????????height:?200px;
????????????background:?green;
????????}
????????.second{
????????????width:?200px;
????????????height:?200px;
????????????background:?red;
????????????margin-top:?10%;
????????}
????</style>
</head>
<body>
????<p class="first">高為200，無margin</p>
????<p class="second">高為200,margin-top為20%;</p>
</body>
</html></pre>
<p style="text-align: left;">這里設(shè)置上面的p無margin，下面的p的margin-top為10。效果如下：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0ee5c0d9b67d186cbf21ca067a244297-13.gif" class="lazy" alt=""></p>
<p style="text-align: left;">我們發(fā)現(xiàn)，當(dāng)我在縮小瀏覽器的高度時(shí)，豎直方向上的間距并沒有縮?。。。?而當(dāng)我縮小瀏覽器的寬度時(shí)，豎直方向上的距離縮小了！??！</p>
<p style="text-align: left;">這就說明：統(tǒng)計(jì)元素之間在豎直方向上使用margin，當(dāng)值的單位為%時(shí)，它是相對(duì)于父元素的寬度。</p>
<p style="text-align: left;">那么這里為什么不是如我們所希望的那樣相對(duì)于瀏覽器的高度呢？知乎上有大神是這樣解釋的：</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/5907097efe49c76cc8fc447782c27c1c-14.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p>
<p style="text-align: left;">（3）父子元素使用值為%的margin</p>
<p style="text-align: left;">對(duì)于父子元素，如果在子元素中使用單位為%margin，那么這個(gè)margin值是相對(duì)于父元素的寬度和高度（注意：這時(shí)的確是相對(duì)于父元素的高度?。┑摹?/p>
<p style="text-align: left;">例9?</p>
<p style="text-align: left;">代碼如下：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????.father{
????????????width:?500px;
????????????height:?300px;
????????????background:?red;
????????????overflow:?hidden;
????????}
????????.son{
????????????width:?100px;
????????????height:?100px;
????????????background:?green;
????????????margin-top:?20%;
????????????margin-left:?20%;
????????}
????</style>
</head>
<body>
????<p class="father">
????????<p class="son"></p>
????</p>
</body>
</html></pre>
<p style="text-align: left;">在這個(gè)例子中，我設(shè)置了margin-left的值為20%，margin-top的值為20%，父元素的width為500px,父元素的height為300px。下面看看效果吧。</p>
<p style="text-align: left;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/0d09889803d6fef7ca5c780770b40238-15.png" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p>
<p style="text-align: left;">從上圖可以看出子元素的margin-top值最終同樣是相對(duì)與父元素的寬度而非高度。</p>
<p style="text-align: left;"><strong>總結(jié)：</strong></p>
<p style="text-align: left;">這篇博文只介紹了margin的其中一部分知識(shí)點(diǎn)，但如果大家讀后能有些許收獲是再好不過的了。由于本人總結(jié)倉促，知識(shí)不足，錯(cuò)誤在所難免，希望大家如果發(fā)現(xiàn)不妥之初能提出意見，我將非常感激。</p>
<p style="text-align: left;">相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！</p>
<p style="text-align: left;">推薦閱讀：</p>
<p style="text-align: left;"><a href="http://www.miracleart.cn/css-tutorial-389742.html" target="_blank">CSS3的box-sizing屬性圖文教程</a></p>
<p style="text-align: left;"><a href="http://www.miracleart.cn/css-tutorial-389740.html" target="_blank">在CSS邊界線消失如何處理</a></p>
<p style="text-align: left;"><a href="http://www.miracleart.cn/css-tutorial-389730.html" target="_blank">三種絕對(duì)定位元素的水平垂直居中的辦法</a></p><p>以上がCSSのmargin屬性について詳しく解説の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div>
<div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットAIツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>脫衣畫像を無料で</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード寫真を作成する AI 搭載アプリ</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>寫真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI衣類リムーバー</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>人気の記事</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796832397.html" title="グラスワンダービルドガイド|ウマゴサメはかなりダービーです" class="phpgenera_Details_mainR4_bottom_title">グラスワンダービルドガイド|ウマゴサメはかなりダービーです</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796833110.html" title="<??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title"><??>：森の99泊 - すべてのバッジとそれらのロックを解除する方法</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831605.html" title="Uma Musume Pretty Derby Bannerスケジュール（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Bannerスケジュール（2025年7月）</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796836699.html" title="船と墓のためのRimworld Odyssey溫度ガイド" class="phpgenera_Details_mainR4_bottom_title">船と墓のためのRimworld Odyssey溫度ガイド</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/1796831905.html" title="Windowsセキュリティは空白であるか、オプションを表示しません" class="phpgenera_Details_mainR4_bottom_title">Windowsセキュリティは空白であるか、オプションを表示しません</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/article.html">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>ホットツール</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title">
<h3>メモ帳++7.3.1</h3>
</a>
<p>使いやすく無料のコードエディター</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國語版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國語版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 中國語版</h3>
</a>
<p>中國語版、とても使いやすい</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title">
<h3>ゼンドスタジオ 13.0.1</h3>
</a>
<p>強(qiáng)力な PHP 統(tǒng)合開発環(huán)境</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神レベルのコード編集ソフト（SublimeText3）</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/ai">もっと見る</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>ホットトピック</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1601</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1502</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>276</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ja/faq/zt">もっと見る</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796848693.html" title="CSSのテキスト色を変更する方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175356154230616.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSのテキスト色を変更する方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796848693.html" title="CSSのテキスト色を変更する方法は？" class="phphistorical_Version2_mids_title">CSSのテキスト色を変更する方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 27, 2025 am 04:25 AM</span>
<p class="Articlelist_txts_p">CSSのテキスト色を変更するには、色屬性を使用する必要があります。 1。色屬性を使用して、テキストの前景色を設(shè)定し、色名（赤など）、16進(jìn)コード（＃FF0000など）、RGB値（RGB（255,0,0）など）、HSL値（HSL（0,100％、50％）など）、RGBAまたはHSLAを使用してRGBAまたはHSLA 2. H1からH6タイトル、パラグラフP、リンクAなどのテキストを含む任意の要素に色を適用できます（a：link、a：a：a：hover、a：active、div、spanなどの異なる狀態(tài)の色設(shè)定に注意してください）。 3。最も</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796848423.html" title="未使用のCSSをパージする方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175355565011578.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="未使用のCSSをパージする方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796848423.html" title="未使用のCSSをパージする方法は？" class="phphistorical_Version2_mids_title">未使用のCSSをパージする方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 27, 2025 am 02:47 AM</span>
<p class="Articlelist_txts_p">useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796848607.html" title="スタッキングコンテキストとは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175355972029011.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="スタッキングコンテキストとは何ですか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796848607.html" title="スタッキングコンテキストとは何ですか？" class="phphistorical_Version2_mids_title">スタッキングコンテキストとは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 27, 2025 am 03:55 AM</span>
<p class="Articlelist_txts_p">astackingcontextisaself-ontainedlayerincsSthatsthez-Orderofoverlappingelements、wherenestedcontextsrestrictz-indexteractions; itiscreated bypropertieslikez-indexonpositionedements、Opacity</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796848690.html" title="さまざまなCSSユニットとそれらをいつ使用するかを説明してください" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175356147133225.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="さまざまなCSSユニットとそれらをいつ使用するかを説明してください" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796848690.html" title="さまざまなCSSユニットとそれらをいつ使用するかを説明してください" class="phphistorical_Version2_mids_title">さまざまなCSSユニットとそれらをいつ使用するかを説明してください</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 27, 2025 am 04:24 AM</span>
<p class="Articlelist_txts_p">Web開発では、CSSユニットの選択は、設(shè)計(jì)要件とレスポンシブパフォーマンスに依存します。 1。ピクセル（PX）は、境界線やアイコンなどのサイズを修正するために使用されますが、応答性のある設(shè)計(jì)を助長しません。 2。パーセント（％）は、レイアウトのストリーミングに適した親コンテナに従って調(diào)整されますが、コンテキスト依存性に注意します。 3.EMは現(xiàn)在のフォントサイズに基づいており、REMは弾性フォントと統(tǒng)一されたテーマコントロールに適したルート要素フォントに基づいています。 4。ビューポートユニット（VW/VH/VMIN/VMAX）は、畫面サイズに従って調(diào)整され、フルスクリーン要素と動(dòng)的UIに適しています。 5。自動(dòng)、継承、初期、およびその他の値を使用して、スタイルを自動(dòng)的に計(jì)算、継承、またはリセットするために使用されます。これは、柔軟にレイアウトとスタイル管理に役立ちます。これらのユニットを合理的に使用すると、ページの柔軟性と応答性が向上する可能性があります。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796855212.html" title="CSSバックドロップフィルタープロパティを使用する方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175410786011157.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSバックドロップフィルタープロパティを使用する方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796855212.html" title="CSSバックドロップフィルタープロパティを使用する方法は？" class="phphistorical_Version2_mids_title">CSSバックドロップフィルタープロパティを使用する方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Aug 02, 2025 pm 12:11 PM</span>
<p class="Articlelist_txts_p">バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構(gòu)文を使用して、つや消しガラス効果を?qū)g現(xiàn)します。 2。ぼやけ、明るさ、コントラストなどの複數(shù)のフィルター関數(shù)をサポートし、重ねることができます。 3.ガラスカードの設(shè)計(jì)でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優(yōu)れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描畫を避けてください。この屬性は、要素の背後にコンテンツがある場(chǎng)合にのみ有効になります。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796850497.html" title="CSSのリンクをスタイリングする方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175373430151560.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSのリンクをスタイリングする方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796850497.html" title="CSSのリンクをスタイリングする方法は？" class="phphistorical_Version2_mids_title">CSSのリンクをスタイリングする方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 29, 2025 am 04:25 AM</span>
<p class="Articlelist_txts_p">リンクのスタイルは、擬似クラスを通して異なる狀態(tài)を區(qū)別する必要があります。 1。リンクを使用して、到達(dá)していないリンクスタイルを設(shè)定します。2。a：アクセスリンクを設(shè)定するために訪問、3。a：ホバー効果を設(shè)定するためにホバー、4。a：クリック時(shí)間スタイルを設(shè)定するためにアクティブ、5。a：フォーカスはキーボードのアクセシビリティを保証し、常にスタイルの競合を回避するためにLVHA注文に従ってください。パディング、カーソル：ポインター、およびフォーカスの概要を保持またはカスタマイズすることにより、ユーザビリティとアクセシビリティを向上させることができます。また、ボーダーボトムまたはアニメーションのアンダースコアを使用して、リンクがすべての州で優(yōu)れたユーザーエクスペリエンスとアクセシビリティを備えていることを確認(rèn)することもできます。</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796848493.html" title="CSSにテキストを集中させる方法は？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175355736187664.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSSにテキストを集中させる方法は？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796848493.html" title="CSSにテキストを集中させる方法は？" class="phphistorical_Version2_mids_title">CSSにテキストを集中させる方法は？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 27, 2025 am 03:16 AM</span>
<p class="Articlelist_txts_p">テキストアリグイン：センターを使用して、テキストの水平センタリングを?qū)g現(xiàn)します。 2。FlexBoxのAlign-Items：Center and Justify-Content：Center：vertical and Horizontal Centeringを?qū)g現(xiàn)する。 3.シングルラインテキストは、コンテナの高さに等しいライン高さを設(shè)定することにより、垂直に中心にすることができます。 4。絶対位置要素を上部と組み合わせることができます：50％、左：50％、変換：翻訳（-50％、-50％）。 5。CSSGRIDの場(chǎng)所 - 項(xiàng)目：センターは、同時(shí)にデュアル軸センタリングを?qū)g現(xiàn)することもできます。最新のレイアウトで最初にFlexBoxまたはグリッドを使用することをお?jiǎng)幛幛筏蓼埂?/p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ja/faq/1796852960.html" title="ユーザーエージェントスタイルシートとは何ですか？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175392930127475.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ユーザーエージェントスタイルシートとは何ですか？" />
</a>
<a href="http://www.miracleart.cn/ja/faq/1796852960.html" title="ユーザーエージェントスタイルシートとは何ですか？" class="phphistorical_Version2_mids_title">ユーザーエージェントスタイルシートとは何ですか？</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 31, 2025 am 10:35 AM</span>
<p class="Articlelist_txts_p">ユーザーエージェントスタイルシートは、カスタムスタイルを追加していないHTML要素がまだ基本的な読み取り可能であることを確認(rèn)するために、ブラウザーが自動(dòng)的に適用するデフォルトのCSSスタイルです。それらはページの最初の外観に影響しますが、ブラウザには違いがあり、一貫性のないディスプレイにつながる可能性があります。開発者は、多くの場(chǎng)合、スタイルをリセットまたは標(biāo)準(zhǔn)化することにより、この問題を解決します。 Developer ToolsのComputeまたはStyleパネルを使用して、デフォルトのスタイルを表示します。一般的なカバレッジ操作には、內(nèi)側(cè)および外側(cè)のマージンのクリア、リンクのアンダースコアの変更、タイトルサイズの調(diào)整、統(tǒng)一ボタンスタイルが含まれます。ユーザーエージェントスタイルを理解することで、クロスブラウザーの一貫性を改善し、正確なレイアウト制御を可能にすることができます。</p>
</div>
</div>
<a href="http://www.miracleart.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長を支援します！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/ja/about/us.html">私たちについて</a>
<a href="http://www.miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a>
<a href="http://www.miracleart.cn/ja/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="z8rak" class="pl_css_ganrao" style="display: none;"><strong id="z8rak"></strong><nav id="z8rak"><samp id="z8rak"><tbody id="z8rak"></tbody></samp></nav><delect id="z8rak"><small id="z8rak"></small></delect><tbody id="z8rak"></tbody><th id="z8rak"><dl id="z8rak"></dl></th><small id="z8rak"></small><label id="z8rak"></label><abbr id="z8rak"><div id="z8rak"></div></abbr><dl id="z8rak"><button id="z8rak"><source id="z8rak"><optgroup id="z8rak"></optgroup></source></button></dl><dfn id="z8rak"></dfn><optgroup id="z8rak"></optgroup><sup id="z8rak"><strong id="z8rak"></strong></sup><dfn id="z8rak"><em id="z8rak"><sub id="z8rak"></sub></em></dfn><acronym id="z8rak"><sup id="z8rak"><button id="z8rak"><source id="z8rak"></source></button></sup></acronym><li id="z8rak"><legend id="z8rak"></legend></li><optgroup id="z8rak"></optgroup><dl id="z8rak"></dl><blockquote id="z8rak"><style id="z8rak"><delect id="z8rak"><cite id="z8rak"></cite></delect></style></blockquote><object id="z8rak"></object><em id="z8rak"></em><tr id="z8rak"></tr><var id="z8rak"></var><wbr id="z8rak"></wbr><optgroup id="z8rak"><td id="z8rak"><form id="z8rak"></form></td></optgroup><strike id="z8rak"></strike><i id="z8rak"><del id="z8rak"></del></i><fieldset id="z8rak"><center id="z8rak"><label id="z8rak"></label></center></fieldset><optgroup id="z8rak"></optgroup><optgroup id="z8rak"></optgroup><thead id="z8rak"></thead><small id="z8rak"><progress id="z8rak"></progress></small><strong id="z8rak"></strong><button id="z8rak"><dl id="z8rak"><button id="z8rak"></button></dl></button><ul id="z8rak"><code id="z8rak"><menuitem id="z8rak"><code id="z8rak"></code></menuitem></code></ul><address id="z8rak"></address><abbr id="z8rak"></abbr><strong id="z8rak"></strong><samp id="z8rak"><strong id="z8rak"><output id="z8rak"><fieldset id="z8rak"></fieldset></output></strong></samp><pre id="z8rak"></pre><menuitem id="z8rak"><code id="z8rak"><acronym id="z8rak"><sup id="z8rak"></sup></acronym></code></menuitem><s id="z8rak"><kbd id="z8rak"><thead id="z8rak"></thead></kbd></s><strong id="z8rak"><mark id="z8rak"><listing id="z8rak"></listing></mark></strong><form id="z8rak"></form><span id="z8rak"></span><u id="z8rak"></u><optgroup id="z8rak"></optgroup><samp id="z8rak"><tbody id="z8rak"><output id="z8rak"></output></tbody></samp><fieldset id="z8rak"></fieldset><ruby id="z8rak"></ruby><optgroup id="z8rak"></optgroup><blockquote id="z8rak"></blockquote><sup id="z8rak"></sup><bdo id="z8rak"></bdo><th id="z8rak"></th><input id="z8rak"><xmp id="z8rak"><bdo id="z8rak"></bdo></xmp></input><delect id="z8rak"><style id="z8rak"></style></delect><table id="z8rak"><wbr id="z8rak"><label id="z8rak"></label></wbr></table><cite id="z8rak"><ruby id="z8rak"><dl id="z8rak"><sup id="z8rak"></sup></dl></ruby></cite><strike id="z8rak"><tr id="z8rak"></tr></strike><delect id="z8rak"></delect><strike id="z8rak"><th id="z8rak"></th></strike><small id="z8rak"></small><tr id="z8rak"><noframes id="z8rak"><span id="z8rak"></span></noframes></tr><address id="z8rak"><u id="z8rak"></u></address><code id="z8rak"><menuitem id="z8rak"><code id="z8rak"><acronym id="z8rak"></acronym></code></menuitem></code><th id="z8rak"><track id="z8rak"><ol id="z8rak"><pre id="z8rak"></pre></ol></track></th><strong id="z8rak"></strong><button id="z8rak"></button><table id="z8rak"></table><button id="z8rak"></button><ul id="z8rak"></ul><menuitem id="z8rak"></menuitem><s id="z8rak"><b id="z8rak"><s id="z8rak"><kbd id="z8rak"></kbd></s></b></s><small id="z8rak"><pre id="z8rak"><cite id="z8rak"></cite></pre></small><samp id="z8rak"></samp><input id="z8rak"></input><source id="z8rak"></source><abbr id="z8rak"></abbr><s id="z8rak"></s><kbd id="z8rak"><strong id="z8rak"></strong></kbd><cite id="z8rak"><ruby id="z8rak"><dl id="z8rak"><button id="z8rak"></button></dl></ruby></cite><legend id="z8rak"></legend><ul id="z8rak"></ul><optgroup id="z8rak"></optgroup><strike id="z8rak"></strike><nav id="z8rak"><thead id="z8rak"><input id="z8rak"><del id="z8rak"></del></input></thead></nav><style id="z8rak"></style><progress id="z8rak"><small id="z8rak"><pre id="z8rak"></pre></small></progress><s id="z8rak"></s><delect id="z8rak"><small id="z8rak"><tfoot id="z8rak"></tfoot></small></delect><tbody id="z8rak"></tbody><thead id="z8rak"></thead><table id="z8rak"></table><menu id="z8rak"><font id="z8rak"></font></menu><dfn id="z8rak"><listing id="z8rak"><dfn id="z8rak"></dfn></listing></dfn><tr id="z8rak"><cite id="z8rak"><ruby id="z8rak"><dl id="z8rak"></dl></ruby></cite></tr><u id="z8rak"></u><em id="z8rak"></em><optgroup id="z8rak"><xmp id="z8rak"><bdo id="z8rak"></bdo></xmp></optgroup><option id="z8rak"><object id="z8rak"><tt id="z8rak"></tt></object></option><abbr id="z8rak"></abbr><tbody id="z8rak"></tbody><acronym id="z8rak"><sup id="z8rak"><thead id="z8rak"><input id="z8rak"></input></thead></sup></acronym><button id="z8rak"><input id="z8rak"><dfn id="z8rak"></dfn></input></button><sup id="z8rak"><strong id="z8rak"></strong></sup><dl id="z8rak"></dl><samp id="z8rak"></samp><s id="z8rak"><b id="z8rak"></b></s><dl id="z8rak"><ruby id="z8rak"><tbody id="z8rak"></tbody></ruby></dl><abbr id="z8rak"></abbr><abbr id="z8rak"></abbr><tbody id="z8rak"><var id="z8rak"><form id="z8rak"><object id="z8rak"></object></form></var></tbody><menuitem id="z8rak"></menuitem><optgroup id="z8rak"><blockquote id="z8rak"><object id="z8rak"></object></blockquote></optgroup><optgroup id="z8rak"><td id="z8rak"><form id="z8rak"></form></td></optgroup><track id="z8rak"></track><label id="z8rak"></label><span id="z8rak"></span><delect id="z8rak"></delect><thead id="z8rak"><input id="z8rak"><del id="z8rak"><i id="z8rak"></i></del></input></thead><menuitem id="z8rak"></menuitem><listing id="z8rak"></listing><meter id="z8rak"><th id="z8rak"></th></meter><output id="z8rak"><fieldset id="z8rak"><center id="z8rak"><object id="z8rak"></object></center></fieldset></output><s id="z8rak"><samp id="z8rak"><i id="z8rak"></i></samp></s><ul id="z8rak"></ul><dfn id="z8rak"><em id="z8rak"><sub id="z8rak"></sub></em></dfn><ul id="z8rak"><strike id="z8rak"><tbody id="z8rak"><strike id="z8rak"></strike></tbody></strike></ul><rt id="z8rak"><delect id="z8rak"><style id="z8rak"></style></delect></rt><fieldset id="z8rak"><center id="z8rak"><label id="z8rak"></label></center></fieldset><small id="z8rak"></small><s id="z8rak"></s><menu id="z8rak"><thead id="z8rak"><abbr id="z8rak"></abbr></thead></menu><tbody id="z8rak"></tbody><listing id="z8rak"></listing><label id="z8rak"></label><blockquote id="z8rak"></blockquote><menu id="z8rak"></menu><s id="z8rak"><kbd id="z8rak"><dd id="z8rak"></dd></kbd></s><wbr id="z8rak"><u id="z8rak"><wbr id="z8rak"><ul id="z8rak"></ul></wbr></u></wbr><tbody id="z8rak"><strike id="z8rak"><var id="z8rak"></var></strike></tbody><thead id="z8rak"><abbr id="z8rak"><tfoot id="z8rak"></tfoot></abbr></thead><s id="z8rak"></s><video id="z8rak"></video><menuitem id="z8rak"><code id="z8rak"><acronym id="z8rak"><nav id="z8rak"></nav></acronym></code></menuitem><thead id="z8rak"><abbr id="z8rak"><fieldset id="z8rak"><option id="z8rak"></option></fieldset></abbr></thead><strong id="z8rak"></strong><wbr id="z8rak"></wbr><delect id="z8rak"></delect><noframes id="z8rak"><span id="z8rak"><noframes id="z8rak"></noframes></span></noframes></div>
</html>
![\"\"](\"https:\/\/img.php.cn\/upload\/article\/000\/061\/021\/b5678c0ec7d8826678f9fbf62431a624-1.png\")
<\/p>\n