關于CSS Padding那些你意想不到的用法示例
我要評論瀏覽器支持
所有瀏覽器都支持 padding 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
定義和用法
padding 簡寫屬性在一個聲明中設置所有內邊距屬性。
說明
這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
注釋：不允許使用負值。（以上來自w3school）
padding變化是否會影響容器的尺寸
1.對于block元素
如果寬度非auto那么容器會變大，如果容器寬度自適應或者設置了box-sizing:border-box,并且值在可控區(qū)間內是不會影響內容寬度的，如果值暴走那么容器肯定會變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.test {width: 300px;background: blue;box-sizing: border-box;padding:0 300px;}
.test2 {width: 300px;background: yellow;}
</style>
</head>
<body>
<div class="test">文字在那里</div>
<div class="test2">文字在那里</div>
</body>
</html>
效果圖
上面的代碼運行說明了當padding值暴走的時候里面的文本只按照最小的單個字體作為一行content區(qū)域的寬度已經被充沒了。
2. 對于內聯元素
內聯元素的padding只會影響左右尺寸，上下尺寸不影響但是背景色會顯現，當上下值暴走的時候會影響外容器的高度。
利用這一特性我們可以做類似于：注冊 | 登陸 這種中間的間隔線
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
span {padding: 12px 4px 2px;margin-left: 8px;border-left:2px solid;font-size:0;}
</style>
</head>
<body>
注冊<span></span>登陸
</body>
</html>
效果圖
padding百分比值的特殊用法
從W3C標準中我們可以看到他是這么描述的：規(guī)定基于父元素的寬度的百分比的內邊距。注意這里是基于父元素的寬度。
對于移動端來說我們考慮響應式的時候可以做一個正方行或者固定比例的區(qū)域用于填充背景。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.test {width: 500px;margin: auto;}
.test div {padding: 50%;background: blue;}
</style>
</head>
<body>
<div class="test">
<div></div>
</div>
</body>
</html>
效果圖
padding繪制小圖標
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DEMO</title>
<style>
*{padding: 0;margin: 0;}
.icon1 {width: 50px;height: 50px;border-radius: 50%;padding: 10px;border: 10px solid #000;background: #000;background-clip: content-box;float: left;}
.icon2 {width: 50px;height: 10px;padding: 10px 0;border-top: 10px solid #000;border-bottom: 10px solid #000;background: #000;background-clip: content-box;float: left;margin:20px 20px;}
</style>
</head>
<body>
<div class="icon1"></div>
<div class="icon2"></div>
</body>
</html>
效果圖
當然padding的用法肯定還有很多，像什么三欄兩欄或者等比例自適應布局等等。這些都是大家常用的方法我就不單個列舉了。有興趣的同學可以去研究一下。希望這篇文章對大家的學習和工作能帶來一定的幫助。
相關文章
- 本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法，代碼簡單易懂，需要的朋友可以參考下2016-09-02
- 對于CSS，可能很多前端開發(fā)人員已經駕輕就熟了，有些人也許還在初學階段，不管怎樣，這幾個炫酷的CSS技巧你都不容錯過，對于大家開發(fā)前端很有幫助的。2016-08-30
- 今天小編給大家?guī)硪粋€小demo，使用純css3代碼實現switch滑動開關按鈕效果，非常實用，感興趣的朋友可以參考下2016-08-30
基于JS+Html5+css3實現手機端點擊圖標環(huán)形菜單特效源碼
基于JS+Html5+css3實現手機端點擊圖標環(huán)形菜單特效源碼是一款支持移動端觸摸事件，基于原生js以及html5+css3實現圖標環(huán)形菜單。點擊圖片淡入淡出兩次彈出環(huán)形菜單，點擊clo2016-08-30
CSS3實現圓形圖片鼠標懸停圖片旋轉放大特效源碼是一款采用CSS3結合圖片實現的鼠標懸停到圖標上面旋轉放大展示效果。本段代碼適應于所有網頁使用，有需要的朋友可以直接下載2016-08-30- 下面小編就為大家?guī)硪黄猚ss background 背景圖的設置方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-30
- 大家以前基本是用Javascript來實現文字定時向上滾動的效果，那么今天小編給大家分享下利用CSS3來實現這一效果，有需要的可以參考學習。2016-08-29
- 下面小編就為大家?guī)硪黄猚ss照片有如層疊效果的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-02
