流、元素与基本尺寸

百分比

百分比需要父级支持才能才可以生效,否则宽、高永远是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>
红色背景是父级

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

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

渲染到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 尺寸

  1. 固有尺寸。替换内容的原本尺寸,如图片本身的宽高
  2. html尺寸。只能通过HTML 原生属性改变。如<img width="300" height="100"><input type="file" size="30"><textarea cols="20" rows="5></textarea>
  3. 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。

20190511155754736134335.png

对于<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

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