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