亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關(guān)于CSS Padding那些你意想不到的用法示例

  發(fā)布時間：2016-08-31 17:35:48   作者：佚名   我要評論
這篇文章給大家總結(jié)一些關(guān)于CSS中Padding屬性不常用但很實(shí)用的用法，具有一定參考價值，有需要的可以來參考學(xué)習(xí)。

瀏覽器支持
所有瀏覽器都支持 padding 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。

定義和用法
padding 簡寫屬性在一個聲明中設(shè)置所有內(nèi)邊距屬性。

說明
這個簡寫屬性設(shè)置元素所有內(nèi)邊距的寬度，或者設(shè)置各邊上內(nèi)邊距的寬度。行內(nèi)非替換元素上設(shè)置的內(nèi)邊距不會影響行高計算；因此，如果一個元素既有內(nèi)邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內(nèi)容重疊。元素的背景會延伸穿過內(nèi)邊距。不允許指定負(fù)邊距值。
注釋：不允許使用負(fù)值。（以上來自w3school）

padding變化是否會影響容器的尺寸

1.對于block元素

如果寬度非auto那么容器會變大，如果容器寬度自適應(yīng)或者設(shè)置了box-sizing:border-box,并且值在可控區(qū)間內(nèi)是不會影響內(nèi)容寬度的，如果值暴走那么容器肯定會變化。


復(fù)制代碼
代碼如下:

<!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)行說明了當(dāng)padding值暴走的時候里面的文本只按照最小的單個字體作為一行content區(qū)域的寬度已經(jīng)被充沒了。

2. 對于內(nèi)聯(lián)元素

內(nèi)聯(lián)元素的padding只會影響左右尺寸，上下尺寸不影響但是背景色會顯現(xiàn)，當(dāng)上下值暴走的時候會影響外容器的高度。
利用這一特性我們可以做類似于：注冊 | 登陸 這種中間的間隔線


復(fù)制代碼
代碼如下:

<!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標(biāo)準(zhǔn)中我們可以看到他是這么描述的：規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。注意這里是基于父元素的寬度。
對于移動端來說我們考慮響應(yīng)式的時候可以做一個正方行或者固定比例的區(qū)域用于填充背景。


復(fù)制代碼
代碼如下:

<!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)


復(fù)制代碼
代碼如下:

<!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)布局等等。這些都是大家常用的方法我就不單個列舉了。有興趣的同學(xué)可以去研究一下。希望這篇文章對大家的學(xué)習(xí)和工作能帶來一定的幫助。

相關(guān)文章

最新評論