文件大小:
軟件介紹
1.相對(duì)定位(relative)
相對(duì)定位是指相對(duì)它本來應(yīng)該處的位置所做的移動(dòng)。
……<style type="text/css">
.dingwei{
position:relative;
left:50px;
}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本來應(yīng)該在它的正下方,
可是relative相對(duì)定位讓我在正常位置的基礎(chǔ)上向右移動(dòng)了50個(gè)像素。</p>
</body>
</html>
2.絕對(duì)定位(absolute)
絕對(duì)定位非常好理解,你指定元素出現(xiàn)的坐標(biāo)(x,y),然后它就準(zhǔn)確無誤地顯示在那里。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>s
<title>我真慘!被用來演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
p{
font-size:24px;
font-weight:bold;
}
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
</style>
</head>
<body>
<p class="dingwei1">CSS</p>
<p class="dingwei2">絕對(duì)定位</p>
</body>
</html>
定位中使用的left屬性表示元素距離左側(cè)的距離,而top屬性表示距離上方的位置。如果用坐標(biāo)系來理解的話left就是橫坐標(biāo)x,而top就是縱坐標(biāo)y。
絕對(duì)定位其實(shí)也是相對(duì)定位
沒錯(cuò),絕對(duì)定位會(huì)按照我們給定的坐標(biāo)x,y來準(zhǔn)確地定位你一個(gè)元素。但是問題在于,坐標(biāo)系的原點(diǎn)在哪里呢?答案就是父元素。
上例中,class為"dingwei2"的元素設(shè)置為絕對(duì)定位,它的父元素為body,所以它其實(shí)是相對(duì)body位置來定位的的。如果有如下代碼:
<p>段落正文
<strong>強(qiáng)調(diào)文字</strong>
<p>
若給strong元素設(shè)置絕對(duì)定位,那么坐標(biāo)原點(diǎn)將會(huì)是父元素p的位置。
版權(quán)聲明:
1 本站所有資源(含游戲)均是軟件作者、開發(fā)商投稿,任何涉及商業(yè)盈利目的均不得使用,否則產(chǎn)生的一切后果將由您自己承擔(dān)!
2 本站將不對(duì)任何資源負(fù)法律責(zé)任,所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。
3 若有關(guān)在線投稿、無法下載等問題,請(qǐng)與本站客服人員聯(lián)系。
4 如侵犯了您的版權(quán)、商標(biāo)等,請(qǐng)立刻聯(lián)系我們并具體說明情況后,本站將盡快處理刪除,聯(lián)系QQ:2499894784
- 千億體育手機(jī)版本v2.0.1 安卓版
- tplink物聯(lián)電腦版(原tplink安防) v2.12.17.
- Sandboxie Plus v1.9.8 / v5.64.8 開源電腦
- 字魂100號(hào)方方先鋒體字體包免費(fèi)版
- 奧維互動(dòng)地圖奧維地圖PC破解版VIP V9.0.6
- 蘭博對(duì)戰(zhàn)平臺(tái) V1.38.6 官方最新版 / 蘭博玩
- reWASD(Xbox One手柄映射工具) V6.0.1.5190
- mtool修改器 V2023.11 官方最新版 / mtool
- 115轉(zhuǎn)存助手ui優(yōu)化版腳本 V3.9.1 綠色免費(fèi)
- iSecure Center電腦客戶端 V1.5.0 官方版
點(diǎn)擊加載更多評(píng)論>>