padding對於元素position定位的影響
關於padding和position的基本用法這裡不多介紹了,可以參閱相關閱讀。
相關閱讀:
(1).padding可以參閱CSS padding一章節。
(2).position可以參閱CSS position一章節。
下面進入正題,介紹一下padding屬性對於定位的影響。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box{ width:300px; height:150px; background-color:#CCC; padding:20px; } .inner{ width:50px; height:50px; background-color:red; position:relative; left:10px; top:20px; } </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
相對定位的參考物件由於是自身,所以不會受padding的影響。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box{ width:300px; height:150px; background-color:#CCC; padding:20px; position:relative; } .inner{ width:50px; height:50px; background-color:red; position:absolute; } </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
對於絕對定位,如果沒有設定left或者top屬性值,那麼相應方位就不會忽略padding值。
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box{ width:300px; height:150px; background-color:#CCC; padding:20px; position:relative; } .inner{ width:50px; height:50px; background-color:red; position:absolute; left:5px; } </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
對於絕對定位相應方位設定了left和top屬性值,那麼就會忽略相應方位的padding。
相關文章
- padding和margin對於position定位的影響padding
- 負外邊距margin對於絕對定位元素的影響
- position:fixed 相對父元素定位
- padding對於margin的影響簡單介紹padding
- margin-top影響父元素定位
- 絕對定位對margin外邊距的影響
- CSS position:absolute 絕對定位CSS
- CSS position: absolute 絕對定位CSS
- position:absolute相對哪個元素定位,那個元素要滿足什麼條件
- 元素的相對定位與絕對定位
- offsetTop屬性值不受padding的影響padding
- CSS position:relative 相對定位CSS
- CSS position: relative 相對定位CSS
- 負外邊距margin對浮動元素的影響
- Position定位
- 關於position定位的一些理解
- 遊戲暗示對於遊戲玩家的影響遊戲
- 關於OPcache對Swoole影響的理解opcache
- JAVA 異常對於效能的影響Java
- 關於drop操作對role的影響
- CSS的定位:positionCSS
- 嚴格模式下對於this指向的影響模式
- reverse index 對於 MAX/MIN操作的影響Index
- position:sticky定位元素是否在同一父元素中區別
- html 子元素div影響父元素高度HTML
- 重啟mysql對於auto_increment的影響MySqlREM
- Position定位詳解
- CSS之定位PositionCSS
- 並行查詢對於響應時間的影響實驗並行
- 絕對定位元素居中
- 絕對定位讓元素居中
- oracle cardinality對於執行計劃的影響Oracle
- position:relative相對定位不脫離文件流
- position絕對定位以哪個物件為參考物件
- 【Oracle】-【COMMIT對索引的影響】-從trace看COMMIT對索引的影響OracleMIT索引
- 基於row cache object latch研究對於sga抖動的影響Object
- myisam對於update,insert,delete關於auto_incremant的影響deleteREM
- innodb對於update,insert,delete關於auto_incremant的影響deleteREM