css笔记 - 张鑫旭css课程笔记之 padding 篇

padding

一、padding与容器尺寸之间的关系

padding会影响元素的尺寸（增加/挤压内容区域）

对于block元素 1.没宽度设置的情况：垂直向外扩张，水平向内挤压 上下padding会增加元素占据的尺寸（即看上去高度在增加），左右因为元素宽度已经auto，不会变化。但是内容区域会在水平元素上被挤压。 2.不管有没有高度设置：垂直方向的向外扩张 也不会挤压垂直方向的内容区域。只会增加垂直方向的占据尺寸。 3.有宽度的情况：四个方向均向外扩张 上下padding会增加元素占据的宽、高尺寸，因为宽度固定，不会挤压内容区域的尺寸，增加的padding只会扩张元素的疆土。就像一个人吃胖了。 介于没有宽度设置就不会影响宽度，只会向内挤压，所以在设置宽度的基础上实验： 4.有宽度、有box-sizing的情况：垂直方向向外扩张，水平方向向内挤压。 现象同第一点，但仔细想想，原理和第1点一样，固定了宽度就像第一点中，block元素没有宽度，那就是屏幕的宽度。也是一种有宽度的情况。外部尺寸盒子宽度不变，内部容器盒子加padding组成整个外部尺寸盒子的宽度。padding增加，内部容器盒子响应的就得减少。可以理解为有宽度不设置box-sizing的时候，外部尺寸盒子与内部容器盒子是一体的，用了box-sizing后让二者成了包裹关系，加上固宽，才会有这个现象。 但是第4点同第1点一样的现象是，padding值过大，单方向的padding值（比如padding-left）大于元素的宽度的50%，宽度的值会被增加，内收过头就成了外扩的现象。 5.有宽度、没box-sizing的情况： 四个方向均向外扩张，同第3点。 扩张表现：上边向下，左边向右，右边向左，下边向上。向内挤压式的扩张。

padding在内联元素的表现 1.不做任何设置的表现：水平padding影响尺寸，垂直padding不影响尺寸。但是会影响背景色区域（占据的空间） 左右padding会撑开水平方向占据的尺寸，拉开与相邻元素的距离，上下padding也会撑开占据的尺寸，但是不会顶走上下相邻的block元素，对block没有威胁，对inline元素有威胁。会顶走相同的inline元素。 2. 在block元素中，block设置宽度与否，padding均不能影响到父元素的尺寸表现。只会向外扩张自己的尺寸， 扩张表现：不是向四周扩张，左边向右边扩张，上向上、下向下、右向右方向扩张，左边界在原来的位置不动 2.设置宽度？有用吗？当然没用！ 3.设置box-sizing能行吗？不能行。感觉box-sizing是针对有宽度的block类型元素的

padding撑开尺寸的用途： 做一个常见的右边线效果：登录 | 注册

二、padding负值和百分比值

padding负值报错 padding百分比值均是相对于宽度计算的，同margin

利用padding：50%；实现一个正方形效果： 是可自适应式的额。如果写成固定值也是可以的，但是不能根据屏幕变化自适应。 原理可以想象田字格，兼容性也很好。 block元素，可以直接padding 50%加上背景色实现一个正方形 inline元素，还要设置font-size为0，不然高度会比宽度高出字体的高度。即使是空的div没有文字的情况下。 内联元素的上下padding会穿透，被上下元素挤压，尽量别用。

空inline元素+padding宽高不相等 <span class="dot"></span> .dot{ background: green; padding: 20px; /* 这样，元素宽40，高61。即使是一个空文本。因为文字高度还占21，设置font-size：0就没事了。 */ }

三、padding断行现象

四、padding的一些小知识

所有浏览器input/textarea输入框都有内置padding 1-2像素的 所有浏览器button按钮内置padding 可以直接设置padding：0取消padding 但是火狐下要单独处理：button::-moz-focus-inner{padding：0；} ie7下文字越多，padding左右值越大：给按钮设置overflow：visible；即可正常。 所以建议是，不要使用button标签，能不用就别用。 非要用button，可以用label曲线救国：button#btn（display：none；或者z-index=-1） label for="btn" 部分浏览器（如火狐）下拉select有padding值，比如firefox、ie8+可以设置padding 所有浏览器的radio、checkbox单复选框无内置padding，设置也没用

五、padding应用：

右边小竖线 正方形效果 两栏等高布局 两栏自适应布局（左头像右文字） padding绘制小icon（三条杠、游泳圈）

2018.07.26