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

　　对于block水平元素：①padding值暴走，一定会影响尺寸；②width非auto，padding影响尺寸；③width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。

　　对于inline水平元素：水平padding影响尺寸，垂直padding不影响尺寸，但是影响背景色。当垂直padding大到超出父容器，会影响scrollHeight。

2、padding负值和百分比值

　　关于padding负值：padding不支持任何形式的负值。

　　关于padding百分比值：padding百分比均是相对于宽度计算的。

　　inline水平元素的padding百分比值：①同样相对于宽度计算；②默认的高度宽度细节有差异；③padding会断行。

3、标签元素的内置padding

　　ol/ul列表：ol/li元素内置padding-left，但是单位是px不是em，例如chrome浏览器下是40px，所以字号很小间距就会很大，字号很大序号就会爬出容器。小经验：文字大小为12-14px时，padding-left取值22-25px会比较合适。

　　其他元素：①所有浏览器input/textarea输入框内置padding；②所有浏览器button按钮内置padding；③部分浏览器select下拉内置padding，如Firfox IE8+可以设置padding；④所有浏览器radio/checkbox单复选框无内置padding；⑤button按钮元素的padding最难控制。

　　button表单按钮padding：

　　

　　

　　正因为如此，我们在做按钮的时候多用<a>标签去模拟按钮

　　

4、padding与图形绘制

　　

5、padding与布局

　　使用百分比单位构建固定比例布局结构：

　　

　　配合margin等高布局：

　　

　　两栏自适应布局：

　　　

CSS深入理解学习笔记之padding的更多相关文章

  1. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  2. CSS深入理解学习笔记之float

    1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. CSS深入理解学习笔记之vertical-align

    1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...

  4. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  5. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  6. CSS深入理解学习笔记之line-height

    1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...

  7. CSS深入理解学习笔记之relative

    1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...

  8. CSS深入理解学习笔记之z-index

    1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...

  9. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

随机推荐

  1. 苹果内购和 Apple Pay

    作者:CC老师_MissCC链接:http://www.jianshu.com/p/e3bc47e81785來源:简书 苹果内购 1.什么是内购? 如果你购买的商品,是在本app中使用和消耗的,就一定 ...

  2. springcloud微服务总结二 注册中心

    一:netflix和springcloud关系 netflix公司开源了很多组件,包括服务注册与发现(Netflix Eureka).断路器(Netflix Hystrix).负载均衡(Netflix ...

  3. QT中QWidget、QDialog以及MainWindow的区别

    参考 http://blog.csdn.net/u011619422/article/details/47311101 QT中QWidget.QDialog以及MainWindow的区别 QWidge ...

  4. 接口登录存在动态token

    Jmeter接口登录时获取到的参数token一直在变的问题,导致运行时总是报错 解决方法如下: 1.新建一个GET的HTTP请求 2.添加正则表达式提取器 记得name="_token&qu ...

  5. Gson反序列化泛型实例

    1 package com.ppmoney.g2.mapper; import com.google.common.reflect.TypeToken; import com.google.gson. ...

  6. [转] 如何批量删除Docker中已经停止的容器

    [From]https://blog.csdn.net/csdn_duomaomao/article/details/78587103 方法一: #显示所有的容器,过滤出Exited状态的容器,取出这 ...

  7. pip安装时的异常，找不到lib2to3\\Grammar.txt

    [From] http://jahu.iteye.com/blog/2353325 异常 : [Errno 2] No such file or directory: 'd:\\python\\pyt ...

  8. iptables 命令记录

    安装 原理 基本命令 实践 脚本 1.安装 以centos 7为例子安装 yum install -q -y iptables-services配置 iptables [-t table] comma ...

  9. Spring Cload

    Spring Cloud 从入门到精通 转载: https://blog.csdn.net/valada/article/details/80892573 https://gitbook.cn/git ...

  10. 使用 PuTTY 时遇到错误：“expected key exchange group packet from server”

    情况 使用 PuTTY 通过 SSH 访问 ProxySG 或 Advanced Secure Gateway (ASG) 时,您会看到如下错误:"expected key exchange ...