CSS：盒子模型

盒子模型

CSS padding(内边距)

padding：会受到框中填充的背景颜色影响

对于block水平元素

1、padding值暴走，一定会影响元素尺寸

2、width为具体数值，padding一定会影响元素尺寸

3、width值为auto或box-sizing为border-box,并且padding值没有暴走，这时padding不影响尺寸

对于inline水平元素：水平padding影响尺寸，垂直padding不会影响尺寸，会影响背景色

padding不支持任何形式的负值

padding的百分比是相对于宽度计算的   

div{padding:50%}可以形成一个正方形

inline水平元素的padding百分比值：

1、同样相对于宽度计算

2、默认的高度宽度细节有差异 div{padding:50%}不会是一个正方形，高度比宽度高

3、padding会断行

标签元素的内置padding

ol/ul元素内置padding-left,单位是px

平时网页开发时，文字大小通常是12px,14px.padding-left:22-25px.基本可以实现序号与内容对齐

表单元素的内置padding

所有浏览器的input/textarea输入框都有内置padding,一般1-2像素

所有浏览器button按钮都有内置padding,但是很难控制

button通过label标签来实现，兼容性很好

<button id="btn"></button>

<label for="#btn">按钮</label>

部分浏览器select下拉内置padding

所有浏览器radio/checkbox无内置padding