Css html完全流血和集中

我想從頭開始學習HTML/CSS，並已開始一個小項目。我在這裏研究了這些主題，但我覺得它有點高級，希望有人能夠一步一步向我解釋它，所以我可能會從中學到一些東西:)Css html完全流血和集中

挑戰1：我想獲得完整的流血顏色垂直。事情是，我得到了一個白色的框架周圍的顏色區域。我已經使用下面的代碼來讓它在左側和頂部邊緣。

margin-right: -8px; 
margin-top: -8px;

但它不會一直走到右邊的邊緣。生病發布我的HTML和CSS以下。任何幫助，將不勝感激:)

HTML 
<div id="feature1"> 
<div id="feature1_cont">Content for New Div Tag Goes Here</div> 
</div> 

CSS 
#feature1 { 
height: 400px; 
width: 100%; 
float: left; 
background-color: #0CC; 
margin-left: -8px; 
margin-right: -8px; 

} 

#feature1_cont { 
font-family: Arial, Helvetica, sans-serif; 
font-size:36px; 
margin-top: 7%; 
margin-left: 7%; 
min-width: 300px; 
max-width: 600px; 
background-color: #0F9; 

}

挑戰2：我也有一個div內3個div的。我想把他們集中起來，以便這一舉動始終處於中心位置。但我只能讓他們留下。代碼如下

CSS 
#feature2 { 
width: 100%; 
heigt: 100%; 
float: left; 
background-color: #C96; 
margin-left: -8px; 
margin-right: -8px; 

} 

#feature2_cont { 
width: 400px; 
height: 400px; 
background-color: #36F; 
margin-top: 5%; 
margin-left: 5%; 
margin-bottom: 5%; 
float: left; 

} 


HTML 
<div id="feature2"> 
<div id="feature2_cont">Content for New Div Tag Goes Here</div> 
<div id="feature2_cont">Content for New Div Tag Goes Here</div> 
<div id="feature2_cont">Content for New Div Tag Goes Here</div> 
</div>

來源

2013-03-04 John John

爲什麼你不想在身體上使用'padding：8px'？ – Terry 2013-03-04 18:28:32

我嘗試過填充，但是這擴展了div上的顏色的顏色。因此，它不是X * X像素的顏色，而是X * X +填充顏色的像素。此外，我還沒有明白它的所有區別:) – 2013-03-04 18:34:03

Chalenge 1：

上#feature1取出切緣陰性，並添加* { margin: 0; padding: 0; }到你的CSS的頂部

Chalenge 2：

刪除float: left;並將margin: 0 auto;添加到#feature2_cont

來源

2013-03-04 18:36:01

chalenge 1解決了:)你能告訴我我剛剛做了什麼嗎？ Chalenge 2：這只是拿走了所有的間距，並左調整了它們。我錯過了什麼？ – 2013-03-04 18:44:43

向'*'添加樣式時，您將定位所有元素。瀏覽器具有所有元素的默認樣式，一些樣式包括填充和邊距。刪除所有元素上的填充和邊距可以讓您添加所需的填充量和邊距。避免跳過瀏覽器樣式的一種好方法是將CSS重置添加到您的頁面。 [css reset]（http://meyerweb.com/eric/tools/css/reset/） – 2013-03-04 18:49:31

謝謝Eric！有任何更多的技巧來居中這些div？ – 2013-03-04 19:17:22

Css html完全流血和集中

回答

相關問題