您的位置: 首页  >  文章  >  深入理解之padding属性（第二期）

深入理解之padding属性（第二期）

分类: 文章 • 2024-02-15 08:54:58

前排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。

一、padding与容器尺寸的关系

  1. 对于block水平元素来说，可以理解为人的脂肪层，会影响尺寸。
  2. 对应以下情况外部不会改变，不会影响元素的尺寸。
    注：当padding大小超过宽高时，会影响到元素的尺寸。
div{
	width:auto;
	border-sizing:border-box;//将block变成IE的计算方式
}
  1. 对于inline水平元素，水平的padding会影响尺寸，垂直的padding不会影响尺寸。
    注：虽然不能改变上下尺寸，但是会改变背景色的占据空间，四个方向都会影响到。
    深入理解之padding属性（第二期）

二、padding的负值与百分比值

  1. padding不支持任何形式的负值。
  2. padding的百分比是根据宽度计算的，实现一个正方形可以：
div{
	padding:50%;
	background:red;
}

注：这个样式在任何尺寸的设备上都可以实现100%宽度的正方形。

  1. inline水平元素的padding百分比值
    （1）样式同样是相对于宽度
    （2）默认的宽度细节有差异
    （3）padding会断行（在inline元素上）

三、标签元素的内置padding

  1. ol / ul列表
    （1）padding-left的值一般是为（22px），但是ol/ul的单位是px，其它元素大多都是em（相对于文字本身大小）
    （2）如果字号很小，间距就会比较开
    （3）如果字号很大，序号会超到容器外面

  2. input/textaurea输入框与button元素，在部分浏览器中可以设置padding的。

  3. 所有的浏览器radio/chexbox不能设置padding。

  4. IE7中的文字越多，左右padding的值就越大，可通过下面的方式去除padding。

button{
	overflow:visible;
}
  • padding与高度计算不兼容的问题，代码如下:
button{
	line-height:20px;
	padding:10px;
	border:none;
}

结果：

  • IE7:不准确；
  • IE8+：准确；
  • FireFox：不准确；
  • chrome：准确；

如果需要兼容多个浏览器可使用lable标签：

<button id="btn"><button>
<lable for="btn">按钮<lable>
//css样式如下
lable{
	display:inline-block;
	line-height:20px;
	padding:10px;
}

四、padding绘制图案

<div class="lin"></div>


.lin{
	height: 3px;
	width:15px;
	border-bottom: 3px solid #000000;
	border-top: 3px solid #000000;
	padding: 3px 0;
	background-color: #000000;
	background-clip: content-box;
}

可以得到如下图案：
深入理解之padding属性（第二期）

相关推荐