91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何理解DIV定位用法

發布時間:2021-11-18 09:41:27 來源:億速云 閱讀:122 作者:柒染 欄目:web開發

本篇文章為大家展示了如何理解DIV定位用法,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

你對DIV定位的概念和用法是否了解,這里和大家分享一下,主要包括無定位,相對定位和絕對定位等內容。

DIV定位用法詳解

1.position:static|無定位

position:static是所有元素定位的默認值,一般不用注明,除非有需要取消繼承的別的定位
example:

#div-1{  position:static;  }

2.position:relative|相對定位

使用position:relative,就需要top,bottom,left,right4個屬性來配合,確定元素的位置。
如果要讓div-1層向下移動20px,左移40px:
example:

#div-1{  position:relative;  top:20px;  left:40px;  }

如果用到相對定位,緊隨他的層divafter是不會出現在div-1的下方,而是和div-1在同一個高度出現。可見,position:relative;并不是很好用。

3.position:absolute|絕對定位

使用position:absolute;,能夠很準確的將元素移動到你想要的位置,
讓我將div-1a移動到頁面的右上角:
example:

#div-1a{  position:absolute;  top:0;  right:0;  width:200px;  }

使用絕對定位的div-1a層前面的或者后面的層會認為這個層并不存在,絲毫不影響到他們。所以position:absolute;用于將一個元素放到固定的位置很好用,但是如果需要div-1a層相對于附近的層來確定位置就不要實現了。

*這里有個winie的bug需要提到,就是如果為絕對定位的元素定義一個相對的寬度,那么在ie下它的寬度取決于父元素的寬度而不是整個頁面的寬度。

4.position:relative+position:absolute|絕對定位+相對定位

如果給父元素(div-1)定義為position:relative;子元素(div-1a)定義為position:absolute,那么子元素(div-1a)的位置將相對于父元素(div-1),而不是整個頁面。
讓div-1a定位于div-1的右上角:
example:

<dividdivid="div-1"> <dividdivid="div-1a"> thisisdiv-1aelement.  </div> thisisdiv-1element.  </div> #div-1{  position:relative;  }  #div-1a{  position:absolute;  top:0;  right:0;  width:200px;  }

上述內容就是如何理解DIV定位用法,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

div
AI

涞源县| 阿尔山市| 肇源县| 册亨县| 龙陵县| 策勒县| 丰宁| 惠来县| 武隆县| 海南省| 荣昌县| 友谊县| 措勤县| 乐安县| 天气| 南安市| 博野县| 长泰县| 阿图什市| 宁武县| 孟州市| 雅安市| 明星| 收藏| 河津市| 宁波市| 阿拉善盟| 凤阳县| 嫩江县| 嵊州市| 潜山县| 南召县| 宁乡县| 陈巴尔虎旗| 秦安县| 永仁县| 宿迁市| 循化| 平顶山市| 海林市| 康定县|