float語法
- 使用時機：想要讓元素進行左右併排
- float：left / right
<div id="outer">
<div class="box"></div>
<div class="box2"></div>
<div class="box"></div>
</div>
#outer {
width: 900px;
margin: 0 auto; //外層置中
}
.box {
float: left; //靠左
border: 1px solid black;
width: 200px;
height: 600px;
}
.box2 {
float: left; //靠左
border: 1px solid black;
width: 500px;
height: 600px;
}
float去除浮動clear:both
- float的缺點就是它不會撐開外部容器，所以需要加上clear讓外部容器正常撐開
- 如果Ａ元素開始不打算加入併排，就要在Ａ元素的CSS加上clear:both
- 建議把clear:both單獨寫在class=clearfix的div上，因為假設有n個需要clear，這樣就要必須改n個CSS（超級很麻煩），所以不如直接用div加在HTML上
<body>
<h1 style="text-align:center">三欄切法</h1>
<div id="outer">
<div class="header">表頭</div>
<div class="left">左left</div> // 開始併排float: left
<div class="right">右left</div> // 開始併排float: right;
<div class="clearfix"></div> // 結束併排clear: both;
<div class="footer">不打算參與併排時，前面或自己要加clear</div>
<div class="alone-left">左left</div>
<div class="small-left">左left</div> // 開始併排float: left
<div class="small-left">左left</div> // 開始併排 float: left
<div class="clearfix"></div> // 結束併排clear: both;
<div class="alone-left">不打算參與併排，前面或自己要加clear</div>
<div class="footer">表尾</div>
</div>
</body>
使用時機：想要讓元素進行重疊
圖層關係：CSS與下面圖層愈上面，z-index愈大愈上面
Absolute定位：當下absolute時，元素會去找有設定relative的父元素為座標系定位，而如果都沒有就是以body為定位
缺點：absolute不會撐開父元素，因此如果元素本身太寬，會超出去。
沒有留言:
張貼留言