盒尺寸四大家族之content与padding

盒尺寸中的4个盒子content box、padding box、border box 和margin box分别对应CSS世界中的content、padding、border和margin属性，这四个属性称为“盒尺寸四大家族”，让我们前去探秘吧！

一、深入了解content

image

1.1 content与替换元素

1.1.1 替换元素

替换元素：通过修改某个属性值呈现的内容即可以被替换的元素。

典型例子：<img>、<object>、<video>、<iframe>、表单元素<textarea>、<input>、

替换元素特点：

• 内容外观不受页面上的CSS影响
• 有自己的尺寸
• 在很多CSS属性上有自己的一套变现规则（例如vertical-align属性）

1.1.2 替换元素的默认dispaly值

替换元素的默认dispaly值

用途：显示替换元素时候可以设置style.display=’inline’而无需style.display=’inline-block’。

1.1.3 替换元素的计算尺寸

替换元素的尺寸从内到外：固有尺寸、HTML尺寸、CSS尺寸

• 固有尺寸：固定大小，例如<input>:<input>，此时的尺寸即为固有尺寸，使用px为单位。

• HTML尺寸：只能通过HTML原生属性改变。如<img width="300" height="100">:

  <img width=”300″ height=”100″>

• CSS尺寸：通过CSS设置的width和height或者者max-width/min-width和max-height/min-height设置的尺寸对应盒尺寸的content box

应用：Web开发时，为提高加载性能以及节约带宽费用，首屏以下的图片就会通过滚屏加载的形式异步加载，而后，这个即将被异步加载的图片为了布局稳健、体验良好，往往使用一张透明的图片占位。例如

<img scr="transparent.png">

实际上，这张透明的占位图片也是多余资源，我么直接：

<img>

而后配合CSS可以实现一样的效果：

img { visibility: hidden;      display: inline-block;     }img[scr] {visibility: vidible; }

注意：这里的<img>直接没有scr属性，而是scr=””,scr=””这在很多浏览器下仍然会有请求，而且请求的是当前页面数据。当图片的scr属性缺省时，图片不会有任何请求，这是最高效的实现方式。

1.1.4 替换元素与非替换元素

观点1：他们之间只隔了一个src属性。应用案例：基于伪元素的图片内容生成技术

观点2：他们之间只隔了一个CSS content属性。应用案例：使用content属性，让普通标签元素变成替换元素；完美的文字换图显示方案

HTML：<img class="emoji" src="laugh.png">CSS：.emoji:hover {content: url(laugh-tear.png);}

注意：想要在手机端使用该技术，建议换成SVG矢量图片

1.1.5 content与替换元素关系剖析

在CSS世界，我们把content属性生成的对象称为“匿名替换元素”，content属性生成的内容都是替换元素。

content属性生成的元素和普通元素内容有不同的特性体现：

• 使用content生成的文本是无法选择复制的
• 不能左右empty伪类（案例在此）
• content动态生成值无法获取
• 其余略

1.2 content内容生成技术

实际项目中，content属性大都是用在：：before/：：after这两个伪元素中，所以“content内容生成技术”有时候也称“：：before/：：after伪元素技术”

1.2.1 content辅助元素生成

案例content辅助元素与布局

1.2.2 content字符内容生成

案例配合@font-face规则实现图标字体效果

案例content换行符与打点loading效果

1.2.3 content图片生成

伪元素中的图片更多的是使用background-image模拟，相似：

div：before {    content：‘’;    background： url(1.jpg);}

content图片生成并不常用，由于不好控制图片尺寸，所以，只有不需要控制尺寸的图片才有优势。
案例content图片生成与新标签页地址标记

1.2.4 content开启闭合图片生成

可以针对不同语言指定不同的前后引号。但是这个功能很鸡肋，不如直接使用“”‘’方便。

<p lang="ch"><q>中文使用“”</q></p><p lang="en"><q>英文使用""</q></p>/*为不同的语言指定引号的体现*/：lang(ch) > q { quotes: ‘“’ ‘”’；}：lang(en) > q { quotes: ‘"’ ‘"’；}/*在q标签前后插入引号*/q:before { content: open-quote;}q:after { content: close-quote;}

1.2.5 content atter属性值内容生成

这个功能比较实用，案例src缺省时img元素的alt信息展现

1.2.6 深入理解content计数器

计数器效果可以说是content部分的重中之重，由于此功能强大、实用、且不具备可替代性，甚至可以实现连JavaScript都实现不好的功能。

CSS计数器就和我们军训报数一样，班级命名、报数规则、开始报数，这三个关键点恰好对应CSS计数器的两个属性和一个方法。

1、属性counter-reset（计数器-重置）

注意：假如不设置，默认起始值为0。

/*确定计数器名称wangxiaoer，起始值2*/.xxx { counter-reset: wangxiaoer 2;}

完整案例：

CSS计数器counter-reset值为2

CSS计数器counter-reset两个命名并存

2、属性counter-increment（计数器递增）

注意：假如不设置，默认变化值为1。

/*变化的值为2*/counter-increament: counter 2/*变化的值为-1*/counter-increament: counter -1

CSS计数器的技术规则：普照规则

普照规则:普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源添加一次计数值。

案例：

CSS计数器counter-reset/counter-increment递增

CSS计数器counter-increment父子连续普照与递增

CSS计数器counter-increment递增机制

3、方法counter（）/counters（）

counter（）作用：显示计数、不过方法、用法多个

/*name是counter-reset的名称，style参数选择递增递减方式*/counter（ name，style）

style参数的作用是递增递减英文字母或者者罗马文等案例：CSS计数器counter()方法style参数示意

counter支持级联：一个counter属性值可以有多个counter（）方法，案例：CSS计数器多个counter并存

counters（）：嵌套技术的代名词。

/*name是counter-reset的名称，string为字符串*/counters（ name，string）/*也支持style*/counters（ name，string, style）

string为字符串,表示子序号的连接字符串，如1.1的string就是.,案例：CSS计数器counters的string参数与嵌套

注意：普照源是唯一的。要想实现嵌套，必需让每一个列表容器拥有一个“普照源”，通过子辈对父辈的counter-reset重置、配合counters（）方法才能实现计数嵌套效果。

<div class="reset"><div class="counter">我是王小二    <div class="reset">        <div class="counter">我是王小二的大儿子</div>        <div class="counter">我是王小二的二儿子            <div class="reset">                <div class="counter">我是王小二的二儿子的大孙子</div>                <div class="counter">我是王小二的二儿子的二孙子</div>                <div class="counter">我是王小二的二儿子的小孙子</div>            </div>        </div>        <div class="counter">我是王小二的三儿子</div>    </div></div><div class="counter">我是王小三</div><div class="counter">我是王小四    <div class="reset">        <div class="counter">我是王小四的大儿子</div>    </div></div></div>

错误示范：CSS计数器counters的错误示范

注意：这种计数效果在模拟书籍的目录效果时十分实用。这里需要强调的是：显示counter计数值的那个DOM元素在文档流中的位置肯定要在counter-increment元素的后面，否则是没有技术效果的。

1.2.4 content内容生成的混合特性

各种content内容生成语法是可以混合在一起使用的。

二、温和的padding属性

padding性格温和，与人相处友好，在使用padding属性进行页面开发过程中，很少会出现意想不到的情况。

padding指的是盒子的内补间

image

2.1 padding与元素的尺寸

由于CSS中默认的box-sizing是content-box,所以使用padding会添加元素的尺寸。

误区：内联元素的padding只会影响水平方向，不会影响垂直方向。这是错误的！

正解：内联元素padding对视觉层和布局层具备双重影响。案例：内联元素垂直padding也有作用

应用：

1. 利用padding的常规应用：在不影响当前布局的情况下，优雅的添加链接或者按钮的点击区域大小。如

   article a { padding: .25em 0; }

2. 利用内联元素padding特性的应用：
   内联元素padding与高度可控的分隔线

3. 标题下方留出肯定位置：

源代码：

<h3><span id="hash">标题</span></h3>h3{    line-height: 30px;    font-size: 14px;}

现在：

<h3><span id="hash">标题</span></h3>h3{    line-height: 30px;    font-size: 14px;h3 > span {    padding-top: 58px;}

2.2 padding的百分比值

1. 与margin属性不同，padding不支持负值

2. padding支持百分比值，且padding百分比值无论是水平方向还是竖直方向均是相对于宽度计算的。

   /一个正方形/
   div { padding: 50%; }

   /一个宽高比2：1的矩形/
   div { padding: 25% 50%; }

应用案例：百分比padding值与等比例头图效果

2.3 标签元素内置的padding

1. ol/ul列表内置padding-left，但是单位是px不是em。
   根据张鑫旭老师的经验，font-size是12-14px时，22px是一个比较好的padding-left设定值，所有浏览器都能正常显示，且非常贴近边缘。

   ol,ul {
   padding-left:22px;
   }

2. 很多表单都内置padding

案例：button 与 label 配合使用，使得即语义良好行为保留又UI效果好。

<button id="btn"></button><label for="but">按钮</label>button{    position: absolute;    clip: rect(0 0 0 0);}label{    display: inline-block;    line-height: 20px;    padding: 10px;}

2.4 padding与图形绘制

padding属性与background-clip属性配合，可以在有限的标签下实现少量CSS图形绘制效果。

案例：三道杠和双层圆点图形生成

三、致谢

本文内容我对张鑫旭老师《CSS世界》第四章1、2小节的的学习笔记，感谢张鑫旭老师，也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦

作为一个前台小白，假如学习笔记中有错误的地方，还请不吝指点，谢谢！