「CSS世界」深入浅出·盒子模型之content box

Merlin_nil
267 阅读4分钟

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」。

《CSS世界》阅读进度：73/328页，笔记持续更新... 盒尺寸四大家族

  • content box
  • padding box
  • border box
  • margin box

（一）深入了解content

（1）替换元素与content

替换元素特性

  • 内容可替换
  • 内容的外观不受页面上css影响
  • 有自己的尺寸
  • 在很多 CSS 属性上有自己的一套表现规则

替换元素尺寸计算规则

  • 从内到外分为三层

    • 固有尺寸：本身具有的尺寸
    • HTML尺寸：HTML标签上的属性
    • CSS尺寸：通过css设定的尺寸

  • CSS尺寸 > HTML尺寸 > 固有尺寸

  • 仅设置了宽度或仅设置了高度，比例不变

  • 默认固有尺寸：宽度 300 像素，高度 150 像素，宽高比 2:1

  • 内联替换元素和块级替换元素使用同一套尺寸计算规则。

  • 特例：标签

    为了提高加载性能以及节约带宽费用，首屏以下的图片就会通过滚屏加载的方式异步加载，直接没有 src 属性，图片不会有任何请求，是最高效的实现方式。

    对于 Firefox 浏览器，src 缺省的不是替换元素，而是一个普通的内联元素，所以使用的就不是替换元素的尺寸规则，而是类似的内联元素尺寸规则，宽高会无效。

    修复：img { display: inline-block; }

  • 固定和尺寸无法改变

    • 例子：demo.cssworld.cn/4/1-1.php

    • 利用CSS3中object-fit 属性修改替换元素的替换内容的适配方式

      • fill（默认）
      • contain
      • none
      • ...

我们可以对<img>元素使用::before 和::after 伪元素进行内容生成以及样式构建，但是这种方法支持是有限制的。

  • Chrome 和 Firefox 等浏览器支持，但 IE浏览器不支持

    • 不能有 src 属性（证明观点的关键所在）；
    • 不能使用 content 属性生成图片（针对 Chrome）；
    • 需要有 alt 属性并有值（针对 Chrome）；

  • 灵活使用CSS content属性

    • css设置图片src
    • hover换图
    • h1标签换图片

注意：

  • content是无法选中、无法复制、无法被屏幕阅读设备读取，也无法被搜索引擎抓取。
  • 不能改变:empty 伪类
  • content 动态生成值无法获取。

（2）content内容生成技术

  • content 辅助元素生成

    • 清除浮动影响

       .clear:after { 
    content: ''; 
    display: table; /* 也可以是'block' */ 
    clear: both; 
 }

    • 实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果

  • content 字符内容生成

    • 配合@font-face 规则或Unicode实现图标字体效果。

       @font-face { 
    font-family: "myico"; 
    src: url("/fonts/4/myico.eot"); 
    src: url("/fonts/4/myico.eot#iefix") format("embedded-opentype"), 
    url("/fonts/4/myico.ttf") format("truetype"), 
    url("/fonts/4/myico.woff") format("woff"); 
 } 
 .icon-home:before { 
    font-size: 64px; 
    font-family: myico; 
    content: "家"; 
 } 
 <span class="icon-home"></span>

    • 实现打点loading动画效果

  • 了解 content 开启闭合符号生成

    • open-quote 和 close-quote
    • no-open-quote 和 no-close-quote

  • content attr 属性值内容生成

    • 除了原生的 HTML 属性，自定义的 HTML 属性也是可以生成的
    • 例子：利用 alt 属性显示图片描述信息

  • 深入理解 content 计数器

    • counter-reset
     .xxx { counter-reset: 计数器名称 默认起始值; }
 /* 多个计数器同时命名 */
 .xxx { counter-reset: 计数器名称1 2 计数器名称2 3 ...; }
    • counter-increment
     .counter { 
  counter-increment: 计数器名称 递增值（默认为1）; 
 }
 .counter { 
  counter-increment: 计数器名称1 递增值 计数器名称2 递增值; 
 }

    • counter()

      显示计数器的数值

     counter(name)
 counter(name,style)
 /* 支持级联 */
 .xxx{ content: counter() '\A' counter()}

     counters(name,string)

    你不小心把计数显示和计数重置元素以兄弟元素形式放在一起（虽然 HTML 内容布局呈现是没有异常的），就很可能会出现计数序号乱入的情况。

    • 最后：显示 content 计数值的那个 DOM 元素在文档流中的位置一定要在 counter-increment元素的后面，否则是没有计数效果的。

  • content 内容生成的混合特性

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

avatar
文章
阅读
粉丝