前端笔记-css padding

CSS padding
1.对于block元素
width：auto或box-sizing为border-box时，
padding不会影响元素尺寸，但padding过大则会影响
2对于line水平元素
水平padding影响尺寸，垂直不影响尺寸，但是会影响背景色（占据空间）

CSS padding负值，百分比值
1.padding不支持任何格式负值
2.百分比值，相对于宽度计算
实现正方形：padding:50%;相对于父级宽度
3.inline水平元素的padding百分比
同样相对于宽度计算
默认的高度宽度细节有差异:
inline元素的垂直padding会让“幽灵空白结点”显现，也就是规范中的strut(font-
size:0
padding会断行:
内部文字换行不是正方形

 

ol/ul列表
1.ol/li元素内置padding-left，但是单位是px不是em---em相对于字大小
2.如果字号很小，间距很大
3.字号很大，序号会爬到容器外面

文字大小一般12/14px padding-left:22px 最大不超过25px

表单元素
所有浏览器input/textarea输入框内置padding
所有浏览器button按钮内置padding
部分浏览器select下拉内置padding，火狐 ie8+可以设置padding
所有浏览器radio/checkbox单复选框无内置padding

button表单按钮padding
1.谷歌
2.火狐
设置padding：0 左右依然有padding
方法：button::-moz-focus-inner{padding:0;}
3.IE浏览器
IE7文字越多，左右padding逐渐变大
button{overflow:visible;}
4.padding与高度计算不兼容
IE8+ 和谷歌正常
一般用<a>标签模拟button
用label标签实现button
<label for="btn">按钮</label>
label{
display:inline-block;
line-height:20px;
padding:10px;

}

padding实现图形绘制
background-clip:content-box;
可以让padding区域透明不被background-color填充

实现三道杠：
<div class="line-tri"></div>
.line-tri{
width: 150px;
height: 30px;
padding: 15px 0;
border-top: 30px solid;
border-bottom: 30px solid;
background-color: currentColor;
background-clip: content-box;
}

实现白眼效果
<div class="eye"></div>
eye{
width: 50px;
height: 50px;
border:5px solid;
border-radius: 50%;
padding: 8px;
background-color: currentColor;
background-clip: content-box;
}

布局实例：
1.使用百分比单位构建固定比例布局结构
移动端1:1头图布局
div{
padding:50%;
}
2.配合margin实现等高布局
.box{
overflow: hidden;
resize:vertical;
}
.child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;}
.child-orange{
float: left;background: orange;
}
.child-green{
float: left;background: green;
}很大的margin-bottom负值，很大的padding-bottom填充缺失空间
3.两栏自适应布局
padding在容器上
图片宽度固定，然后后面文字信息自适应的效果。原理如下：容器有个固定的padding-
left值,此时图文应该在120像素处显示，但是图片margin负值浮动到容器左上角

padding在容器上：
.pbox{
padding-left: 120px;
}
.pbox img{
float: left;
margin-left: -120px;
}
<div class="pbox">
<img src="mm.jpg">
duanluo...
</div>
padding在子元素上：
img{
float：left；
}
.auto{
padding-left:120px;
}
<div>
<img src="mm.jpg">
<div class="auto">duanluo...</div>
</div>

转载于:https://www.cnblogs.com/jieyi/p/8361497.html