padding的特性及百分比值详解

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c__dreamer/article/details/82345947

padding是盒子模型内部的组成部分,它的设置会影响盒子尺寸。

有一下注意点。

1.不同盒模型下的特点

    标准盒模型设定下,影响盒子自身尺寸。

    怪异盒模型设定下,影响盒子内容区域尺寸

2.行间元素的padding垂直部分的占用空间会受到line-height的限制 (有效果,不占用空间)

3.对除了table类显示模式的中间元素外,均有效

    上述额中间元素指的是除了table(最外部)及table-cell(最内部)之外的(如<tr>标签的table-row模式)。

    显示模式针对额是标签容器的display属性,而非容器标签。

4.多数元素默认padding值为0,默认带有padding的元素如下:

    (1)列表元素:ul ol (padding-left:40px)

    (2)表单元素:不同浏览器padding表现不同。

5.生成盒子背景的padding-box的区域(“3个盒子”)

    为盒子的背景设置提供更多丰富的玩法(background-origin/background-clip)。

关于padding的百分比的设定

padding的值可以设置为数值,当然也可以设置为百分比值,但是不允许设置为负值。

当值为百分比值时:无论是宽度还是高度,都以父级对象的width作为参考基准(基于高度自适应的特性)。

主页传送门​​​​​​​

展开阅读全文

没有更多推荐了,返回首页