資訊專欄INFORMATION COLUMN
摘要：淺談淺談是盒子模型的一部分，代表盒子模型的內(nèi)邊距?？赡艿闹悼赡艿闹抵得枋鰹g覽器計(jì)算內(nèi)邊距規(guī)定以具體單位計(jì)的內(nèi)邊距值，比如像素厘米等。默認(rèn)值是規(guī)定基于父元素的寬度的百分比的內(nèi)邊距規(guī)定應(yīng)該從父元素繼承內(nèi)邊距常用的寫(xiě)法是使用，比如。
padding是CSS盒子模型的一部分，代表盒子模型的內(nèi)邊距。
padding屬性有四個(gè)值，分別代表上、右、下、左的內(nèi)邊距。
.box {
padding: 10px 5px 15px 20px;
}此時(shí)，.box的內(nèi)邊距為：
padding屬性的值可以簡(jiǎn)寫(xiě)，按照值的數(shù)量可以分為三種情況：
.box {
padding: 10px;
}此時(shí)，.box的內(nèi)邊距為：
.box {
padding: 10px 5px;
}此時(shí)，.box的內(nèi)邊距為：
.box {
padding: 10px 5px 15px;
}此時(shí)，.box的內(nèi)邊距為：
tips：實(shí)際使用時(shí)，大多數(shù)人都會(huì)使用單個(gè)值、兩個(gè)值、四個(gè)值的寫(xiě)法，三個(gè)值的寫(xiě)法常常被忽略，所以需要重點(diǎn)了解三個(gè)值的簡(jiǎn)寫(xiě)寫(xiě)法。
當(dāng)對(duì)行內(nèi)元素設(shè)置內(nèi)邊距時(shí)，內(nèi)邊距不會(huì)影響內(nèi)聯(lián)元素的行高，但是會(huì)撐開(kāi)背景。
我是行內(nèi)元素
朕的背景?。?！span {
padding: 10px;
background: #cccccc;
}
.text-bottom {
height: 200px;
background: #000;
}效果如下：
可以發(fā)現(xiàn)：行高并沒(méi)有變化，背景按內(nèi)邊距撐開(kāi)的面積顯示，細(xì)心的話可以發(fā)現(xiàn)，背景延伸到了其他行，并發(fā)生了重疊，并沒(méi)有擠開(kāi)其他行，這也進(jìn)一步說(shuō)明了行高并沒(méi)有改變。
padding不像margin可以使用負(fù)值，因?yàn)?，margin再怎么用，也不會(huì)影響盒模型的寬度、高度，而padding身為盒模型的內(nèi)邊距，會(huì)直接影響盒模型的寬度、高度。并且，padding設(shè)為負(fù)值并沒(méi)有意義，直接修改content一樣可以達(dá)到效果。
| 值 | 描述 |
|---|---|
| auto | 瀏覽器計(jì)算內(nèi)邊距 |
| length | 規(guī)定以具體單位計(jì)的內(nèi)邊距值，比如像素、厘米等。默認(rèn)值是 0px |
| % | 規(guī)定基于父元素的寬度的百分比的內(nèi)邊距 |
| inherit | 規(guī)定應(yīng)該從父元素繼承內(nèi)邊距 |
tips：padding常用的寫(xiě)法是使用length，比如padding: 10px。但是，有時(shí)使用百分比可以實(shí)現(xiàn)一些騷操作，比如實(shí)現(xiàn)一個(gè)自適應(yīng)的正方形：
.box {
float: left;
width: 100%;
padding-bottom: 100%;
background: #cccccc;
}效果如下：
可以看到，通過(guò)padding-bottom: 100%實(shí)現(xiàn)了一個(gè)自適應(yīng)的正方形。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2000.html
摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。 ?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問(wèn)題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開(kāi)位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)...
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)正好借這次機(jī)會(huì)總結(jié)一波，同時(shí)加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個(gè)問(wèn)題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開(kāi)位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫(xiě)這種布局，一直沒(méi)有總結(jié)過(guò)...
摘要：直白點(diǎn)事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標(biāo)準(zhǔn)事件監(jiān)聽(tīng)標(biāo)準(zhǔn)事件監(jiān)聽(tīng)其實(shí)是事件冒泡和事件捕獲的混合體任何事件發(fā)生時(shí)，先從頂層開(kāi)始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)。 前言 本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture 主要內(nèi)容 事件捕獲 含義:從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象...
摘要：就這樣被發(fā)明了，利用的屬性不受同源策略的控制，作弊般地巧妙地逃過(guò)了瀏覽器的這一限制。然后，聲明這個(gè)回調(diào)函數(shù)。 這是我在13年初寫(xiě)的文章，當(dāng)時(shí)懵懵懂懂寫(xiě)下了自己對(duì)JSONP的理解。 文章原文 博客 歡迎訂閱 提到JSONP，我當(dāng)時(shí)在網(wǎng)上找了無(wú)數(shù)帖子也沒(méi)有看懂它。那些文章大同小異，都是講到JSONP原理以后就戛然而止，把我們這些初學(xué)者搞得云里霧里。所以，寫(xiě)下這篇文章，希望對(duì)大家有幫助...
閱讀 1711·2021-10-09 09:44
閱讀 3272·2021-09-27 13:36
閱讀 1531·2021-09-22 15:33
閱讀 1285·2021-09-22 15:23
閱讀 1169·2021-09-06 15:02
閱讀 1709·2019-08-29 16:14
閱讀 2915·2019-08-29 15:26
閱讀 2418·2019-08-28 18:08
