padding与元素的尺寸
1 .css中box-sizing默认是content-box，所以添加padding会增加盒子的尺寸
2 .内联元素的padding不仅会影响水平方向，也会影响垂直方向。在水平方向上来看，会算到他的宽度里面，在流里面占据位置，影响下一个元素的位置。在垂直方向上来看，添加padding，不会影响下方元素的布局，仅仅会做重叠。
image.png
1 .三个a标签，都已经渲染了出来了，但是因为padding是50，所以下面的a标签最后计算出来的大小，覆盖了标签1，布局位置并没有影响
2 .可以看到padding给值，通过background-color看出来，也可以得知，background-color的大小还要算上padding的大小
3 .结论：内联元素padding对垂直方向的布局和表现都是有影响的
其他不影响元素布局，但是也会出现层叠效果的现象
1 .relative元素的定位。影响外部尺寸，padding。给父元素添加overflow:auto。如果超出之后是会有滚动标志出来的
2 .outline,盒阴影box-shadow。单纯视觉层叠，不会影响外部尺寸
使用情况
1 .不影响当前布局的情况下，增大a标签的点击区域大小.默认情况下,a标签连接的点击高度是受font-size影响的和line-height没有关系。这种高度在移动端更是小，如果想要增大点击面积，需要使用如下样式
a{
padding:0.25em 0}
2 .做一个分隔符
image.png
padding的百分比值
1 .不支持负值
2 .支持百分比，但是！！！padding的百分比无论是横向还是垂直方向，都是相对于自己的宽度计算的.如果是根据高度height计算的话，大部分height都是0，没啥意义。还不如相对于宽度计算，因为css默认的是水平流，计算值一定会有效
应用：实现一个宽高比为5:1的固定头图效果:以为B站的顶图是这样的，原来不是.发现一个不一样的，他的height：0.935vw
image.png
image.png
A站到是没什么特别的，但是这个地方有bug，可以点到之前的活动里面去
https://demo.cssworld.cn/4/2-3.php，都不是这个样子
3 .https://i0.hdslb.com/bfs/archive/edaa5977e1e9d1807b4b608074dac3076bc07ca1.png 以这个图片为基础实现一下功能吧
div{
padding: 5% 50%;
position: relative;
}
div img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div>
<img src="./b.png" alt="">
</div>
内联元素的padding
1 .内联元素的padding是会断行的，内联元素的padding是跟着内联盒模型中的行框盒子走的。如果一行文字显示不下，去下一行，padding也会跟着下去，此时的padding就会覆盖上一行的元素
2 .同时内联元素的padding会让幽灵空白节点出现.可以看出不是一个纯正方形
image.png
1 .padding:50%是相对于宽度来算的。如果正常的话应该是一个正方形，但是内联元素的垂直padding让幽灵节点显示出来
2 .内联元素的默认高度完全受font-size决定，只要设置font-size,让幽灵节点的高度为0，宽度就和高度一样了。长出的一点是幽灵节点的高度
标签元素内置的padding
1 .ou,ul内置padding-left，单位是px。如果列表中的font-size大小很小，li元素的项目符号就会和ul,ol的左边缘距离很大.如果font-size很大，就会从左边超出去。视觉要求很高的话，可以用计数器。padding-inline-start: 40px;ul的这个属性决定距离的大小。实测变小问题不大，感觉变大问题大一些
2 .表单内置的padding
1 .input,textarea在输入框有内置
2 .button都有内置padding
3 .select下拉元素
4 .radio，checkbox没有
3 .最难控制的button按钮：主要是一般没有这样操作的。用label完全表现button，但是这个要传id啊。还是要看下库是怎么实现的
<button id="btn"></button>
<label for="btn"></label>
button{
position:absolute,
clip:rect(0 0 0 0)
}
label{
display:inlineblock;
line-height:20px;
padding:10px;
}
4 .
image.png
input的outline属性
1 .outline属性在一个声明中设置所有轮廓属性。但是输入框focus的时候特别的突出
2 .轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
3 .廓线不会占据空间，也不一定是矩形.看起来像是一个很通用的属性
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
4 .轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响
padding与图形绘制
1 .padding属性和background-clip属性。主要使用这俩
1 .background-clip属性指定背景绘制区域。
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
2 .图形1：实现一个菜单icon
.icon-menu{
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
background-color: currentColor;
background-clip: content-box;
/* 实现中间那一条横杠 */
border-top:10px solid;
/* 上面那一条 */
border-bottom:10px solid;
/* 下面那一条 */
}
2 .图形2：实现一个圆环
image.png
1 .通过改变background-color:就可以实现自定义的选择框，实现选中还是未选中
网友评论