一、使用CSS的定位屬性
在HTML中，元素的定位可以使用CSS的position屬性來實現。position屬性有四個值：static、relative、absolute和fixed。其中，static為默認值；relative相對於元素的正常位置進行定位；absolute相對於最接近的已定位祖先元素進行定位，若不存在已定位的祖先元素，則以HTML頁面為基準進行定位；fixed相對於瀏覽器窗口進行定位，即便頁面滾動，元素仍會固定在窗口的相應位置。使用這些屬性對元素進行定位，要結合top、bottom、left、right屬性一起使用來確定元素的位置。
/* relative定位 */
div {
position: relative;
left: 50px;
top: 50px;
}
/* absolute定位 */
div {
position: absolute;
left: 0;
top: 0;
}
/* fixed定位 */
div {
position: fixed;
top: 0;
right: 0;
}
二、使用浮動
在HTML中，可以使用CSS的float屬性將元素浮動起來，這樣可以改變元素的默認位置，並且允許其他元素圍繞它進行排列。使用浮動元素實現布局時，可以結合clear屬性來控制浮動的方向。clear屬性有三個值：left、right和both，分別表示不允許左浮動元素、右浮動元素和兩者同時存在。
/* 左浮動 */
div {
float: left;
}/* 結合clear使用 */
.clearfix:after {
content: "";
display: block;
clear: both;
}左浮動元素1
原創文章，作者：CRCMF，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/329401.html
微信掃一掃 
支付寶掃一掃 