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. 如果将markdown视作一门编程语言可以做哪些有趣的事情?

    如题,然后就有了为解决这个好奇而开的项目:https://github.com/racaljk/llmd 源码主要是parser+interpreter,其中parser使用sundown,然后生成l ...

  2. 微信发送模版消息，PHP代码简单案例

    function http_request($url,$data=array()){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); c ...

  3. jQuery 遍历 - closest() 方法

    jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...

  4. springboot整合mybatis,druid,mybatis-generator插件完整版

    一 springboot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  5. C. Magic Ship （思维+二分）

    https://codeforces.com/contest/1117/problem/C 你是一个船长.最初你在点 (x1,y1) (显然,大海上的所有点都可以用平面直角坐标描述),你想去点 (x2 ...

  6. 1085 PAT单位排行 （25 分

    每次 PAT 考试结束后,考试中心都会发布一个考生单位排行榜.本题就请你实现这个功能. 输入格式: 输入第一行给出一个正整数 N(≤),即考生人数.随后 N 行,每行按下列格式给出一个考生的信息: 准 ...

  7. hdu1022 模拟栈

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  8. CNN Advanced

    from sys import path path.append('/home/ustcjing/models/tutorials/image/cifar10/') import cifar10,ci ...

  9. EntityFramework CodeFirst 数据库迁移

    参考: https://msdn.microsoft.com/en-us/data/jj591621 https://msdn.microsoft.com/en-us/library/dd394698 ...

  10. PIE SDK地图鹰眼图

    鹰眼图,是GIS的一个基本功能,在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置,是对全局地图的一种概述表达,能够起到很好的空间提示和导航的作用.网上有很多Arcengine 二 ...