關(guān)于CSS Padding那些你意想不到的用法示例
我要評(píng)論瀏覽器支持
所有瀏覽器都支持 padding 屬性。
注釋?zhuān)喝魏蔚陌姹镜?Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
定義和用法
padding 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。
說(shuō)明
這個(gè)簡(jiǎn)寫(xiě)屬性設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置各邊上內(nèi)邊距的寬度。行內(nèi)非替換元素上設(shè)置的內(nèi)邊距不會(huì)影響行高計(jì)算；因此，如果一個(gè)元素既有內(nèi)邊距又有背景，從視覺(jué)上看可能會(huì)延伸到其他行，有可能還會(huì)與其他內(nèi)容重疊。元素的背景會(huì)延伸穿過(guò)內(nèi)邊距。不允許指定負(fù)邊距值。
注釋?zhuān)翰辉试S使用負(fù)值。（以上來(lái)自w3school）
padding變化是否會(huì)影響容器的尺寸
1.對(duì)于block元素
如果寬度非auto那么容器會(huì)變大，如果容器寬度自適應(yīng)或者設(shè)置了box-sizing:border-box,并且值在可控區(qū)間內(nèi)是不會(huì)影響內(nèi)容寬度的，如果值暴走那么容器肯定會(huì)變化。
<!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>
效果圖
上面的代碼運(yùn)行說(shuō)明了當(dāng)padding值暴走的時(shí)候里面的文本只按照最小的單個(gè)字體作為一行content區(qū)域的寬度已經(jīng)被充沒(méi)了。
2. 對(duì)于內(nèi)聯(lián)元素
內(nèi)聯(lián)元素的padding只會(huì)影響左右尺寸，上下尺寸不影響但是背景色會(huì)顯現(xiàn)，當(dāng)上下值暴走的時(shí)候會(huì)影響外容器的高度。
利用這一特性我們可以做類(lèi)似于：注冊(cè) | 登陸 這種中間的間隔線
<!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>
注冊(cè)<span></span>登陸
</body>
</html>
效果圖
padding百分比值的特殊用法
從W3C標(biāo)準(zhǔn)中我們可以看到他是這么描述的：規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。注意這里是基于父元素的寬度。
對(duì)于移動(dòng)端來(lái)說(shuō)我們考慮響應(yīng)式的時(shí)候可以做一個(gè)正方行或者固定比例的區(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繪制小圖標(biāo)
<!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>
效果圖
當(dāng)然padding的用法肯定還有很多，像什么三欄兩欄或者等比例自適應(yīng)布局等等。這些都是大家常用的方法我就不單個(gè)列舉了。有興趣的同學(xué)可以去研究一下。希望這篇文章對(duì)大家的學(xué)習(xí)和工作能帶來(lái)一定的幫助。
相關(guān)文章
- 本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-09-02
- 對(duì)于CSS，可能很多前端開(kāi)發(fā)人員已經(jīng)駕輕就熟了，有些人也許還在初學(xué)階段，不管怎樣，這幾個(gè)炫酷的CSS技巧你都不容錯(cuò)過(guò)，對(duì)于大家開(kāi)發(fā)前端很有幫助的。2016-08-30
純CSS3代碼實(shí)現(xiàn)switch滑動(dòng)開(kāi)關(guān)按鈕效果
今天小編給大家?guī)?lái)一個(gè)小demo，使用純css3代碼實(shí)現(xiàn)switch滑動(dòng)開(kāi)關(guān)按鈕效果，非常實(shí)用，感興趣的朋友可以參考下2016-08-30
基于JS+Html5+css3實(shí)現(xiàn)手機(jī)端點(diǎn)擊圖標(biāo)環(huán)形菜單特效源碼
基于JS+Html5+css3實(shí)現(xiàn)手機(jī)端點(diǎn)擊圖標(biāo)環(huán)形菜單特效源碼是一款支持移動(dòng)端觸摸事件，基于原生js以及html5+css3實(shí)現(xiàn)圖標(biāo)環(huán)形菜單。點(diǎn)擊圖片淡入淡出兩次彈出環(huán)形菜單，點(diǎn)擊clo2016-08-30
CSS3實(shí)現(xiàn)圓形圖片鼠標(biāo)懸停圖片旋轉(zhuǎn)放大特效源碼
CSS3實(shí)現(xiàn)圓形圖片鼠標(biāo)懸停圖片旋轉(zhuǎn)放大特效源碼是一款采用CSS3結(jié)合圖片實(shí)現(xiàn)的鼠標(biāo)懸停到圖標(biāo)上面旋轉(zhuǎn)放大展示效果。本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友可以直接下載2016-08-30- 下面小編就為大家?guī)?lái)一篇css background 背景圖的設(shè)置方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-30
利用CSS3實(shí)現(xiàn)的文字定時(shí)向上滾動(dòng)
大家以前基本是用Javascript來(lái)實(shí)現(xiàn)文字定時(shí)向上滾動(dòng)的效果，那么今天小編給大家分享下利用CSS3來(lái)實(shí)現(xiàn)這一效果，有需要的可以參考學(xué)習(xí)。2016-08-29- 下面小編就為大家?guī)?lái)一篇css照片有如層疊效果的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-02
