盒尺寸中的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辅助元素生成
1.2.2 content字符内容生成
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;}
完整案例：
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父子连续普照与递增
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也有作用
应用：
-
利用padding的常规应用：在不影响当前布局的情况下，优雅的增加链接或按钮的点击区域大小。如
article a { padding: .25em 0; } -
利用内联元素padding特性的应用：
内联元素padding与高度可控的分隔线 -
标题下方留出一定位置：
源代码：
<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的百分比值
-
与margin属性不同，padding不支持负值
-
padding支持百分比值，且padding百分比值无论是水平方向还是竖直方向均是相对于宽度计算的。
/一个正方形/
div { padding: 50%; }/一个宽高比2：1的矩形/
div { padding: 25% 50%; }
应用案例：百分比padding值与等比例头图效果
2.3 标签元素内置的padding
-
ol/ul列表内置padding-left，但是单位是px不是em。
根据张鑫旭老师的经验，font-size是12-14px时，22px是一个比较好的padding-left设定值，所有浏览器都能正常显示，且非常贴近边缘。ol,ul {
padding-left:22px;
} -
很多表单都内置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小节的的学习笔记，感谢张鑫旭老师，也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦
作为一个前端小白，如果学习笔记中有错误的地方，还请不吝指点，谢谢！
网友评论