left和right屬性也可以設定元素的寬度

antzone發表於2017-04-09

設定元素的寬度最常見的當然是使用width屬性。

在特殊條件下也可以使用left和right屬性來實現，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body,ul,li{
  padding:0;
  margin:0;
}
#box{
  height:80px;
  position:absolute;
  left:70%;
  right:10%;
  background-color:red;
}
</style>
</head>
<body>
<div id="box">螞蟻部落</div>
</body>
</html>

上面的程式碼通過left和right實現了設定div元素寬度的效果；實現此功能的條件是:

（1）.元素沒有顯式設定寬度。

（2）.元素定位方式為絕對定位。當left和right屬性值之和大於100%時，我們認為元素的右側邊界被翻轉到左側。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body,ul,li{
  padding:0;
  margin:0;
}
#box{
  height:80px;
  position:absolute;
  left:70%;
  right:70%;
  margin:0px -480px;
  background-color:red;
}
</style>
</head>
<body>
<div id="box">螞蟻部落</div>
</body>
</html>

那麼我們可以利用這個特點和元素負外邊距實現元素從中心向外部擴充套件寬度效果（調整負外邊距的大小）。

負外邊距可以參閱css 負margin外邊距功能簡單介紹一章節。

相關文章