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. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  2. Flask (五) RESTful API

    RESTful API 什么是REST 一种软件架构风格.设计风格.而不是标准,只是提供了一组设计原则和约束条件.它主要用户客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易 ...

  3. 011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)

    1.TabLayout介绍 TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,简书,知乎等.TabLayout就可以很好的完成这一职责,首先TabLay ...

  4. css类选择器中 空格 逗号 啥都不填的区别及其他笔记

    .a.b 代表 一个元素上 同时 有 a 类 和 b 类 .a .b (中间有空格) 代表 .b 是 .a 的子元素选择. .a,.b 代表 class='a' 和 class='b' 都会被选择上.

  5. python之常用的数据类型

    1. 变量的定义以及声明 在学习变量之前,咱们需要知道变量的命名规则: ① 变量必须由数字字母下划线构成,如a_1 ② 变量名不能以数字开头,如1a ③ 需要遵循驼峰命名法 给变量赋值通常采用“=”, ...

  6. SPOJ - DQUERY 莫队

    题意:给定\(a[1...n]\),\(Q\)次询问,每次统计\([L,R]\)范围内有多少个不同的数字 xjb乱写就A了,莫队真好玩 #include<iostream> #includ ...

  7. 关于XML的验证(DTD与XSD)一点实践

    [转自] http://blog.chinaunix.net/uid-276853-id-366491.html 关于XML的验证一点实践 1)此方法是在XML文档中绑定对应的DTD文件来进行的 // ...

  8. kafka producer参数详解

    https://my.oschina.net/u/218540/blog/1794669/

  9. gulp打包js

    在终端定位到你要创建目录的地方,输入 sudo mkdir js 创建文件夹,这个文件夹就是放你要压缩js文件的地方 输入 sudo vim gulpfile.js 这个js就是写gulp所有的配置信 ...

  10. DB Intro - MongoDB Basic

    mongoDB basic from:http://www.tutorialspoint.com/mongodb prject:https://github.com/chenxing12/l4mong ...