css-padding
- 对于block水平元素
- padding值暴走,一定会影响尺寸
- width非auto,padding影响尺寸
- width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸
- 对于inline水平元素
- 水平padding影响尺寸,垂直padding不影响尺寸,但是会影响背景色(占据空间)
应用
- 高度可控的分割线
- 直接使用字符:注册 | 退出登录
- inline-block控制:注册 | 退出登录
- 使用inline padding:注册 | 退出登录
<p>注册<span></span>退出登录</p>
span{
padding:16px 6px 1px ; //上,下向对应方向延伸| 右侧向与margin-left保证左右间距
margin-left:12px;
border-left:2px solid; //生成| 左侧竖杠
font-size:0px;
}
<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:150px;
height:150px;
padding:10px; //内圈白
border:10px solid; //外圈黑
border-radius:50%;
background-color:currentColor; //核心黑
background-clip:content-box; //背景在内容区域显示
}
padding百分比值
- padding相对与宽度计算,padding:50% 实现正方形
- 实现正方形app头图,实现不同屏幕下的兼容,部分安卓不支持vm单位
<div class="container">
<div class="example">
<h2>笔记笔记</h2>
<h4>慕课网</h4>
</div>
</div>
.container{
padding:50%;
background:url(xx);
background-size:100%;
position:relative;
}
.example{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
标签元素的内置padding
- ol/ul
- ol/ul元素内置padding-left,但是单位是px不是em--绝对单位,特例
- chrome浏览器下是40px;--产生对齐问题
- 如果字号很小,间距就会很开
- 所以如果字号很大,序号会爬到容器外面
- 一般文字大小12-16px,设置padding-left为22-25基本实现序号与图片对齐
- 表单元素
应用--label实现按钮的样式,功能兼容--隐藏btn按钮
<button id="btn"></button>
<label for="btn">按钮</label>
label{
display:inline-block;
line-height:20px;
padding:10px;
}
实战应用
- 使用百分比单位构建固定比例布局结构
- padding:50%;
- 配合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;
}
<div class='box'>
<div class="child-orange">
<div>左黄</div>
<div>左黄</div>
<div>左黄</div>
</div>
<div class="child-green">
<div>右绿</div>
<div>右绿</div>
</div>
</div>
- 两栏自适应布局
//1. padding在容器上
<div class='pbox'>
<img src='xx'>文字xxx
</div>
.pbox{
padding-left:120px; //图片宽度 将图片放到padding范围内
}
.pbox img{
float:left;
margin-left:-120px; //空出图片宽度的区域
}
//2. padding在子元素上
<div>
<img src='xx'>
<div class='auto'>文字xxxx</div>
</div>
img{
float:left;
}
.auto{
padding-left:120px;
}
网友评论