close

cssup-banner.jpg

對齊塊元素

塊元素指的是佔據全部可用寬度的元素，並且在其前後都會換行。

塊元素的例子： 

<h1>
<p>
<div>

使用margin 屬性來水平對齊

可通過將左和右外邊距設置為"auto"，來對齊塊元素。

註釋：除非已經聲明了!DOCTYPE，否則使用margin:auto在IE8以及更早的版本中是無效的。

把左和右外邊距設置為auto，規定的是均等地分配可用的外邊距。結果就是居中的元素：

實例

.center
{
<code>margin-left:auto;
margin-right:auto;</code>
width:70%;
background-color:#b0e0e6;
}

提示：如果寬度是100%，則對齊沒有效果。

使用position 屬性進行左和右對齊

對齊元素的方法之一是使用絕對定位：

實例

.right
{
<code>position:absolute;</code>
right:0px;
width:300px;
background-color:#b0e0e6;
}

註釋：絕對定位元素會被從正常流中刪除，並且能夠交疊元素。

跨瀏覽器兼容性問題

當像這樣對齊元素時，對<body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。

當使用position 屬性時，IE8 以及更早的版本存在一個問題。如果容器元素（在我們的案例中是<div class="container">）設置了指定的寬度，並且省略了!DOCTYPE 聲明，那麼IE8 以及更早的版本會在右側增加17px 的外邊距。這似乎是為滾動條預留的空間。當使用position 屬性時，請始終設置!DOCTYPE 聲明：

實例

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用float 屬性來進行左和右對齊

對齊元素的另一種方法是使用float 屬性：

實例

.right
{
<code>float:right;</code>
width:300px;
background-color:#b0e0e6;
}

跨瀏覽器兼容性問題

當像這樣對齊元素時，對<body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。

當使用float 屬性時，IE8 以及更早的版本存在一個問題。如果省略!DOCTYPE 聲明，那麼IE8 以及更早的版本會在右側增加17px 的外邊距。這似乎是為滾動條預留的空間。當使用float 屬性時，請始終設置!DOCTYPE 聲明：

實例

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
arrow
arrow
    文章標籤
    Code Design code 設計密碼 Design 線上學習 CSS
    全站熱搜

    設計密碼工作室 發表在 痞客邦 留言(0) 人氣()