让前端飞Web前端之路技术篇

盒尺寸四大家族之content与padding

2019-08-14  本文已影响10人  广陵周惊蛰

盒尺寸中的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>、

替换元素特点：

1.1.2 替换元素的默认dispaly值
替换元素的默认dispaly值

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

1.1.3 替换元素的计算尺寸

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

应用：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属性生成的元素和普通元素内容有不同的特性表现：

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小节的的学习笔记，感谢张鑫旭老师，也感谢阅读本文的你给我的鼓励!也欢迎来我的网页踩踩哦,网页里阅读更轻松~网页入口在这哦

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

上一篇 下一篇

猜你喜欢

热点阅读