《css世界》笔记

May 8, 2019

流、元素与基本尺寸

百分比

百分比需要父级支持才能才可以生效,否则宽、高永远是0。如:

html,body{
    height:100%;
}

书中一个示例如下:

<div class="box">
<style>
.box {
  display: inline-block;
  white-space: nowrap;
  background-color: #cd0000;
}
.text {
  display: inline-block;
  width: 100%;
  background-color: #34538b;
  color: #fff;
}
</style>
  <img src="https://demo.cssworld.cn/images/common/m/1.jpg">
  <span class="text">红色背景是父级</span>
</div>

红色背景是父级

造成这种现象的原因与浏览器渲染顺序有关:

{{< uml >}} graph LR; 下载文档内容-->加载头部的样式资源; 加载头部的样式资源-->自上而下/自外到内渲染DOM;
{{</ uml >}}

渲染到box的时候，子元素没有渲染，因此盒宽度就是图片+文字高度;
而渲染到text时,宽度100%就是box的宽度,并造成了溢出。

然后是高度的情况,设置高度100%有两种方法:

父级指定高度
使用绝对定位 position: absolute; (absolute会相对第一个父元素【非static】进行固定定位)。
- 如果第一个父元素是默认的static，那么就和窗口一样高
- 如果第一个父元素不是static,那么和父元素一样高

第二种方式在某些情况下回很有用, 因为无需指定具体的高度。

min/max-width/height

可以同时设置最小、最大值,满足 1200~1400 像素自适应。

.container {
    min-width: 1200px;
    max-width: 1400px;
}

例如博客中图片尺寸设置,可以图片不会过大。height: auto也是必须的,保证图片比例合适。

img {
      max-width: 100%;
      height: auto!important;
}

***初始值:***min-width/min-height 的初始值是 auto，max-width/max- height 的初始值是 none。

优先级:max-width的优先级比width:480px!important;更高。

***最小值、最大值冲突的情况:***当最小值大于最大值的时候,值最大(最小值)保留下来。

div{
min-height:140px;
max-height:3px;
}

盒尺寸

关于‘替换’元素

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。一些特点:

内容的外观不受页面上的 CSS 的影响 (样式表现在 CSS 作用域之外)。如input[type='checkbox']{}无法更改内间距、背景色等样式。
有自己的尺寸:默认尺寸是300x150,如video。也有少部分替换元素为 0 像素，如图片，而表单元素的替换元素的尺寸则和浏览器有关，没有明显的规律。
在很多 CSS 属性上有自己的一套表现规则,如vertical-align:baseline是元素下边缘对齐，而对字符串来说指的是字符 x 下边缘的。

没有 src 属性的<img>是非替换元素

***尺寸分类:***作者将替换元素的尺寸从内而外分为 3 类:固有尺寸、HTML 尺寸和 CSS 尺寸。

固有尺寸。替换内容的原本尺寸,如图片本身的宽高
html尺寸。只能通过HTML 原生属性改变。如<img width="300" height="100">、<input type="file" size="30">、<textarea cols="20" rows="5></textarea>
CSS 尺寸。通过html修改的尺寸

尺寸计算规律

固有尺寸	html尺寸	CSS 尺寸	结果
✅			固有尺寸
✅	✅		html尺寸
✅		✅	CSS 尺寸
✅	✅	✅	CSS 尺寸
		300x150 如`<video></video>`

内联元素和块元素规则相同,如下:

/* 显示的尺寸仍然的固有尺寸 */
img { display: block; }
<img src="1.jpg">

img比较特殊,<img>谷歌上为为0x0

一个小技巧:

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

<img src="transparent.png">

实际上，这个透明的占位图片也是多余的资源，我们直接: 然后配合下面的 CSS 可以实现一样的效果:

img { visibility: hidden; }
img[src] { visibility: visible; }

火狐img标签适配问题:

img { width: 200px; height: 150px; }
<img>

火狐浏览器img默认为inline,因此不生效,可以设置:

img { display: inline-block; }

content中图片大小的问题

<div class="content-test">
<style>
.content-test:before {
    content: url(https://demo.cssworld.cn/images/common/m/1.jpg);
    display: block;
    width: 20px; height: 200px;
}
</style>
</div>

可以看到显示的是图片的原始尺寸。

因为图片中的 content 替换内容默认的适配方式是填充(fill)，也就是外部设定的尺寸多大，我就填满、跟着一样大。换句话说，尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配 HTML 尺寸和 CSS 尺寸的方式，且在 CSS3 之前，此适配方式是不能修改的。

在 CSS3 新世界中，<img>和其他一些替换元素的替换内容的适配方式可以通过 object-fit 属性修改了。例如，<img>元素的默认声明是 object-fit:fill，如果我们设置 object-fit:none，则我们图片的尺寸就完全不受控制，表现会和非替换元素::before 生成的图片尺寸类似;如果我们设置 object-fit:contain，则图片会以保持比例图片，尽可能利用 HTML 尺寸但又不会超出的方式显示，有些类似于 background-size:contain 的呈现原理，如果此时我们设定<img>元素的 width 和 height 都是 200 像素，则会呈现图的自动垂直居中效果。
因此content的图片最好是合适的大小,分辨率要求高的用svg。

对于<img>标签来说,如果没有src,它是为替换元素,此时::after、:hover等伪类是生效的。可以用这个特性实现一些效果(略)。

content

'css世界中',把content属性生成的对象成为“匿名替换元素”。content生成的内容的一些特征:

content 生成的文本是无法选中、无法复制的。content 生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取
不能左右:empty 伪类。空标签及时设置了content，也仍然认为是:empty.
content 动态生成值无法获取。如content: counter(icecream);,当window.getComputedStyle(dom , "::after").content; // 结果是:"counter(icecream)",而不是数值 3

内容生成技术

1). 配合@font-face规则实现图标字体效果

https://demo.cssworld.cn/4/1-8.php

@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>

2). 还可以插入 Unicode 字符，比较经典的就是插入换行符来实现某些布局或者效果

:after {
       content: '\A';
       white-space: pre;
}

很多人可能会问:这个'\A'是什么?'\A'其实指的是换行符中的 LF 字符，其 Unicode 编码是 000A，在 CSS 的 content 属性中则直接写作'\A';换行符除了 LF 字符还有 CR 字符，其 Unicode 编码是 000D，在 CSS 的 content 属性中则直接写作'\D'。CR 字符和 LF 字符分别指回车(CR)和换行(LF)，content 字符生成强大之处就在于不仅普通字符随便插，Unicode 字符也不在话下。

举例:配合 CSS3 animation 用来实现字符动画效果:

正在加载...

<style>
dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';   
  white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
</style>
正在加载<dot>...</dot>

原理: 插入 3 行内容，分别是 3 个点、2 个点和 1 个点，然后通过 transform 控制垂直位置，依次展示每一行的内容.

(1)<dot>是自定义的一个标签元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8 等低版本浏览器不认识自定义的 HTML 标签，因此，会乖乖地显示里面默认的 3 个点，对我们的 CSS 代码完全忽略。

(2)伪元素使用::before 同时 display 设置为 block，是为了在高版本浏览器下原来的 3 个点推到最下面，不会影响 content 的 3 行内容显示，如果使用::after 怕是效果就很难实现了。
(3)3 个点在第一行的目的在于兼容 IE9 浏览器，因为 IE9 浏览器认识<dot>以及::before，但是不支持 CSS 新世界的 animation 属性，所以，为了 IE9 也能正常显示静态的 3 个点，故而把 3 个点放在第一行。
(4)这里的 white-space:pre-wrap 改成 white-space:pre 效果其实是一样的，之所以使用 pre-wrap 作为值完全是心情使然。关于两者的差异本书后面会介绍，这里先不用深究。
还有最后几个小技巧，首先，'\A'是不区分大小写的;其次，'\D'也能实现换行效果，但是，要想上下行对齐，需要用在::before 伪元素上，因为 CR 是将光标移动到当前行的开头，而 LF 是将光标“垂直”移动到下一行。

图片生成

url 功能符中的图片地址不仅可以是常见的 png、jpg 格式，还可以是 ico 图片、svg 文件以及 base64URL 地址，但不支持 CSS3 渐变背景图。

虽然支持的图片格式多种多样，但是实际项目中，content 图片生成用得并不多，主要原因在于图片的尺寸不好控制，我们设置宽高无法改变图片的固有尺寸。所以，伪元素中的图片更多的是使用 background-image 模拟，类似这样:

div:before {
      content: '';
      background: url(1.jpg);
}

content attr属性值内容生成(略)

计数器(略)

padding

支持百分比: 都是相对于宽度
不支持负值