盒尺寸中的4个盒子content box、padding box、border box 和margin box分别对应CSS世界中的content、padding、border和margin属性,这四个属性称为“盒尺寸四大家族”,让我们前去探秘吧!
一、深入理解content
1.1 content与替换元素
1.1.1 替换元素
替换元素:通过修改某个属性值呈现的内容就可以被替换的元素。
典型例子:、
替换元素特点:
- 内容外观不受页面上的CSS影响
- 有自己的尺寸
- 在很多CSS属性上有自己的一套变现规则(例如vertical-align属性)
1.1.2 替换元素的默认dispaly值
用途:显示替换元素时候可以设置style.display='inline'而无需style.display='inline-block'。
1.1.3 替换元素的计算尺寸
替换元素的尺寸从内到外:固有尺寸、HTML尺寸、CSS尺寸
固有尺寸:固定大小,例如
:,此时的尺寸即为固有尺寸,使用px为单位。
-
HTML尺寸:只能通过HTML原生属性改变。如
:
CSS尺寸:通过CSS设置的width和height或者max-width/min-width和max-height/min-height设置的尺寸对应盒尺寸的content box
应用:Web开发时,为提高加载性能以及节约带宽费用,首屏以下的图片就会通过滚屏加载的形式异步加载,然后,这个即将被异步加载的图片为了布局稳健、体验良好,往往使用一张透明的图片占位。例如
实际上,这张透明的占位图片也是多余资源,我么直接:
然后配合CSS可以实现一样的效果:
img { visibility: hidden;
display: inline-block;
}
img[scr] {visibility: vidible; }
注意:这里的直接没有scr属性,而是scr="",scr=""这在很多浏览器下依然会有请求,而且请求的是当前页面数据。当图片的scr属性缺省时,图片不会有任何请求,这是最高效的实现方式。
1.1.4 替换元素与非替换元素
观点1:他们之间只隔了一个src属性。应用案例:基于伪元素的图片内容生成技术
观点2:他们之间只隔了一个CSS content属性。应用案例:使用content属性,让普通标签元素变成替换元素;完美的文字换图显示方案
HTML:
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开启闭合图片生成
可以针对不同语言指定不同的前后引号。但是这个功能很鸡肋,不如直接使用“”‘’方便。
中文使用“”
英文使用""
/*为不同的语言指定引号的表现*/
: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()方法才能实现计数嵌套效果。
我是王小二
我是王小二的大儿子
我是王小二的二儿子
我是王小二的二儿子的大孙子
我是王小二的二儿子的二孙子
我是王小二的二儿子的小孙子
我是王小二的三儿子
我是王小三
我是王小四
我是王小四的大儿子
错误示范:CSS计数器counters的错误示范
注意:这种计数效果在模拟书籍的目录效果时十分实用。这里需要强调的是:显示counter计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素的后面,否则是没有技术效果的。
1.2.4 content内容生成的混合特性
各种content内容生成语法是可以混合在一起使用的。
二、温和的padding属性
padding性格温和,与人相处友好,在使用padding属性进行页面开发过程中,很少会出现意想不到的情况。
padding指的是盒子的内补间
2.1 padding与元素的尺寸
因为CSS中默认的box-sizing是content-box,所以使用padding会增加元素的尺寸。
误区:内联元素的padding只会影响水平方向,不会影响垂直方向。这是错误的!
正解:内联元素padding对视觉层和布局层具有双重影响。案例:内联元素垂直padding也有作用
应用:
-
利用padding的常规应用:在不影响当前布局的情况下,优雅的增加链接或按钮的点击区域大小。如
article a { padding: .25em 0; }
利用内联元素padding特性的应用:
内联元素padding与高度可控的分隔线标题下方留出一定位置:
源代码:
标题
h3{
line-height: 30px;
font-size: 14px;
}
现在:
标题
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{
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小节的的学习笔记,感谢张鑫旭老师,也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦
作为一个前端小白,如果学习笔记中有错误的地方,还请不吝指点,谢谢!