一,对于block元素
padding是会影响元素的尺寸的。
DOM文档:
<div class="box"></div>
css清单:
.box{ width:200px; height:200px; background-color: #ffed53; padding:20px; }
实际效果: 元素大小240*240 ,因为有padding:20px.
结论:padding会对block元素的尺寸产生影响。
二,对于block水平元素,但是auto或box-sizing为border-box的时候
DOM文档:
<div class="box">文字的位置在哪里呢?</div>
css清单:
.box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 10px; }
实际效果:box大小还是200*200,但是文字内容还是有了左padding----10px
当padding大小超过宽高时,
css样式:
.box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 200px; }
实际效果:400px*200px ----宽度为padding的宽度
结论:对于block水平元素,但是auto或box-sizing为border-box的时候,padding不会影响元素的尺寸....但是当padding
大小超过宽高时,宽高按padding的宽高显示,里面的文字按最小宽度显示。
最终结论:
对于block元素:
1,padding值暴走,一定会影响尺寸。
2,width非auto,padding影响尺寸。
3,width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸。
三,对于inline水平元素
水平padding影响尺寸,垂直padding不影响尺寸,但会影响背景色(占据空间)
DOM文档:
<span class="box">文字的位置在哪里呢?</span>
css样式:
.box{
background-color: #ffed53;
padding:40px;
}
垂直padding影响了背景色。
如何利用这一特性:
实现高度可控的分隔线
1,直接使用字符:注册 | 登录
2,inline-block控制: 注册 | 退出登录
3,使用inline padding: 注册 | 退出登录
DOM文档:
注册<span></span>退出登录
css清单:
span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; }
3关于padding负值
padding不支持任何形式的负值
4,关于padding的百分比值
padding百分比均是相对于父元素的宽度计算的
运用,轻松实现一个正方形:
DOM文档:
<div class="container"> <div class="box"></div> </div>
css清单:
.container{ width:100px; height:200px; } .box{ background-color: #8ec63f; padding:50%; }
50*50px的正方形:
不同手机分辨率正方形布局:
3,inline水平元素的padding百分比值
1,同样相对于宽度计算
2,默认的高度宽度细节有差异
3,padding会断行
<style> .container{ width:100px; height:200px; } .box{ background-color: #8ec63f; padding:50%; } </style> </head> <body> <div class="container"> <span class="box">若干文字</span> </div>
第三节 标签元素的内置padding
1,ol/ul列表
1,ol/li元素内置padding-left,但是单位是px,不是em
2. 例如Chrome浏览器下是40px ;
3. 所以如果字号很小,间距就会很开;
4. 所以如果字号很大,序号会爬到容器外面;
备注:文字大小一般为12px~14px ,padding-left 为22px~25px,基本可以实号与下面的内容对齐。
二. 表单元素的内置padding
1. 所有浏览器input/textarea输入框内置padding;
2. 所有button按钮内置padding;
3. 部分浏览器select下拉内置padding,如FireFox、IE8+可以设置padding;
4. 所有浏览器radio/checkbox单复选框内无内置padding;就算设置也没用。
5. button 按钮元素的padding最难控制;
1). Chrome浏览器 padding设为0有效;
2). FireFox浏览器设置padding:0左右依旧有padding;可以用button::-moz-focus-inner { padding:0 }设置padding为0。
3). IE浏览器:IE7文字越多,左右padding逐渐变大!可以设置button { overflow: visible; }使左右padding为0;
4). padding与高度计算的不兼容。
button{
line-height: 20px;
padding: 10px;
border : none;
}
高度:
- IE7: 45px; ?
- IE8+: 40px;
- FireFox: 42px; ?
- Chrome: 40px;
建议:<button id="btn"></button> <label for="btn">按钮</label>
label{
display: inline-block;
line-height: 20px;
padding: 10px;
}
高度:
- IE7: 40px;
- IE8+: 40px;
- FireFox: 40px;
- Chrome: 40px;
第四节,图形绘制
1,实现3道杠效果
备注:background-clip:content-box ; /**背景色不在padding区域显示**/
2,实现白眼效果
第五节--css padding与布局
2,实现等高布局
3 ,两栏自适应布局