資訊專欄INFORMATION COLUMN
摘要：淺談淺談是盒子模型的一部分，代表盒子模型的內(nèi)邊距。可能的值可能的值值描述瀏覽器計算內(nèi)邊距規(guī)定以具體單位計的內(nèi)邊距值，比如像素厘米等。默認值是規(guī)定基于父元素的寬度的百分比的內(nèi)邊距規(guī)定應(yīng)該從父元素繼承內(nèi)邊距常用的寫法是使用，比如。
padding是CSS盒子模型的一部分，代表盒子模型的內(nèi)邊距。
padding屬性有四個值，分別代表上、右、下、左的內(nèi)邊距。
.box {
padding: 10px 5px 15px 20px;
}此時，.box的內(nèi)邊距為：
padding屬性的值可以簡寫，按照值的數(shù)量可以分為三種情況：
.box {
padding: 10px;
}此時，.box的內(nèi)邊距為：
.box {
padding: 10px 5px;
}此時，.box的內(nèi)邊距為：
.box {
padding: 10px 5px 15px;
}此時，.box的內(nèi)邊距為：
tips：實際使用時，大多數(shù)人都會使用單個值、兩個值、四個值的寫法，三個值的寫法常常被忽略，所以需要重點了解三個值的簡寫寫法。
當對行內(nèi)元素設(shè)置內(nèi)邊距時，內(nèi)邊距不會影響內(nèi)聯(lián)元素的行高，但是會撐開背景。
我是行內(nèi)元素
朕的背景?。?！span {
padding: 10px;
background: #cccccc;
}
.text-bottom {
height: 200px;
background: #000;
}效果如下：
可以發(fā)現(xiàn)：行高并沒有變化，背景按內(nèi)邊距撐開的面積顯示，細心的話可以發(fā)現(xiàn)，背景延伸到了其他行，并發(fā)生了重疊，并沒有擠開其他行，這也進一步說明了行高并沒有改變。
padding不像margin可以使用負值，因為，margin再怎么用，也不會影響盒模型的寬度、高度，而padding身為盒模型的內(nèi)邊距，會直接影響盒模型的寬度、高度。并且，padding設(shè)為負值并沒有意義，直接修改content一樣可以達到效果。
| 值 | 描述 |
|---|---|
| auto | 瀏覽器計算內(nèi)邊距 |
| length | 規(guī)定以具體單位計的內(nèi)邊距值，比如像素、厘米等。默認值是 0px |
| % | 規(guī)定基于父元素的寬度的百分比的內(nèi)邊距 |
| inherit | 規(guī)定應(yīng)該從父元素繼承內(nèi)邊距 |
tips：padding常用的寫法是使用length，比如padding: 10px。但是，有時使用百分比可以實現(xiàn)一些騷操作，比如實現(xiàn)一個自適應(yīng)的正方形：
.box {
float: left;
width: 100%;
padding-bottom: 100%;
background: #cccccc;
}效果如下：
可以看到，通過padding-bottom: 100%實現(xiàn)了一個自適應(yīng)的正方形。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/2000.html
摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標準的，一個是標準模型，一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 ?從上面兩圖不難看出在標準模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機會總結(jié)一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...
摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機會總結(jié)一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考 圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...
摘要：直白點事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標準事件監(jiān)聽標準事件監(jiān)聽其實是事件冒泡和事件捕獲的混合體任何事件發(fā)生時，先從頂層開始進行事件捕獲，直到事件觸發(fā)到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達。 前言 本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture 主要內(nèi)容 事件捕獲 含義:從最特定的事件目標到最不特定的事件目標(document對象...
閱讀 1774·2021-10-09 09:44
閱讀 3342·2021-09-27 13:36
閱讀 1598·2021-09-22 15:33
閱讀 1336·2021-09-22 15:23
閱讀 1246·2021-09-06 15:02
閱讀 1767·2019-08-29 16:14
閱讀 2983·2019-08-29 15:26
閱讀 2473·2019-08-28 18:08
